JavaScript getElementsByClassName (Română)

Rezumat: în acest tutorial, veți afla cum să utilizați metoda getElementsByClassName() pentru a selecta elementele după numele clasei.

Introducere în metoda getElementsByClassName ()

Fiecare element HTML are un atribut opțional de clasă ca acesta:

Code language: HTML, XML (xml)

Valoarea atributului de clasă este o listă separată de spații a claselor elementului. Clasele sunt sensibile la majuscule și minuscule.

Clasele vă permit să utilizați CSS pentru a potrivi elemente. De exemplu:

Code language: CSS (css)

În JavaScript, utilizați metoda getElementsByClassName() pentru a selecta elemente pe baza claselor lor.

Metoda getElementsByClassName() este disponibilă pe obiectul document și pe orice element HTML.

Metoda getElementsByClassName() acceptă un singur argument care este un șir care conține unul sau mai multe nume de clase:

Code language: JavaScript (javascript)

În acest sintaxă, parametrul classNames este un șir care reprezintă un nume de clasă care se potrivește. De exemplu:

Code language: JavaScript (javascript)

Dacă potriviți elemente după mai multe clase, trebuie să utilizați spațiul alb pentru a le separa astfel:

Code language: JavaScript (javascript)

Rețineți că nu puteți utiliza selectoare de clasă, de ex., .btn sau .btn-primary pentru getElementsByClassName().

Metoda getElementsByClassName() returnează un HTMLCollection de elemente live, care este un obiect asemănător matricei.

Dacă apelați metoda getElementsByClassName() pe obiectul document, metoda caută pentru elementele cu numele claselor specificate în întregul document.

Cu toate acestea, atunci când apelați metoda getElementsByClassName() pe un anumit element, acesta returnează numai elementele potrivite în subarborele acelui element.

Exemple JavaScript getElementsByClassName ()

Să luăm câteva exemple de utilizare a metodei getElementsByClassName().

Să presupunem că aveți următorul HTML:

1) Apelarea JavaScript getElementsByClassName () pe un exemplu de element

Următorul exemplu ilustrează modul de utilizare a metodei getElementsByClassName() pentru a selecta <li> elemente care sunt descendenții elementului <ul>:

Ieșire:

Code language: JavaScript (javascript)

Cum funcționează:

• Mai întâi, selectați elementul <ul> cu numele clasei menu folosind metoda getElementById().
• Apoi, selectați elementele <li>, care sunt descendenții <ul> element, utilizând metoda getElementsByClassName().
• În cele din urmă, creați o matrice de conținut text al <li> elemente împrumutând metoda map() a obiectului Array.

2) Apelarea JavaScript getElementsByClassName () în exemplul documentului

Pentru a căuta elementul cu class heading-secondary, utilizați următorul cod:

Ieșire:

Code language: JavaScript (javascript)

Acest exemplu apelează metoda getElementsByClassName() pe obiectul document, prin urmare, caută elementele cu clasa heading-secondary în întregul document.

În acest tutorial, ați învățat cum să utilizați metoda getElementsByClassName() pentru a selecta elemente cu unul sau mai multe nume de clase.