javascript中的NodeList对象

Question

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

Answer 1

NodeList是DOM elements的集合。它就像一个数组（但它不是）。要使用它，您必须将其转换为常规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是主机对象，不受适用于本机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

节点列表“实时”，也就是说，当文档结构发生变化时，它们会更新，以便它们始终具有最准确的信息。实际上，所有NodeList对象都是在访问DOM时针对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 5

JavaScript就像酒精，它可以强迫：

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

Answer 6

节点列表通常实现为带有过滤器的节点迭代器。这意味着获取像length这样的属性是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);
} 

这适用于所有集合和数组，只要该数组不包含被视为boolean false的内容。

如果您正在迭代childNodes，您还可以使用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. 评论

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）devtools中的外观如下：

---

您可以使用以下符号访问NodeList的元素：

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

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