NodeList | Web API

在此页

实时 vs 静态 NodeList
特性
方法
范例
规范
浏览器兼容性
相关话题

NodeList 对象是集合为 nodes , usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll() .

尽管 NodeList is not an 数组 , it is possible to iterate over it with forEach() . It can also be converted to a real 数组 使用 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 .

实时 NodeList

在某些情况下， 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

在其它情况下， NodeList is static, where any changes in the DOM does not affect the content of the collection. The ubiquitous document.querySelectorAll() 方法返回 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: 节点数在 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 当 i is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.
NodeList.entries(): 返回 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(): 返回 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(): 返回 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 使用 for 循环：

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

不使用 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;
});

规范

规范	状态	注释
DOM The definition of 'NodeList' in that specification.	实时标准
DOM (文档对象模型) 3 级核心规范 The definition of 'NodeList' in that specification.	过时
DOM (文档对象模型) 级别 2 核心规范 The definition of 'NodeList' in that specification.	过时
DOM (文档对象模型) 1 级规范 The definition of 'NodeList' in that specification.	过时	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	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
`值`	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

图例

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

元数据

最后修改： Jun 5, 2020

在此页

实时 vs 静态 NodeList

实时 NodeList

静态 NodeList

特性

方法

范例

规范

浏览器兼容性

图例

相关话题