HTMLCollection 对象与 NodeList 对象有什么区别？

在选择器中，我们可以知道有些选择器返回HTMLCollection对象，有些返回NodeList对象。

getElementsByClassName():通过类名来查找对应的元素，返回的是一个HTMLCollection对象。

getElementsByName():通过元素的name属性查找对应的元素，返回的是NodeList对象，它是一个类似于数组的结构。

getElementsByTagName(): 通过标签的名称来查找对应的元素，返回的是HTMLCollection对象。

HTMLCollection 对象与 NodeList 对象都是类似数组的结构，有length属性，可以通过call()函数或者是apply()函数转换成数组，使用数组中的函数。

HTMLCollection 对象

HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合，还提供了从该集合中选择元素的方法和属性。

HTML DOM 中的 HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。

    <div id="container">
        <div class="bar"></div>
        <div class="foo">
            <div class="inner"></div>
        </div>
    </div>
    <script>
        var main = document.getElementById("container").children;
        console.log(main); //HTMLCollection
        console.log(main.item(0)); //输出:<div class="bar"></div>
        console.log(main.item(1)); // 输出:foo元素
    </script>

属性

HTMLCollection.length()返回集合当中子元素的数目。

方法

HTMLCollection.item() 根据给定的索引（从0开始），返回具体的节点。如果索引超出了范围，则返回 null。

HTMLCollection.namedId() 该函数用来返回一个节点，首先通过id属性去匹配，然后如果没有匹配到则使用name属性匹配，如果还没有匹配到则返回null. 当出现重复的id或者name属性时，只返回匹配到的第一个值。

<form id="form1">
        <input type="text" id="userName" />
        <input type="password" id="password" name="userPwd" />
    </form>
    <script>
        var form1 = document.getElementById("form1").children;
        console.log(form1.item(0));
        console.log(form1.item(1));
        console.log(form1.namedItem("userPwd"));
    </script>

结果如下：

NodeList对象

NodeList 对象是节点的集合。

NodeList 不是一个数组，是一个类似数组的对象 (Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 forEach() 来迭代。你还可以使用 Array.from() 将其转换为数组。

NodeList对象也具有length属性，返回集合的长度，同样也有item函数，也是通过索引定位子元素的位置。但是NodeList对象没有namedItem方法。在这里就不代码展示了。

区别与练习

同时，当我们对DOM树新增或者是删除一个节点的时候，都会立即的放映在HTMLCollection对象与NodeList对象中。

    <form id="form1">
        用户名<input type="text" id="userName" /> <br />
        用户密码<input type="password" id="password" name="userPwd" />
    </form>
    <script>
        //获取HTMLCollection集合
        var form1Children = document.getElementById("form1").children;
        console.log(form1Children);
        //获取NodeList对象
        var formNodes = document.getElementById("form1").childNodes;
        console.log(formNodes);
    </script>

HTMLCollection对象与NodeList对象都是类似数组的结构，如果想调用数组中的方法，需要通过call()函数或者是apply()函数，转换为真正的数组后，可以使用数组中的函数。

相同点：

第一：都是类似数组的结构，有length属性，可以通过call()函数或者是apply()函数转换成数组，使用数组中的函数。

第二：都用item函数，通过索引值获取相应的元素。

第三：都是实时的，当在DOM树上添加元素或者是删除元素，都会立即反应到HTMLCollection对象和NodeList对象上。

不同点：

第一：HTMLCollection对象中，有namedItem()函数，而NodeList对象中没有.

第二：NodeList对象中存储的是元素节点的集合，包括元素，以及节点，例如text文本节点，而HTMLCollection对象中只包含了元素的集合。