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獲取元素，而后者只能通過索引來獲取

　　　　后者包含屬性節點和文本節點