Acest tutorial va demonstra diferitele metode de selectare a elementelor DOM în JavaScript.
Care sunt diferitele moduri de a selecta elementele DOM în JavaScript?
Utilizați următoarele metode pentru selectarea elementelor DOM în JavaScript:
- metoda getElementById().
- metoda getElementsByClassName().
- metoda getElementsByTagName().
- metoda querySelector().
- metoda querySelectorAll().
Metoda 1: Selectați elementele DOM folosind metoda „getElementById()”.
Pentru selectarea elementelor DOM utilizați „ getElementById() ” metoda bazată pe id-ul alocat elementului. Această metodă selectează un singur element prin „ id ” atribut. Oferă o referință la elementul cu id-ul specificat și returnează „ nul ” dacă nu se găsește niciun element care se potrivește.
Sintaxă
Utilizați sintaxa de mai jos pentru metoda getElementById():
document. getElementById ( „idName” )
Aici ' idName ” este numele unui atribut id atribuit unui element.
Exemplu
Într-un fișier HTML, creați două titluri într-un element div folosind „ h4 ' etichetă. Atribuiți ID-uri elementului div și elementelor titlurilor „h4” numite „ div ' și ' rubrica ”, respectiv. Adăugați atributul de stil la elementul div pentru a-l alinia în centru. De asemenea, atribuiți o clasă „ secțiune ” la al doilea titlu care își schimbă culoarea:
< div id = 'div' stil = 'text-align:center;' >< h4 id = 'rudire' > Accesați elementele DOM folosind diferite metode < / h4 >
< h4 clasă = 'secțiune' id = 'rudire' > Selectați elementele DOM în JavaScript folosind metoda „getElementById()”.
< / h4 >
< / div >
Acum, vom obține „ div ” element folosind id-ul atribuit cu ajutorul „ getElementById() ” metoda:
a fost getById = document. getElementById ( 'div' ) ;Imprimați elementul împotriva ID-ului „ div ” pe consolă:
consolă. Buturuga ( getById ) ;Se poate observa că elementul HTML necesar a fost preluat cu succes:
Metoda 2: Selectați elementele DOM folosind metoda „getElementsByClassName()”
De asemenea, puteți selecta elementul DOM folosind clasa atribuită cu ajutorul „ getElementsByClassName() ” metoda. Selectează o listă de elemente după numele clasei lor. Produce un obiect HTMLCollection live, un obiect asemănător matricei care conține toate elementele cu numele de clasă specificat.
Sintaxă
Următoarea sintaxă este utilizată pentru metoda „getElementsByClassName()”:
document. getElementsByClassName ( 'numele clasei' )Exemplu
Aici, vom obține elementul care conține clasa „ secțiune ” și imprimați pe consolă:
a fost getByClass = document. getElementsByClassName ( 'secțiune' ) ;consolă. Buturuga ( getByClass ) ;
După cum puteți vedea în rezultat, a returnat o matrice de lungime 1 care conține un element „ h4 „care aparține clasei” secțiune ”:
Metoda 3: Selectați elementele DOM folosind metoda „getElementsByTagName()”
În cazul în care nu există niciun id sau o clasă atribuită unui element, utilizați „ getElementsByTagName() ” pentru a obține elementul după numele etichetei. De asemenea, returnează un obiect HTMLCollection live, care este un obiect asemănător matricei care conține toate elementele care au numele de etichetă specificat.
Sintaxă
Urmați sintaxa dată pentru selectarea elementelor pe baza numelui etichetei:
getElementsByTagName ( nume eticheta )Exemplu
Invocați metoda „getElementsByTagName()” prin transmiterea numelui etichetei „ h4 ”. Apoi, tipăriți lista de elemente care se potrivește cu numele etichetei specificate pe consolă:
a fost getByTag = document. getElementsByTagName ( 'h4' ) ;consolă. Buturuga ( getByTag ) ;
Ieșire
Metoda 4: Selectați elementele DOM folosind metoda „querySelector()”.
Folosește ' querySelector() ” pentru a obține elementul DOM. Selectează un singur element care se potrivește cu un selector CSS specificat. Returnează primul element care se potrivește găsit în document. Dacă nu se potrivește niciun element, dă „ nul ”.
Sintaxă
Sintaxa menționată mai jos este utilizată pentru metoda „querySelector()”:
document. querySelector ( atribut )Aici, atributul este un selector CSS, cum ar fi un id sau o clasă ca „ #ID-ul meu ” “ .clasa mea „.
Exemplu
Apelați metoda „querySelector()” și transmiteți id-ul „ #titlu ” pentru a obține elementele care conțin același id:
a fost getByquery = document. querySelector ( '#titlu' ) ;consolă. Buturuga ( getByquery ) ;
Oferă primul element potrivit ca rezultat:
Metoda 5: Selectați elementele DOM folosind metoda „querySelectorAll()”.
Dacă doriți să selectați toate elementele care conțin atributul specificat (id sau clasa), utilizați „ querySelectorAll() ” metoda. Selectează o listă de elemente care se potrivesc cu un anumit selector CSS definit. Oferă un obiect NodeList care conține toate elementele din document care se potrivesc cu un anumit selector CSS.
Sintaxă
Utilizați următoarea sintaxă pentru a obține lista de elemente:
document. querySelectorAll ( atribut )Exemplu
Pentru a obține lista cu elementul potrivit care conține id-ul „ rubrica ' cu ' querySelectorAll() ” metoda și imprimarea pe elemente de pe consolă:
a fost getByqueryAll = document. querySelectorAll ( '#titlu' ) ;consolă. Buturuga ( getByqueryAll ) ;
Ieșire
Acesta este totul despre selectarea elementelor DOM în JavaScript.
Concluzie
Pentru a selecta elementele DOM în JavaScript, utilizați „ getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', sau ' querySelectorAll() ” metoda. Aceste metode oferă modalități diferite de selectare a elementelor din DOM pe baza identificatorilor unici, a numelor de clasă, a numelor de etichete sau a selectoarelor CSS. Acest tutorial a demonstrat diferitele metode de selectare a elementelor DOM în JavaScript.