JavaScript中级篇：：HTMLCollection 和 NodeList 的区别

初了解：HTMLCollection 和 NodeList 的区别

引自自学JavaScript 0406 课程

<div id="ct">
    <p class="para">Lyndon</p>
    <p class="attr">123<span>dozz</span></p>
</div>
<script>
    var ct = document.getElementById("ct");
    console.log(ct.children);
    console.log(ct.childNodes);
</script>

• 输出的效果图如下：
  

---

可以看出，当我用 getElementById 方法匹配到 id = "ct"的元素节点后：

1. 用 ct.children 返回的是一个 HTMLCollection（图中已用红框标出），其中包含的两个元素是 p.para 以及 p.attr。

2. 用 ct.childNodes 返回的是一个 NodeList（图中已用红框标出），其中包含的元素稍微多些，有 5 项：text, p.para, text, p.attr, text。

3. 每一个元素不断展开，会发现有很多的属性，零零碎碎的，这时候可以发现一个比较明显的区别是 textContent 的不同：

   • 在 HTMLCollection 下
     p.para 的 textContent 是"Lyndon"
     p.attr 的 textContent 是"123dozz"
   • 在 NodeList 下
     text 的 textContent 是"↵ "
     p.para 的 textContent 是"Lyndon"
     text 的 textContent是"↵ "
     p.attr 的 textContent 是"123dozz"
     text的 textContent 是"↵ "

4. 相同点：HTMLCollection 与 NodeList 都是 DOM 节点的集合;

5. 不同点：两者都属于 Collections 范畴，两者的区别在于：

   • HTMLCollection 对象具有 namedItem()方法，可以传递 id 或 name 获得元素；
   • NodeList 对象只支持 id；
   • HTMLCollection 比 NodeList 多一项方法：namedItem，可以通过传递 id 或 name 属性来获取节点信息；
   • 如下是HTMLCollection 获取id字段的示例代码，大家也可以把id改为name值，用其他方法同样能够开启事件。

// 示例代码：HTMLCollection的namedItem()方法
<h1>HTMLCollection namedItem() 方法</h1>

<p id="myElement">namedItem() 方法返回具有指定 ID 或 name 的元素。</p>

<p>点击按钮返回 ID 为 "myElement" 的 P 元素的内容：</p>

<button onclick="myFunction()">输出 P 的 innerHTML</button>

<script>
function myFunction() {
 var x = document.getElementsByTagName("P").namedItem("myElement");
 alert(x.innerHTML);
}
</script>