NodeList 和 HTMLCollection
- 返回值nodeList
- childNodes
- querySelectorAll
- 返回值HTMLCollection
- children
- getElementsByTagName
- getElementsByClassName
以下我们可以观察出childNodes、querySelectorAll、children、getElementsByTagName、getElementsByClassName的返回值类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div" >
<p class="cdiv">p1</p>
<h3>h1</h3>
<p class="cdiv">p2</p>
<!-- 注释 -->
<p>p3</p>
<h3>h2</h3>
<p>p4</p>
<h3>h3</h3>
<p>p5</p>
<p>p6</p>
</div>
<script>
{
let div = document.querySelector("#div");
console.log(div.childNodes);
console.log(div.children);
console.log(div.querySelectorAll("p"));
console.log(div.getElementsByTagName("p"));
console.log(div.getElementsByClassName("cdiv"));
}
</script>
</body>
</html>
差异1：
nodeList 有 forEach 方法，但是 HTMLCollection 没有forEach方法。
let div = document.querySelector("#div");
div.childNodes.forEach(item=>{
console.log(item);
});
div.children.forEach(item=>{
console.log(item);
});
差异2
HTMLCollection 每次调用时都会动态的去获取, nodeList 中 childNodes 有动态更新，但是querySelectorAll 就不会动态更新。
let div = document.querySelector("#div");
let nodes = div.childNodes;
let collection = div.children;
console.log(nodes, collection);
div.innerHTML = "";
console.log(nodes, collection);
let div = document.querySelector("#div");
//let nodes = div.childNodes;
let nodes = div.querySelectorAll("p");
let collection = div.children;
console.log(nodes, collection);
div.innerHTML = "";
console.log(nodes, collection);
（后续待补充）
