javascript中的NodeList对象

Question

谁能告诉我 NodeList 是什么类型的对象。我读到它是一个类似数组的对象，可以通过括号表示法访问它，例如var a = someNode.childNode[0];。这怎么可能，因为通过括号符号我们只能访问对象的属性，而且我知道我们不能拥有

Answer 1

NodeList 是 DOM elements 的集合。它就像一个数组（但它不是）。要使用它，您必须将其转换为常规 JavaScript 数组。下面的 sn-p 可以为你完成工作。

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 是一个宿主对象，不受适用于原生 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. cmets

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 元素。