HTMLCollection 对象和NodeList 对象

获取html元素有三种方法，其中通过类名和标签获取的结果为一个HTMLCollection对象。

HTMLCollection对象可以理解为一个包含html元素的数组（但不是数组），可以通过索引[ ]访问，索引从0开始。

HTMLCollection对象具有一个length属性，即包含的html元素的个数。

①通过id：var x=document.getElementById("intro"); x值为[object HTMLParagraphElement]

②通过class类名：var x=document.getElementsByClassName("intro");x值为[object HTMLCollection]

③通过标签名：var x=document.getElementsByTagName("p");x值为[object HTMLCollection]

<h3>JavaScript HTML DOM</h3>
<p>Hello world!</p>
<p class='test'>Hello world again!</p>
<p id='test'></p>
<p>点击按钮修改 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction() {
        var myCollection1 = document.getElementsByClassName('test');
        document.getElementById('test').innerHTML=myCollection1;
        var myCollection2 = document.getElementsByTagName("p");
        for (var i = 0; i < myCollection2.length; i++) {
            myCollection2[i].style.color = "red";}
}

对于HTMLCollection对象来说，通过for (var i in myCollection)，遍历的结果除了索引下标，还会固定地有length、item和namedItem三个元素。

 

 

NodeList对象是从文档中获取的节点列表集合，浏览器的querySelectorAll()返回 NodeList 对象。

<h3>JavaScript HTML DOM</h3>
<p>Hello world!</p>
<p>Hello world again!</p>
<p id='test1'></p>
<p id='test2'></p>
<script>
    var myNodeList = document.querySelectorAll('p');
    document.getElementById('test1').innerHTML=myNodeList;
    document.getElementById('test2').innerHTML=myNodeList.length+'个段落'
</script>

对于NodeList对象来说，通过for (var i in myNodeList)，遍历的结果除了索引下标，还会固定地有length、item、entries、forEach、keys和values六个元素。

 

HTMLCollection是HTML元素的集合，而NodeList 是文档节点的集合。

相同点：都可以通过索引获取元素；都有length属性；非数组，无法使用数组的方法valueOf()、pop()、push()或join() 

不同点：获取方法不同，前者是通过类名和标签获取的html元素，后者是通过querySelectorAll()获取的文档节点

　　　　前者还可通过name和id获取元素，而后者只能通过索引来获取

　　　　后者包含属性节点和文本节点