Edge中的DOM API问题

我用Javascript中的websockets编写了一个聊天应用程序。我预计这不会完全支持跨浏览器。但是，我遇到了一个问题，这似乎是Chrome/Firefox和Edge之间DOM操作API的区别造成的。我的应用在Chrome和Firefox中完美运行，但在Edge中出现错误。Edge中的DOM API问题

从HTML文件

示例HTML模板：

<template id ="message-template"> 
    <li class="media" style="margin-top:0px;"> 
     <div class="media-body"> 
       <a class="pull-left" href="#"> 
        <img class="media-object img-circle " src="" /> 
       </a> 
       <div class="media-body"> 
        <span id='message-body'> </span> 
        <br /> 
        <small class="text-muted" id="message-user"></small> 
        <hr /> 
       </div>    
     </div> 
    </li> 
</template>

例的JavaScript js文件操纵和发布此模板：

function addMessage(message){ 
    let date = new Date(); 
    let mtpl = document.getElementById('message-template').content.cloneNode(true); 
    mtpl.getElementById('message-body').innerHTML = message.message; 
    mtpl.getElementById('message-user').innerHTML = `${message.client} | ${date.toString()}`; 
    messages.appendChild(mtpl); 
    //Scroll down on overflow 
    messages.scrollTop = messages.scrollHeight; 
}

由边缘抛出的错误是： SCRIPT438：对象不支持财产或方法'getElementById'

指向该行：

mtpl.getElementById('message-body').innerHTML = message.message;

我抬头的DOM API来自微软，并且看起来的document.getElementById返回IHTMLElement，这显然不具有的getElementById方法......所以，我的问题是：

哪有我改变我的代码在Edge上工作？ （理想情况下，我希望能够做到这一点没有jQuery的，但如果它是不可能的，请让我知道）

注：我不关心IE浏览器，因为这是一个个人项目，而不是商业。我的很多代码都是用ES6编写的，而IE在IE中不起作用。

来源

2016-10-02 hmb

是否有一个原因，你不要只有'document.getElementById（'message-body'）;'？ –

是的，messages.appendChild（mtpl）将新消息添加到聊天室。如果我使用document.getElementById（'message-body'），它将选择聊天箱中的第一条消息。 – hmb

你是说你有多个具有相同'id'的元素？ –

我建议你改用.querySelector（）函数。

所以，

mtpl.getElementById('message-body').innerHTML = message.message;

成为

mtpl.querySelector('#message-body').innerHTML = message.message;

而且

mtpl.getElementById('message-user').innerHTML = `${message.client} | ${date.toString()}`;

成为

mtpl.querySelector('#message-user').innerHTML = `${message.client} | ${date.toString()}`;

来源

2017-07-10 07:11:22

Edge中的DOM API问题

回答

相关问题