Aké sú rôzne spôsoby výberu prvkov DOM v JavaScripte

Tento tutoriál ukáže rôzne metódy výberu prvkov DOM v JavaScripte.

Aké sú rôzne spôsoby výberu prvkov DOM v JavaScripte?

Na výber prvkov DOM v JavaScripte použite nasledujúce metódy:

• getElementById() metóda
• getElementsByClassName() metóda
• getElementsByTagName() metóda
• metóda querySelector().
• metóda querySelectorAll().

Metóda 1: Vyberte prvky DOM pomocou metódy „getElementById()“.

Na výber prvkov DOM použite „ getElementById() “ metóda založená na priradenom id prvku. Táto metóda vyberie jeden prvok podľa jeho jedinečného „ id “. Poskytuje odkaz na prvok so zadaným ID a vracia „ nulový “, ak sa nenájde žiadny zodpovedajúci prvok.

Syntax

Pre metódu getElementById() použite nižšie uvedenú syntax:

Tu je „ idName ” je názov atribútu id priradeného k prvku.

Príklad

V súbore HTML vytvorte dva nadpisy v prvku div pomocou „ h4 ” tag. Priraďte ID prvku div a prvkom nadpisov „h4“ s názvom „ div “ a „ nadpis “, resp. Pridajte atribút štýlu do prvku div, aby ste ho zarovnali na stred. Tiež priraďte triedu “ oddiele ” na druhý nadpis, ktorý mení svoju farbu:

Teraz dostaneme „ div ” element využívajúci svoje priradené id pomocou „ getElementById() “ metóda:

Vytlačiť prvok proti ID „ div “ na konzole:

Je možné vidieť, že požadovaný prvok HTML bol úspešne načítaný:

Metóda 2: Vyberte prvky DOM pomocou metódy „getElementsByClassName()“.

Element DOM môžete vybrať aj pomocou priradenej triedy pomocou „ getElementsByClassName() “. Vyberie zoznam prvkov podľa názvu triedy. Výstupom je živý objekt HTMLCollection, objekt podobný poľu, ktorý obsahuje všetky prvky so zadaným názvom triedy.

Syntax

Pre metódu „getElementsByClassName()“ sa používa nasledujúca syntax:

Príklad

Tu dostaneme prvok, ktorý obsahuje triedu „ oddiele “ a vytlačte na konzole:

Ako môžete vidieť na výstupe, vrátilo sa pole dĺžky 1, ktoré obsahuje prvok „ h4 'ktorý patrí do triedy' oddiele “:

Metóda 3: Vyberte prvky DOM pomocou metódy „getElementsByTagName()“.

V prípade, že k prvku nie je priradené žiadne ID alebo trieda, použite „ getElementsByTagName() ” na získanie prvku podľa názvu značky. Tiež vráti živý objekt HTMLCollection, čo je objekt podobný poľu, ktorý obsahuje všetky prvky, ktoré majú zadaný názov značky.

Syntax

Pri výbere prvkov na základe názvu značky postupujte podľa uvedenej syntaxe:

Príklad

Vyvolajte metódu „getElementsByTagName()“ odovzdaním názvu značky „ h4 “. Potom na konzole vytlačte zoznam prvkov, ktoré zodpovedajú zadanému názvu značky:

Výkon

Metóda 4: Vyberte prvky DOM pomocou metódy „querySelector()“.

Použi ' querySelector() ” na získanie prvku DOM. Vyberie jeden prvok, ktorý zodpovedá zadanému selektoru CSS. Vráti prvý zodpovedajúci prvok nájdený v dokumente. Ak sa nezhoduje žiadny prvok, zobrazí sa „ nulový “.

Syntax

Nižšie uvedená syntax sa používa pre metódu „querySelector()“:

V tomto prípade je atribútom selektor CSS, napríklad id alebo trieda ako „ #mojeId ““ .moja trieda “.

Príklad

Zavolajte metódu „querySelector()“ a odovzdajte id „ #nadpis ” na získanie prvkov, ktoré obsahujú rovnaké ID:

Poskytuje prvý zhodný prvok ako výstup:

Metóda 5: Vyberte prvky DOM pomocou metódy „querySelectorAll()“.

Ak chcete vybrať všetky prvky, ktoré obsahujú špecifikovaný atribút (id alebo class), použite „ querySelectorAll() “. Vyberie zoznam prvkov, ktoré zodpovedajú konkrétnemu definovanému selektoru CSS. Poskytuje objekt NodeList, ktorý obsahuje všetky prvky v dokumente, ktoré zodpovedali konkrétnemu selektoru CSS.

Syntax

Na získanie zoznamu prvkov použite nasledujúcu syntax:

Príklad

Ak chcete získať zoznam priradených prvkov, ktoré obsahujú id “ nadpis “ s „ querySelectorAll() ” metóda a tlač na prvky na konzole:

Výkon

To je všetko o výbere prvkov DOM v JavaScripte.

Záver

Na výber prvkov DOM v JavaScripte použite „ getElementById() “, “ getElementsByClassName() “, “ getElementsByTagName() “, “ querySelector() ', alebo ' querySelectorAll() “. Tieto metódy poskytujú rôzne spôsoby výberu prvkov z DOM na základe ich jedinečných identifikátorov, názvov tried, názvov značiek alebo selektorov CSS. Tento tutoriál demonštroval rôzne metódy výberu prvkov DOM v JavaScripte.