NodeList

NodeList objects are collections of nodes , usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll() .

Although NodeList is not an Array , it is possible to iterate over it with forEach() . It can also be converted to a real Array 使用 Array.from() .

However, some older browsers have not implemented NodeList.forEach() nor Array.from() . This can be circumvented by using Array.prototype.forEach() — see this document's 范例 .

实时 vs 静态 NodeList

Although they are both considered NodeList s, there are 2 varieties of NodeList: live and static .

Live NodeLists

In some cases, the NodeList is live , which means that changes in the DOM automatically update the collection.

例如, Node.childNodes is live:

const parent = document.getElementById('parent');
let child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // outputs "3"
					

静态 NodeList

In other cases, the NodeList is static, where any changes in the DOM does not affect the content of the collection. The ubiquitous document.querySelectorAll() method returns a static NodeList .

It's good to keep this distinction in mind when you choose how to iterate over the items in the NodeList , and whether you should cache the list's length .

特性

NodeList.length
The number of nodes in the NodeList .

方法

NodeList.item()
Returns an item in the list by its index, or null if the index is out-of-bounds.
An alternative to accessing nodeList[ i ] (which instead returns undefined when i is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.
NodeList.entries()
Returns an iterator , allowing code to go through all key/value pairs contained in the collection. (In this case, the keys are numbers starting from 0 and the values are nodes.)
NodeList.forEach()
Executes a provided function once per NodeList element, passing the element as an argument to the function.
NodeList.keys()
Returns an iterator , allowing code to go through all the keys of the key/value pairs contained in the collection. (In this case, the keys are numbers starting from 0 .)
NodeList.values()
Returns an iterator allowing code to go through all values (nodes) of the key/value pairs contained in the collection.

范例

It's possible to loop over the items in a NodeList using a for loop:

for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}
					

Don't use for...in to enumerate the items in NodeList s , since they will also enumerate its length and item properties and cause errors if your script assumes it only has to deal with element objects. Also, for..in is not guaranteed to visit the properties in any particular order.

for...of loops will loop over NodeList objects correctly:

const list = document.querySelectorAll('input[type=checkbox]');
for (let checkbox of list) {
  checkbox.checked = true;
}
					

Recent browsers also support iterator methods ( forEach() ) as well as entries() , values() ,和 keys() .

There is also an Internet Explorer-compatible way to use Array.prototype.forEach for iteration:

const list = document.querySelectorAll('input[type=checkbox]');
Array.prototype.forEach.call(list, function (checkbox) {
  checkbox.checked = true;
});
					

规范

规范 状态 Comment
DOM
The definition of 'NodeList' in that specification.
实时标准
Document Object Model (DOM) Level 3 Core Specification
The definition of 'NodeList' in that specification.
Obsolete
Document Object Model (DOM) Level 2 Core Specification
The definition of 'NodeList' in that specification.
Obsolete
Document Object Model (DOM) Level 1 Specification
The definition of 'NodeList' in that specification.
Obsolete 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
NodeList Chrome 1 Edge 12 Firefox 1 IE 8 Opera 8 Safari 3 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
entries Chrome 51 Edge 16 Firefox 50 IE No Opera 38 Safari 10 WebView Android 51 Chrome Android 51 Firefox Android 50 Opera Android ? Safari iOS 10 Samsung Internet Android 5.0
forEach Chrome 51 Edge 16 Firefox 50 IE No Opera 38 Safari 10 WebView Android 51 Chrome Android 51 Firefox Android 50 Opera Android 41 Safari iOS 10 Samsung Internet Android 5.0
item Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
keys Chrome 51 Edge 16 Firefox 50 IE No Opera 38 Safari 10 WebView Android 51 Chrome Android 51 Firefox Android 50 Opera Android ? Safari iOS 10 Samsung Internet Android 5.0
length Chrome 1 Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
values Chrome 51 Edge 16 Firefox 50 IE No Opera 38 Safari 10 WebView Android 51 Chrome Android 51 Firefox Android 50 Opera Android ? Safari iOS 10 Samsung Internet Android 5.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知