集合对象

若使用getElementsByTagName()方法返回的就是HTML集合对象（HTMLCollection）。

以前使用getElementsById()方法返回的是代表单个HTML元素的DOM对象；那是因为每个HTML元素的id取值在整篇HTML文档中是独一无二的。而使用getElementsByTagName()选择对象，即通过标签名选择对象，同标签名的元素很可能不只1个；因此返回的结果就不会不止1个，因此返回的一堆对象，就是所谓的HTML集合对象。

集合对象 - 示例

如下所示，去专否沙盒试试就会了，很简单。

<p>地振高冈，一派西山千古秀</p>
<p>门朝大海，三合河水万年流</p>
<p id="demo"></p>

<script>
// 选择所有的p元素
var myCollection = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML =
"<br>选中的HTML集合对象的长度是：<br><b>" +
myCollection.length + 
"</b><br><br>" +
"选中的HTML集合对象的第2个对象的元素内容是：<br><b>" +
myCollection[1].innerHTML + 
"</b>";
</script>

运行一下

如下所示，将全部的p元素的背景色都设置成西红柿色（颜色名为Tomato）

<p>地振高冈，一派西山千古秀</p>
<p>门朝大海，三合河水万年流</p>
<p>反清复明</p>

<script>
// 选择所有的p元素
var myCollection = document.getElementsByTagName("p");

for (var i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = 'Tomato';
}
</script>

运行一下