什么是 NodeList，它们是如何工作的？

Posted on by

您是否知道 Javascript 不会将多个元素的选择分类为数组？相反，它是一种叫做 NodeList 的东西。节点列表本质上是元素列表。要生成NodeList，我们可以这样做：

let myNodeList = document.querySelectorAll('p');

上面的代码将返回在页面上找到的所有段落的列表作为NodeList.

节点列表很有趣，因为它们不是数组，因此它们不会继承数组具有的所有不同功能。一个值得注意的例子是，在一些较旧的浏览器中，例如 Internet Explorer，NodeLists 不继承该foreach功能。

因此，如果您想为每个段落添加事件侦听器，以下代码将在 Internet Explorer 中引发错误：

let myNodeList = document.querySelectorAll('p');

myNodeList.forEach(function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

由于这适用于大多数现代浏览器，您通常不必担心使用它，但如果您想支持旧浏览器并使用forEach，我们必须将我们的 NodeList 放入一个数组中，如下所示：

let myNodeList = document.querySelectorAll('p');
Array.prototype.forEach.call(myNodeList, function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

有点复杂，但现在我们可以确保所有用户都可以访问我们添加到 NodeList 项中的事件侦听器。

NodeLists 支持哪些功能？#

由于本文重点介绍了NodeLists 在默认情况下并非总是如此forEach，您可能想知道可以在 NodeList 上运行哪些函数。有5个：

  • NodeList.entries – 返回一个迭代器，用于获取 id 和 element 作为 id/element 对，即[ 1, p ].
  • NodeList.forEach – 用于单独遍历每个项目。
  • NodeList.item – 用于通过 id 获取特定项目，即通过 . 获取第一段NodeList.item(0)。
  • NodeList.keys – 返回一个用于获取键的迭代器，即 1 2 3 4 5 …
  • NodeList.values – 返回一个用于获取 HTML 元素的迭代器，即 pppp …

值得注意的是，NodeList.item这是 Internet Explorer 唯一支持的功能。其余的都没有。

为了向您展示一些示例，以下是我们如何在 NodeList 上运行这些函数：

NodeList.entries

let myNodeList = document.querySelectorAll('p');

// entries
let allEntries = myNodeList.entries();
for(var i of allEntries) {
    // Console logs each paragraph with an id individually, such as [ 0, p ] [ 1, p ] [ 2, p ] ...
    console.log(i);
}

NodeList.forEach

let myNodeList = document.querySelectorAll('p');

// forEach - iterate over each item
myNodeList.forEach(function(item) {
    // Console logs each paragraph element individually
    console.log(i);
});

NodeList.item

let myNodeList = document.querySelectorAll('p');

// item - get the first element (0)
let firstElement = myNodeList.item(0);
// Console logs the first element only
console.log(firstElement);

NodeList.keys

let myNodeList = document.querySelectorAll('p');

let getKeys = myNodeList.keys();
// Console logs the id of each element, i.e. 1 2 3 4 5 ...
for(var i of getKeys) {
    console.log(i);
}

NodeList.values

let myNodeList = document.querySelectorAll('p');

let getValues = myNodeList.values();
// Console logs each HTML element as an array, i.e. p p p p ...

for(var i of getValues) {
    console.log(i);
}

推荐阅读：