JavaScript getElementsByClassName (Magyar)

Összefoglaló: ebben az oktatóanyagban megtudhatja, hogyan használhatja a getElementsByClassName() metódust az elemek osztálynév szerinti kiválasztására.

Bevezetés a getElementsByClassName () módszerbe

Minden HTML elemhez tartozik egy opcionális class attribútum, mint ez:

Code language: HTML, XML (xml)

Az class attribútum értéke az elem osztályainak szóközzel elválasztott listája. Az osztályok megkülönböztetik a kis- és nagybetűket.

Az osztályok lehetővé teszik a CSS használatát az elemek egyezéséhez. Például:

Code language: CSS (css)

A JavaScript-ben a getElementsByClassName() metódust használja az elemek osztályuk alapján történő kiválasztására.

A getElementsByClassName() módszer a document objektumon és bármely HTML elemen érhető el.

A A getElementsByClassName() módszer egyetlen argumentumot fogad el, amely egy vagy több osztálynevet tartalmazó karakterlánc:

Code language: JavaScript (javascript)

Ebben szintaxis, a classNames paraméter egy karaktersorozat, amely megfelel egy osztálynévnek. Például:

Code language: JavaScript (javascript)

Ha az elemeket több osztály szerint illeszti össze, akkor a szóközöket kell használnia az ilyen elválasztáshoz:

Code language: JavaScript (javascript)

Ne feledje, hogy nem használhat osztályválasztókat, például .btn vagy .btn-primary a getElementsByClassName() módszer.

A getElementsByClassName() módszer élő HTMLCollection elemeket ad vissza, amelyek egy tömbszerű objektum.

Ha a getElementsByClassName() metódust meghívja a document objektumon, a metódus keres a teljes dokumentumban megadott osztálynévvel rendelkező elemek esetén.

Ha azonban a getElementsByClassName() metódust meghívja egy adott elemre, akkor csak a megfelelő elemeket adja vissza a ennek az elemnek az alfája.

JavaScript getElementsByClassName () példák

Vegyünk néhány példát a getElementsByClassName() módszer használatára.

Tegyük fel, hogy a következő HTML-t használod:

1) A JavaScript getElementsByClassName () meghívása egy elempéldára

Az alábbi példa bemutatja, hogyan lehet a getElementsByClassName() metódust használni a <li> elemek, amelyek a <ul> elem leszármazottai:

Kimenet:

Code language: JavaScript (javascript)

Hogyan működik:

• Először válassza ki a <ul> elemet az osztálynévvel menu a getElementById() módszerrel.
• Ezután válassza ki a <li> elemeket, amelyek a <ul> elem, a getElementsByClassName() módszerrel.
• Végül hozzon létre egy tömböt a elemeket az map() módszer kölcsönzésével az Array objektum

2) A JavaScript getElementsByClassName () hívása a dokumentum példáján

Az elem keresése a class heading-secondary, a következő kódot használja:

Kimenet:

Code language: JavaScript (javascript)

Ez a példa meghívja a getElementsByClassName() metódust az document objektumon, ezért a heading-secondary a teljes dokumentumban.

Ebben az oktatóanyagban megtanulta, hogyan kell a getElementsByClassName() módszerrel elemeket kiválasztani egy vagy több osztálynévvel.