javascript - 为什么Microsoft Edge在呈现页面之前会重新排序html属性？

因此，我编写了一些Javascript，当用户单击按钮时，它会滚动到文档上的某个位置：

document.getElementById("navContact").addEventListener("click", scrollToSection);

function scrollToSection() {
    /* this = element on which the user clicked */
    smoothScroll(this.attributes[0].value.split("#")[1]);
}

它很好，简单，易于阅读和调试。唯一的问题是，它通过从命名节点映射读取必须滚动到的节的名称。在我的标记中，属性的顺序如下：

<a href="#contact_us" id="navContact"></a>
<--! document.getElementById("navContact").attributes = [href="contact_us", id="navContact"] -->

但是当我在Edge的DOM资源管理器中检查时，属性会重新排序：

<a id="navContact" href="#contact_us"></a>
<--! document.getElementById("navContact").attributes = [id="navContact", href="contact_us"] -->

根据Josiah Keller的建议，我将js改为使用element.getAttribute()而不是this.attributes。
同时，我很想知道，Edge为什么要这么做？

最佳答案

.attributes返回NamedNodeMap。According to MDN：
NamedNodeMap接口表示Attr对象的集合。
NamedNodeMap中的对象没有任何特定的顺序，与
NodeList，尽管它们可以像在数组中一样被索引访问。
虽然您可以用this.attributes[0]引用它，但是您会注意到您不能对它push引用，因为它不是数组。它是一个对象，它的构造没有考虑到顺序，所以它可能不是边缘的bug。它仍在返回它应该返回的内容，这是一个无序的对象。
正如其他人所建议的那样，你应该只得到一个具体的href，但希望这能解释为什么它不能像你想象的那样工作。