HTMLCollection 對象

本章節(jié)介紹 DOM 集合的使用。

HTMLCollection 對象

getElementsByTagName() 方法返回 HTMLCollection 對象。

HTMLCollection 對象類似包含 HTML 元素的一個數(shù)組。

以下代碼獲取文檔所有的 <p> 元素：

實(shí)例

var x = document.getElementsByTagName("p");

集合中的元素可以通過索引(以 0 為起始位置)來訪問。

訪問第二個 <p> 元素可以是以下代碼:

y = x[1];

運(yùn)行代碼 ?

HTMLCollection 對象 length 屬性

HTMLCollection 對象的 length 屬性定義了集合中元素的數(shù)量。

實(shí)例

var myCollection = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = myCollection.length;

運(yùn)行代碼 ?

實(shí)例解析

獲取 <p> 元素的集合：

var myCollection = document.getElementsByTagName("p");

顯示集合元素個數(shù)：

document.getElementById("demo").innerHTML = myCollection.length;

集合 length 屬性常用于遍歷集合中的元素。

實(shí)例

修改所有 <p> 元素的背景顏色:

var myCollection = document.getElementsByTagName("p"); var i; for (i = 0; i < myCollection.length; i++) { myCollection[i].style.backgroundColor = "red"; }

運(yùn)行代碼 ?

注意

HTMLCollection 不是一個數(shù)組！

HTMLCollection 看起來可能是一個數(shù)組，但其實(shí)不是。

你可以像數(shù)組一樣，使用索引來獲取元素。

HTMLCollection 無法使用數(shù)組的方法： valueOf(), pop(), push(), 或 join() 。

上一篇：DOM 元素下一篇：NodeList 對象