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>Hello world again!</p>
<p>点击按钮修改 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
    function myFunction() {
        var myCollection = document.getElementsByTagName("p");
        for (var i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";}
}
</script>