HTMLCollection 對(duì)象

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

HTMLCollection 對(duì)象

getElementsByTagName() 方法返回 HTMLCollection 對(duì)象。

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

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

實(shí)例

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

集合中的元素可以通過(guò)索引(以 0 為起始位置)來(lái)訪問(wèn)。

訪問(wèn)第二個(gè) <p> 元素可以是以下代碼:

y = x[1];

運(yùn)行代碼 ?

HTMLCollection 對(duì)象 length 屬性

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

實(shí)例

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

運(yùn)行代碼 ?

實(shí)例解析

獲取 <p> 元素的集合：

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

顯示集合元素個(gè)數(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 不是一個(gè)數(shù)組！

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

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

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

上一篇：DOM 元素下一篇：NodeList 對(duì)象