获取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获取元素，而后者只能通过索引来获取

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