javascript 中的 NodeList 对象

Question

谁能告诉我 NodeList 是什么样的对象。我读到它是一个类似数组的对象，可以通过括号表示法访问它，例如

var a = someNode.childNode[0];

。这怎么可能，因为通过括号表示法我们只能访问对象的属性，而且据我所知我们不能拥有

Answer 1

A

NodeList

是`DOM 元素的集合。它就像一个数组（但事实并非如此）。要使用它，您必须将其转换为常规 JavaScript 数组。以下代码片段可以为您完成工作。

const nodeList = document.getElementsByClassName('.yourClass'),
      nodeArray = [].slice.call(nodeList);

更新：

// newer syntax
const nodeList = Array.from(document.querySelectorAll('[selector]'))

// or
const nodeList = [...document.querySelectorAll('[selector]')]

Answer 2

NodeList

是一个 host 对象，不受适用于本机 JavaScript 对象的通常规则的约束。因此，您应该坚持使用已记录的 API，它由

length

属性和通过方括号属性访问语法访问其成员组成。您可以使用此 API 创建一个包含 NodeList 成员快照的

Array

：

var nodeList = document.getElementsByTagName("div");
var nodeArray = [];
for (var i = 0; i < nodeList.length; ++i) {
    nodeArray[i] = nodeList[i];
}

Answer 3

NodeList 不是核心 Javascript 对象，它是由浏览器通过 DOM 提供的。想象一个返回动态或实时对象接口的函数，因此 forEach() 不可用，但您可以将其转换为真实数组以获得快照，例如

// turns nodelist into an array to enable forEach
function toArray(list) {
  var i, array = [];
  for  (i=0; i<list.length;i++) {array[i] = list[i];}
  return array;
}

详情：http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

Answer 4

JavaScript 就像酒精一样，它可以强制：

var links = document.getElementsByTagName('a');
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) {
  anchor.addEventListener('click', onClickFN, false);
});

Answer 5

NodeLists“实时”，也就是说，当文档结构发生变化时，它们会更新，以便它们始终具有最准确的信息。实际上，所有 NodeList 对象都是在访问时针对 DOM 运行的查询。

任何时候你想要迭代 NodeList，最好用长度初始化第二个变量，然后将迭代器与该变量进行比较：

var divs = document.getElementsByTagName("div");

for (var i=0, lens=divs.length; i  <  len; i++){
    var div = document.createElement("div");
    document.body.appendChild(div);
} 

NodeList 是一个类似数组的结构，但它实际上不是一个数组。您可以通过括号表示法访问数组值。

Answer 6

节点列表通常被实现为带有过滤器的节点迭代器。这意味着获取像长度这样的属性是O(n)，通过重新检查长度来迭代列表将是O(n^2)。

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

最好这样做：

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
   doSomething(paragraph);
} 

这适用于所有集合和数组，只要数组不包含被视为布尔值 false 的内容即可。

在迭代 childNode 的情况下，您还可以使用 firstChild 和 nextSibling 属性。

var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}

Answer 7

现在在 ES2015 中，您可以使用

Array.from

方法从任何类似数组的对象创建 Array 实例，所以这应该可以工作：

const divList = Array.from( document.getElementsByTagName("div") );

了解更多信息：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Answer 8

总结：

NodeList

对象是表示节点集合的数据结构。 DOM 上下文中的节点可以是以下内容：

1. 文件本身
2. DOM 元素（即 HTML/SVG 元素）
3. 文字
4. 评论

A

NodeList

不是数组，但是

NodeList

是可迭代数据结构，这意味着我们可以使用

for..of

循环遍历值（即节点项）。此外，在

NodeList

的原型上还有一些不错的实用功能，这使得使用它们更加方便。

示例：

const parent = document.querySelector('.parent');
const myNodeList1 = parent.childNodes; // this property is a Nodelist
console.log(myNodeList1 instanceof NodeList);

const myNodeList2 = document.querySelectorAll('.foo'); // this method returns a Nodelist
console.log(myNodeList2 instanceof NodeList);

// looping over the items of a nodelist
for (let el of myNodeList2) {
  el.innerHTML = 'hi';
}

// getting the length of a nodeList 
console.log(myNodeList2.length);

<div class="parent">
  <div class="foo"></div>
  <div class="foo"></div>
</div>

这是

Nodelist

在浏览器 (chrome) 开发工具中的样子：

---

您可以使用以下符号访问

NodeList

的元素：

 myNodelist[0]; // grabs the first item of the NodeList

因为你只是使用键的对象的属性值。在此示例中，属性的键是数字零，值是 DOM 元素。