HTML DOM Element getElementsByClassName() Method

Definition at Usage

getElementsByClassName() Ang method ay binabalik ang koleksyon ng mga sub-elemento na may binigay na klase, bilang NodeList object.

Bilang karagdagan:

classList Atribute

className Atribute

querySelector() Method

querySelectorAll() Method

getElementsByTagName() Method

HTML DOM Style Object

Tuturuan:

CSS Grammar

CSS Selector

CSS Selector Reference Manual

NodeList

NodeList Ito ay katulad ng array na koleksyon ng mga node (listahan).

Maaari mong ma-access ang mga node sa listahan sa pamamagitan ng index (index). Ang index ay nagsisimula sa 0.

Atribute ng lengthBumalik sa bilang ng mga node sa listahan.

Egemplo

Halimbawa 1

Ayusin ang teksto ng unang item ng list na may class="child":

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

親自試試

Halimbawa 2

Ang bilang ng elementong class="child" sa "myDIV":

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
let number = nodes.length;

親自試試

Halimbawa 3

Iyong ayusin ang sukat ng pangalawang elemento ng class="child":

const element = document.getElementById("myDIV");
element.getElementsByClassName("child")[1].style.fontSize = 24px";

親自試試

例子 4

在 class="example" 的第二個元素中使用 "child" 和 "color" 類更改第一個元素的大小：

const elements = document.getElementsByClassName("example")[1];
elements.getElementsByClassName("child color")[0].style.fontSize = "24px";

親自試試

例子 5

更改 class="child" 的 “myDIV” 中所有元素的颜色：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByClassName("child");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.color = "red";
}

親自試試

語法

element.getElementsByClassName(classname)

參數

參數 描述
classname

必需。子元素的類名。

用空格分隔多個名稱（比如 "child color"）。

返回值

類型 描述
NodeList

包含給定類名的元素的子元素。

元素按照它們在源代碼中出現的順序進行排序。

瀏覽器支持

element.getElementsByClassName() 是 DOM Level 1 (1998) 特性。

所有瀏覽器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持