Aquest tutorial mostrarà els diferents mètodes per seleccionar elements DOM en JavaScript.
Quines són les diferents maneres de seleccionar els elements DOM a JavaScript?
Utilitzeu els mètodes següents per seleccionar elements DOM a JavaScript:
- mètode getElementById().
- mètode getElementsByClassName().
- mètode getElementsByTagName().
- mètode querySelector().
- mètode querySelectorAll().
Mètode 1: seleccioneu els elements DOM mitjançant el mètode 'getElementById()'.
Per seleccionar elements DOM, utilitzeu ' getElementById() ” mètode basat en l'identificador assignat a l'element. Aquest mètode selecciona un sol element pel seu únic ' id ” atribut. Ofereix una referència a l'element amb l'identificador especificat i retorna ' nul ” si no es troba cap element coincident.
Sintaxi
Utilitzeu la sintaxi que s'indica a continuació per al mètode getElementById():
document. getElementById ( 'idName' )
Aquí, el ' idName ” és el nom d'un atribut id assignat a un element.
Exemple
En un fitxer HTML, creeu dos encapçalaments en un element div utilitzant el ' h4 ' etiqueta. Assigneu identificadors als elements div i als encapçalaments 'h4' anomenats ' div ' i ' encapçalament ”, respectivament. Afegiu l'atribut style a l'element div per alinear-lo al centre. A més, assigneu una classe ' secció ” al segon encapçalament que canvia de color:
< div id = 'div' estil = 'text-align:center;' >< h4 id = 'encapçalament' > Accediu als elements DOM mitjançant diferents mètodes < / h4 >
< h4 classe = 'secció' id = 'encapçalament' > Seleccioneu els elements DOM a JavaScript mitjançant el mètode 'getElementById()'
< / h4 >
< / div >
Ara, obtindrem el ' div ” element utilitzant el seu identificador assignat amb l'ajuda del “ getElementById() ” mètode:
era getById = document. getElementById ( 'div' ) ;Imprimeix l'element contra l'identificador ' div ” a la consola:
consola. registre ( getById ) ;Es pot veure que l'element HTML requerit s'ha recuperat correctament:
Mètode 2: seleccioneu els elements DOM mitjançant el mètode 'getElementsByClassName()'
També podeu seleccionar l'element DOM utilitzant la seva classe assignada amb l'ajuda de ' getElementsByClassName() ” mètode. Selecciona una llista d'elements pel seu nom de classe. Emet un objecte HTMLCollection en directe, un objecte semblant a una matriu que conté tots els elements amb el nom de classe especificat.
Sintaxi
S'utilitza la sintaxi següent per al mètode 'getElementsByClassName()':
document. getElementsByClassName ( 'className' )Exemple
Aquí, obtindrem l'element que conté la classe ' secció ” i imprimiu a la consola:
era getByClass = document. getElementsByClassName ( 'secció' ) ;consola. registre ( getByClass ) ;
Com podeu veure a la sortida, va retornar una matriu de longitud 1 que conté un element ' h4 'qui pertany a la classe' secció ”:
Mètode 3: seleccioneu els elements DOM mitjançant el mètode 'getElementsByTagName()'
En cas que no hi hagi cap identificador o classe assignat a un element, utilitzeu el ' getElementsByTagName() ” mètode per obtenir l'element pel seu nom d'etiqueta. També retorna un objecte HTMLCollection en directe, que és un objecte semblant a una matriu que conté tots els elements que tenen el nom d'etiqueta especificat.
Sintaxi
Seguiu la sintaxi donada per seleccionar elements basats en el nom de l'etiqueta:
getElementsByTagName ( tagName )Exemple
Invoqueu el mètode 'getElementsByTagName()' passant el nom de l'etiqueta ' h4 ”. A continuació, imprimiu la llista d'elements que coincideix amb el nom de l'etiqueta especificat a la consola:
era getByTag = document. getElementsByTagName ( 'h4' ) ;consola. registre ( getByTag ) ;
Sortida
Mètode 4: seleccioneu els elements DOM mitjançant el mètode 'querySelector()'.
Utilitzar el ' querySelector() ” per obtenir l'element DOM. Selecciona un únic element que coincideixi amb un selector CSS especificat. Retorna el primer element coincident trobat al document. Si no coincideix cap element, dóna ' nul ”.
Sintaxi
La sintaxi esmentada a continuació s'utilitza per al mètode 'querySelector()':
document. querySelector ( atribut )Aquí, l'atribut és un selector CSS, com ara un identificador o una classe com ' #myId ” “ .la meva classe “.
Exemple
Truqueu al mètode 'querySelector()' i passeu l'identificador ' #encapçalament ” per obtenir els elements que contenen el mateix identificador:
era getByquery = document. querySelector ( '#encapçalament' ) ;consola. registre ( getByquery ) ;
Ofereix el primer element coincident com a sortida:
Mètode 5: seleccioneu els elements DOM mitjançant el mètode 'querySelectorAll()'.
Si voleu seleccionar tots els elements que contenen l'atribut especificat (id o classe), utilitzeu el ' querySelectorAll() ” mètode. Selecciona una llista d'elements que coincideixen amb un selector CSS determinat. Ofereix un objecte NodeList que conté tots els elements del document que coincideixen amb el selector CSS particular.
Sintaxi
Utilitzeu la sintaxi següent per obtenir la llista d'elements:
document. querySelectorAll ( atribut )Exemple
Per obtenir la llista de l'element coincident que conté l'identificador ' encapçalament ' amb el ' querySelectorAll() ” mètode i imprimir en elements de la consola:
era getByqueryAll = document. querySelectorAll ( '#encapçalament' ) ;consola. registre ( getByqueryAll ) ;
Sortida
Això es tracta de seleccionar elements DOM a JavaScript.
Conclusió
Per seleccionar els elements DOM a JavaScript, utilitzeu ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ”, o el “ querySelectorAll() ” mètode. Aquests mètodes ofereixen diferents maneres de seleccionar elements del DOM en funció dels seus identificadors únics, noms de classe, noms d'etiquetes o selectors CSS. Aquest tutorial va demostrar els diferents mètodes per seleccionar elements DOM en JavaScript.