HTML DOM Element method ya getElementsByClassName()

Mefano na matumizi

getElementsByClassName() Method inarudia kikolekani cha mabaki inayohusiana na jina la kiklasi, kwa orodha ya NodeList.

Tazama pia:

Majadiliano ya classList

Majadiliano ya className

Method ya querySelector()

Method ya querySelectorAll()

Method ya getElementsByTagName()

Kampuni ya HTML DOM Style

Makala:

Mfano wa KiCSS

Muhtasari wa Mwabika wa KiCSS

Muhtasari wa Mwabika wa HTML DOM NodeList

NodeList

NodeList Ni kikolekani cha mabaki kama orodha (orodha).

Inaweza kufikia mabaki katika orodha kwa kusababisha indeksi (kwenye namba). Indeksi inaanza kutoka 0.

Majadiliano ya lengthInarudi jumla ya mabaki katika orodha.

Mivuno

Mfano 1

Badilisha ujumbe wa kwanza kwa kutumia class="child":

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

Kumaliza kwa kusikia

Mfano 2

Jumla ya element za class="child" katika myDIV:

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

Kumaliza kwa kusikia

Mfano 3

Hifadhi size ya element ya pili ya class="child":

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

Kumaliza kwa kusikia

Mifano 4

Kumaliza ukurudisha ukurudisha kwa kusikia "child" na "color" kwa kina ya pili kwa "example":

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

Kumaliza kwa kusikia

Mifano 5

Gusa rangi ya vingi vyote kwa "myDIV" kwa "child":

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

Kumaliza kwa kusikia

Inasaidia kufikiria

element.getElementsByClassName(classname)

Kina cha ujumbe

Kina cha ujumbe Kuelewa
classname

Inayohitajika. Jina la kikaa cha mikoneno.

Tumia ukichukua kwa ukishujaa vingine kwa nafasi za ukichukua (kama "child color").

Kumwambaa mafanikio

Aina Kuelewa
NodeList

Mafanikio ya mikoneno inayotaka kina kwa jina la kikaa.

Mafanikio inafikiria kufikiria kama inaonyesha kwa hali ya kwanza ya mawili kwa kina ya msingi.

Mwamadifu wa vifaa vya kusoma

element.getElementsByClassName() Ni kina cha DOM Level 1 (1998) kina.

Wote wa vifaa vya kusoma hivi vitu vina kusaidia kufikiria:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Mwakilishi 9-11 Mwakilishi Mwakilishi Mwakilishi Mwakilishi