Selección de Elementos

Nota

Para usar la API de JavaScript para interactuar con el DOM, se debe primero obtener una referencia al elemento HTML que desean interactuar. A esto se le conoce como la selección de elementos del DOM.


Tipos de Selección

Existen varias maneras de seleccionar elementos del DOM en JS, las cuales se usan dependiendo del contexto.

Selección por Elementos | Etiquetas

Podemos hacer una selección refriéndose a la etiqueta/elemento HTML directamente. 

// Seleccionar los elementos por Etiquetas
const h1 = document.getElementsByTagName("h1"); 
// Nos imprimirá un array con un objeto de los nodos de los elementos.
console.log(h1);

Es util si deseamos seleccionar todos los elementos del DOM con la etiqueta que especifiquemos.

Selección por Clase

Podemos hacer una selección refriéndose a la clase del elemento o los elementos HTML. 

// Selección por clase
const clase = document.getElementsByClassName("clase"); 
/* Nos imprimirá un array con un objeto de los nodos de los elementos
que coincidan con la clase. */
console.log(clase);

Es util si deseamos seleccionar todos los elementos del DOM con la clase que especifiquemos.

Selección por ID

Podemos hacer una selección refriéndose al ID del elemento HTML. A Diferencia de los demás al usar el ID nos garantizamos una selección única. 

// Seleccionar por ID
const btnEnviar = document.getElementById("send"); 
/* Nos imprimirá un array con un objeto de los nodos de los elementos
que coincidan con la clase. */
console.log(clase);

Es util si deseamos seleccionar un elemento especifico del DOM. Por ejemplo un Botón de acción.

Selección usando selectores CSS

Existe otra forma de seleccionar elementos de un manera más flexible y muy similar a como lo haríamos con CSS. Y para ello usamos el método querySelector o querySelectorAll si queremos seleccionar más de un elemento.
Esta forma nos permite dentro del método poner la selección como si lo hiciéramos en CSS, simplemente poniendo ".clase" o "#id" para las clases o id, y para los elementos usamos simplemente el nombre del elemento h1 sin los símbolos de mayor y menor que. 

// Seleccionar por querySelector
const h1 = document.querySelector("h1"); // Por TAG
const clase = document.querySelector(".clase"); // Por Clase          
const btnEnviar = document.querySelector("#send"); // Por ID
/* Nos imprimirá el elemento. */
console.log(h1); // <- Nos imprimirá el primer elemento que encuentre
console.log(clase); // <- Nos imprimirá el primer elemento que encuentre
console.log(btnEnviar);  
// Para seleccionar varios usamos querySelectorAll
const botones = document.querySelectorAll('button')

El uso de querySelector sobre la selección típica. Dependerá del uso. Generalmente usar querySelector es recomendable por su flexibilidad sin embargo, para la selección por ID o si requieres de más información es µas eficiente getElementById

Prueba tu conocimiento

¿Cuál de las siguientes expresiones devuelve el primer elemento con la etiqueta `<div>`?

✨ Correcto: ❌ Incorrecto:

¿Cuál de las siguientes expresiones devuelve todos los elementos con la clase `miclase`?

✨ Correcto: ❌ Incorrecto:

¿Cuál de las siguientes expresiones nos permite usar selectores CSS?

✨ Correcto: ❌ Incorrecto:
Atrás

3

Siguiente