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：对象不支持属性或方法＆＃39; getElementById＆＃39;

指向这一行：

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()}`;

Edge中的DOM API问题

1 个答案: