文章目录

不同的DOM选择器，有的返回的是NodeList对象，有的返回的HTMLCollection对象。比如下面这段代码

const element = document.getElementById("main");
        console.log(element.children);
        console.log(element.childNodes)

结果如下：

JavaScript：HTMLCollection对象和NodeList对象_1024程序员节


调用children属性返回的HTMLCollection对象，调用childNodes属性返回的是NodeList对象。

HTMLCollection对象和NodeList对象的区别在于节点处理上不同：

HTMLCollection对象

HTMLCollection对象具有length属性，是返回集合的长度，可以通过item()函数和namedItem()函数访问到特定的元素，

item()函数，HTMLCollection对象可以调用item函数，通过序号来访问到特定的元素，例如：

<!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>
    <ul id="main">
        <li id="li1">id="li1"</li>
        <li id="li2" class="li2"> id="li2"</li>
        <li id="li3" name="li3"> id="li3"</li>
        <li id="li4"> id="li4"</li>
        <li id="li5"> id="li5"</li>
    </ul>

    <script>const element = document.getElementById("main").children;
        console.log(element.item(0));</script>
</body>

JavaScript：HTMLCollection对象和NodeList对象_html_02


namedItem()函数，返回一个节点，在使用的时候是先匹配id，如果没有，那么就匹配name属性，若是出现重复的id或者name属性的时候，只返回第一个。

<script>
        const element = document.getElementById("main").children;
        console.log(element.namedItem("li2"));
    </script>

JavaScript：HTMLCollection对象和NodeList对象_html_03

NodeList对象

NodeList对象也具有length属性，返回的是集合长度，可以通过item函数定位子元素，具体的和HTMLCollection对象的item函数一致。

当我们在删除或者新增一个节点的时候，就会立即反馈到这两个对象中。

这两个对象的相同点：

  1. 都是类数组对象，具有length属性，可以通过call或者apply函数处理处理为真正的数组；
  2. 都具有item函数，通过索引来定位元素；
  3. 都是实时性，DOM的变化会立即反馈到NodeList对象或者是HTMLCollection对象上

不同点：

  1. HTMLCollection对象多一个namedItem()函数，是通过id或者name属性定位元素；
  2. HTMLCollection对象只含有元素的集合，就是具有标签名的元素；NodeList对象是节点的集合，包括元素、节点，比如text文本节点。