¿Cuáles son las diferentes formas de seleccionar elementos DOM en JavaScript?

Mientras trabajan con JavaScript, los desarrolladores pueden necesitar seleccionar elementos DOM para diferentes fines. Por ejemplo, modificar el contenido o el estilo de la página web, responder a eventos de usuario, acceder a datos en páginas web, etc. En resumen, seleccionar y manipular elementos DOM con JavaScript es esencial para crear páginas web dinámicas e interactivas.

Este tutorial demostrará los diferentes métodos para seleccionar elementos DOM en JavaScript.

¿Cuáles son las diferentes formas de seleccionar elementos DOM en JavaScript??

Use los siguientes métodos para seleccionar elementos DOM en JavaScript:

• método getElementById ()
• método getElementsByClassName ()
• método getElementsByTagName ()
• método QuerySelector ()
• método QuerySelectorAll ()

Método 1: seleccione elementos DOM utilizando el método "getElementById ()"

Para seleccionar elementos DOM, use el "getElementById ()"Método basado en la identificación asignada del elemento. Este método selecciona un solo elemento por su único "identificación" atributo. Da una referencia al elemento con la identificación especificada y devuelve "nulo"Si no se encuentra ningún elemento correspondiente.

Sintaxis

Use la sintaxis dada a continuación para el método GetElementById ():

documento.getElementById ("idname")

Aquí el "nombre"Es el nombre de un atributo de identificación asignado a un elemento.

Ejemplo

En un archivo HTML, cree dos encabezados en un elemento DIV usando el "H4" etiqueta. Asigne IDS al elemento div y encabezados elementos "H4" llamados "div" y "título", Respectivamente. Agregue el atributo de estilo al elemento div para alinearlo en el centro. Además, asigne una clase "sección"Al segundo encabezado que cambia su color:

Acceda a elementos DOM utilizando diferentes métodos

Seleccione los elementos DOM en JavaScript usando el método 'getElementById ()'

Ahora, obtendremos el "div"Elemento usa su ID asignada con la ayuda del"getElementById ()" método:

var getByid = documento.getElementByid ("div");

Imprima el elemento contra la identificación "div"En la consola:

consola.log (getByid);

Se puede ver que el elemento HTML requerido se ha recuperado con éxito:

Método 2: seleccione elementos DOM utilizando el método "getElementsByClassName ()"

También puede seleccionar el elemento DOM utilizando su clase asignada con la ayuda de "getElementsByClassName ()" método. Selecciona una lista de elementos por nombre de su clase. Emite un objeto HTMLCollection en vivo, un objeto similar a una matriz que contiene todos los elementos con el nombre de clase especificado.

Sintaxis

La siguiente sintaxis se utiliza para el método "getElementsByClassName ()":

documento.getElementsByClassName ("ClassName")

Ejemplo

Aquí, obtendremos el elemento que contiene la clase "sección"E imprima en la consola:

var getByClass = documento.GetElementsByClassName ("Sección");
consola.log (GetByClass);

Como puede ver en la salida, se devuelve una matriz de longitud 1 que contiene un elemento "H4"Quien pertenece a la clase"sección":

Método 3: Seleccione elementos DOM utilizando el método "getElementsByTagName ()"

En caso de que no haya una identificación o clase asignada a un elemento, use el "getElementsBytagName ()Método para obtener el elemento por su nombre de etiqueta. También devuelve un objeto HTMLCollection en vivo, que es un objeto similar a una matriz que contiene todos los elementos que tienen el nombre de la etiqueta especificado.

Sintaxis

Siga la sintaxis dada para seleccionar elementos basados ​​en el nombre de la etiqueta:

getElementsBytagName (TagName)

Ejemplo

Invoca el método "getElementsBytagName ()" pasando el nombre de la etiqueta "H4". Luego, imprima la lista de elementos que coinciden con el nombre de la etiqueta especificado en la consola:

var getBytag = documento.getElementsBytagName ("H4");
consola.log (getBytag);

Producción

Método 4: Seleccione Elementos DOM utilizando el método "QuerySelector ()"

Utilizar el "QuerySelector ()Método para obtener el elemento DOM. Selecciona un solo elemento que coincide con un selector CSS especificado. Devuelve el primer elemento coincidente que se encuentra en el documento. Si no se combina ningún elemento, da "nulo".

Sintaxis

La sintaxis mencionada a continuación se utiliza para el método "QuerySelector ()":

documento.QuerySelector (atributo)

Aquí, el atributo es un selector CSS, como una identificación o clase como "#mi identificación"".mi clase".

Ejemplo

Llame al método "QuerySelector ()" y pase la ID "#título"Para obtener los elementos que contienen la misma identificación:

var getByQuery = documento.QuerySelector ("#encabezado");
consola.log (GetByQuery);

Da el primer elemento coincidente como salida:

Método 5: Seleccione los elementos DOM utilizando el método "QuerySelectorAll ()"

Si desea seleccionar todos los elementos que contienen el atributo especificado (ID o clase), use el "QuerySelectorAll ()" método. Selecciona una lista de elementos que coinciden con un selector CSS definido en particular. Da un objeto nodelista que contiene todos los elementos en el documento que coincidía con el selector de CSS en particular.

Sintaxis

Use la siguiente sintaxis para obtener la lista de elementos:

documento.QuerySelectorAll (atributo)

Ejemplo

Para obtener la lista del elemento coincidente que contiene la identificación "título" con el "QuerySelectorAll ()"Método e imprima en elementos en la consola:

var getByQueryall = documento.QuerySelectorAll ("#encabezado");
consola.log (GetByQueryall);

Producción

Se trata de seleccionar elementos DOM en JavaScript.

Conclusión

Para seleccionar los elementos DOM en JavaScript, use el "getElementById ()","getElementsByClassName ()","getElementsBytagName ()","QuerySelector ()", o el "QuerySelectorAll ()" método. Estos métodos proporcionan diferentes formas de seleccionar elementos del DOM en función de sus identificadores únicos, nombres de clases, nombres de etiquetas o selectores CSS. Este tutorial demostró los diferentes métodos para seleccionar elementos DOM en JavaScript.