HTML DOM getElementsByClassName() 方法

2018-09-29 17:39 更新

HTML DOM getElementsByClassName() 方法

Document 對(duì)象參考手冊(cè) Document 對(duì)象

實(shí)例

獲取所有指定類(lèi)名的元素:

var x =document.getElementsByClassName("example");

嘗試一下 ?

定義和使用

getElementsByClassName() 方法返回文檔中所有指定類(lèi)名的元素集合,作為 NodeList 對(duì)象。

NodeList 對(duì)象代表一個(gè)有順序的節(jié)點(diǎn)列表。NodeList 對(duì)象 我們可通過(guò)節(jié)點(diǎn)列表中的節(jié)點(diǎn)索引號(hào)來(lái)訪(fǎng)問(wèn)列表中的節(jié)點(diǎn)(索引號(hào)由0開(kāi)始)。

提示: 你可以使用 NodeList 對(duì)象的length 屬性來(lái)確定指定類(lèi)名的元素個(gè)數(shù),并循環(huán)各個(gè)元素來(lái)獲取你需要的那個(gè)元素。


瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

方法          
getElementsByClassName() 4.0 9.0 3.0 3.1 9.5

語(yǔ)法

document.getElementsByClassName(classname)

參數(shù)

參數(shù)類(lèi)型 Description
classnameString必須。你需要獲取的元素類(lèi)名。

多個(gè)類(lèi)名使用空格分隔,如 "test demo"。

技術(shù)描述

DOM 版本:Core Level 1 Document Object
返回值:NodeList 對(duì)象,表示指定類(lèi)名的元素集合。元素在集合中的順序以其在代碼中的出現(xiàn)次序排序。

實(shí)例

更多實(shí)例

實(shí)例

獲取包含 "example" 和 "color" 類(lèi)名的所有元素:

var x =document.getElementsByClassName("example color");

嘗試一下 ?

實(shí)例

查看文檔中有多少個(gè)樣式 class="example" 的元素 (使用 NodeList 對(duì)的 length 屬性):

var x =document.getElementsByClassName("example").length;

嘗試一下 ?

實(shí)例

修改所有樣式 class="example" 元素的背景顏色:

var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

嘗試一下 ?

相關(guān)頁(yè)面

CSS 參考手冊(cè): CSS 選擇器

CSS 參考手冊(cè): CSS .class 選擇器

HTML DOM 參考手冊(cè): element.getElementsByClassName()

HTML DOM 參考手冊(cè): className 屬性

HTML DOM 參考手冊(cè): HTML DOM classList 屬性

HTML DOM 參考手冊(cè): HTML DOM Style 對(duì)象


Document 對(duì)象參考手冊(cè) Document 對(duì)象


以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)