HTMLCollection NodeList 经常见到但还没有深入了解和list collectiion的区别。 再JS内Array有什么区别。
<!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>
<div>
<p></p>
<p></p>
<p></p>
</div>
<script>
var p1=document.getElementsByTagName("p");
console.log(p1);
</script>
</body>
</html>
测试后发现系列getElements都返回HTMLCollection 对象 。再Google浏览器发现
没有Array的一系列方法 valueOf(), pop(), push(), join() 。
HTMLCollection有length属性,namedItem() 方法接受一个字符串参数返回id对应的对象,item(index) 方法同样返回对应索引 的对象。
接下来看看NodeList,
常用的 获取Node List对象的方法是
var p2=document.querySelectorAll("p")
console.log(p2);
通过比较 发现NodeList同样有 固定的length属性,item() 方法。
但多了 entries 可返回一个iterator ,用来遍历。注意遍历会返回 n个数组,每个数组内装的key value,并不是直接返回键值对!
forEach() 一样是遍历,同 Array。
keys values就不说了。
var childNew = Array.prototype.slice.call(childN);
slice()可以把NodeList 变成Array
最后再说一点。NodeList 比HTMLCollection要 更新,会包含text node(字符节点)和comment(注释),并且值得注意的是NodeList 中 通过querySelectorAll() 返回的对象是静态集合,HTMLCollection返回的对象全部是动态的。