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問題

回答

相關問題