javascript - Edge 中的 DOM API 问题

Question

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

来自 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>

来自 js 文件的 Javascript 示例操作和发布此模板:

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;
}

Edge 抛出的错误是: SCRIPT438:对象不支持属性或方法“getElementById”

指向线:

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

我从 Microsoft 查找了 DOM API，似乎 document.getElementById 返回了一个 IHTMLElement，它显然没有 getElementById 方法...所以，我的问题是:

如何更改我的代码以在 Edge 上运行？ (理想情况下，我希望能够在没有 jQuery 的情况下做到这一点，但如果不可能，请告诉我)

注意:我不关心 IE，因为这是一个个人项目而不是商业项目。我的很多代码都是用 ES6 编写的，无论如何在 IE 中都不起作用。

Answer 1

我建议您改用 .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()}`;