Question

所以当用户点击按钮时，我写了一些滚动到文档上某个位置的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会这样做？

Answer 1

.attributes返回一个NamedNodeMap。 According to MDN：

NamedNodeMap接口表示Attr对象的集合。 NamedNodeMap中的对象不是任何特定的顺序，不像 NodeList，尽管它们可以像数组一样被索引访问。

虽然您可以使用this.attributes[0]引用它，但您会注意到它不能push，因为它不是数组。它是一个对象，它的构造没有顺序，因此它可能不是Edge中的错误。它仍然会返回它应该的东西，这是一个无序的对象。

正如其他人所暗示的那样，你应该专门得到一些href，但希望这能够为为什么它没有像你想象的那样发挥作用。

Answer 2

为什么不使用el.getAttribute（'href'）呢？ https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

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

2 个答案: