摘要
本文主要讲述了：
- 什么是
NodeList
- 作用
- 实例属性
- 原型方法
正文
什么是NodeList
一个类数组对象，原型为Object.prototype
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
console.log(
Object.getPrototypeOf(NodeList.prototype) === Object.prototype
);
</script>
</body>
</html>
|
作用
表示节点集合，作为document.querySelectorAll()、Node.prototype.childNodes等的返回值类型
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p class="foo">hello, jsweibo</p>
<script>
const tempNodeList = document.querySelectorAll('.foo');
console.log(tempNodeList);
console.log(tempNodeList[0].childNodes);
</script>
</body>
</html>
|
注意：HTMLCollection是动态的，而NodeList既可以是动态的，也可以是静态的
示例：document.querySelectorAll()返回静态的NodeList
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p class="foo">hello, jsweibo</p>
<script>
const tempNodeList = document.querySelectorAll('.foo');
console.log(tempNodeList.length);
window.addEventListener('click', function () {
const foo = document.createElement('p');
foo.textContent = 'hello, jsweibo';
foo.className = 'foo';
document.body.appendChild(foo);
console.log(tempNodeList.length);
});
</script>
</body>
</html>
|
示例：Node.prototype.childNodes返回动态的NodeList
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p class="foo">hello, jsweibo</p>
<script>
const tempNodeList = document.querySelector('body').childNodes;
console.log(tempNodeList.length);
window.addEventListener('click', function () {
const foo = document.createElement('p');
foo.textContent = 'hello, jsweibo';
foo.className = 'foo';
document.body.appendChild(foo);
console.log(tempNodeList.length);
});
</script>
</body>
</html>
|
实例属性
length
实例中节点的个数
注意：该属性为可枚举属性，这意味着你不应该使用for...in遍历NodeList实例的属性名称
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
console.log(Object.getOwnPropertyDescriptors(NodeList.prototype));
for (let key in NodeList.prototype) {
console.log(key);
}
</script>
</body>
</html>
|
如果需要遍历NodeList实例中的节点，可以使用Array.prototype.forEach或for...of
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<p class="foo">hello, jsweibo</p>
<script>
const tempNodeList = document.querySelectorAll('.foo');
Array.prototype.forEach.call(tempNodeList, function (value) {
console.log(value);
});
for (let value of tempNodeList) {
console.log(value);
}
</script>
</body>
</html>
|
原型方法
item
用于获取NodeList实例中指定下标的节点，可以使用[]替代
注意：该属性为可枚举属性，这意味着你不应该使用for...in遍历NodeList实例的属性名称
forEach
用于遍历NodeList实例中的节点
注意：该属性为可枚举属性，这意味着你不应该使用for...in遍历NodeList实例的属性名称
keys
用于获取键名的迭代器
注意：该属性为可枚举属性，这意味着你不应该使用for...in遍历NodeList实例的属性名称
values
用于获取键值的迭代器
注意：该属性为可枚举属性，这意味着你不应该使用for...in遍历NodeList实例的属性名称
entries
用于获取键值对数组的迭代器
注意：该属性为可枚举属性，这意味着你不应该使用for...in遍历NodeList实例的属性名称
参考资料
本文对你有帮助？请支持我
支付宝
微信