肉渣教程

DOM 集合

上一节 下一节

集合对象

若使用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>

运行一下


DOM 集合

上一节 下一节