Seleccionar elementos del DOM

Búsqueda de elementos HTML desde Javascript


Si nos encontramos en nuestro código Javascript y queremos hacer modificaciones en un elemento de la página HTML, lo primero que debemos hacer es buscar dicho elemento. Para ello, se suele intentar identificar el elemento a través de alguno de sus atributos más utilizados, generalmente el id o class.

Existen una serie de métodos que nos permitirán buscar en el DOM de la página y encontrar dichos elementos. El primer grupo son métodos más antiguos y tradicionales, el segundo grupo son métodos más modernos, pero requieren conocer selectores CSS.

Métodos tradicionales

Los métodos más clásicos y tradicionales para realizar búsquedas de elementos en el DOM son más sencillos, pero menos potentes. Si lo que buscas es un elemento específico, lo mejor sería utilizar el método getElementById(). En caso contrario, utilizaremos alguno de los otros tres métodos, que nos devuelven siempre un :

Métodos de búsqueda Descripción Si no lo encuentra...
.getElementById(id) Busca el elemento HTML por su id. Devuelve .
.getElementsByClassName(class) Busca elementos con la clase class. Devuelve [].
.getElementsByName(value) Busca elementos con el atributo name a value. Devuelve [].
.getElementsByTagName(tag) Busca etiquetas HTML tag. Devuelve [].

Estos son los 4 métodos tradicionales de Javascript para manipular el DOM. Se denominan tradicionales porque son los que existen en Javascript desde versiones más antiguas.

getElementById()

El primer método, .getElementById(id) busca un elemento HTML con el id especificado. En principio, un documento HTML bien construído no debería tener más de un elemento con el mismo id, por lo tanto, este método devolverá siempre un solo elemento:

const page = document.getElementById("page");   // <div id="page"></div>

En el caso de no encontrar el elemento indicado, devolverá .

getElementsByClassName()

Por otro lado, el método .getElementsByClassName(class) permite buscar los elementos que tengan la clase especificada en class. Es importante darse cuenta del matiz de que el método tiene getElements en plural, es decir, puede devolver varias clases ya que al contrario que los id, pueden existir varios elementos con la misma clase:

const items = document.getElementsByClassName("item");  // [div, div, div]

console.log(items[0]);      // Primer item encontrado: <div class="item"></div>
console.log(items.length);  // 3

Estos métodos devuelven siempre un con todos los elementos encontrados que encajen con el criterio. En el caso de no encontrar ninguno, devolverá un vacío: [].

Exactamente igual funcionan los métodos getElementsByName(name) y getElementsByTagName(tag), salvo que se encargan de buscar elementos HTML por su atributo name o por su propia etiqueta de elemento HTML, respectivamente:

// Obtiene todos los elementos con atributo name="nickname"
const nicknames = document.getElementsByName("nickname");  // [input]

// Obtiene todos los elementos <div> de la página
const divs = document.getElementsByTagName("div");         // [div, div, div]

El primer método es getElement (en singular) y el resto son getElements (en plural). Recuerda ese detalle para no olvidar cuando devuelve un sólo elemento y cuando una lista de ellos.

Métodos modernos

Aunque los métodos tradicionales anteriores son más que suficientes para buscar elementos, actualmente tenemos a nuestra disposición dos nuevos métodos de búsqueda de elementos que son mucho más cómodos y prácticos si conocemos y dominamos los selectores CSS.

Es el caso de los métodos .querySelector() y .querySelectorAll():

Método de búsqueda Descripción Si no lo encuentra...
.querySelector(sel) Busca el primer elemento que coincide con el selector CSS sel. Devuelve .
.querySelectorAll(sel) Busca todos los elementos que coinciden con el selector CSS sel. Devuelve [].

Con estos dos métodos podemos realizar todo lo que hacíamos con los métodos tradicionales mencionados anteriormente e incluso muchas más cosas (en menos código), ya que son muy flexibles y potentes gracias a los selectores CSS.

querySelector()

El método .querySelector() devuelve el primer elemento que encuentra que encaja con el selector CSS suministrado por parámetro. Siempre devuelve un solo elemento y en caso de no coincidir con ninguno, devuelve :

const page = document.querySelector("#page");               // <div id="page"></div>
const info = document.querySelector(".main .info");         // <div class="info"></div>

Lo interesante de este método, es que al permitir suministrarle un selector CSS básico o incluso un selector CSS avanzado, se vuelve un sistema mucho más potente.

  • El primer ejemplo sería equivalente a utilizar un .getElementById(), sólo que en la versión de .querySelector() indicamos por parámetro un , y en el primero le pasamos un simple . Observa que estamos indicando un # porque se trata de un id.

  • En el segundo ejemplo, estamos recuperando el primer elemento con clase info que esté dentro de otro con clase main. En los métodos tradicionales, sería menos directo ya que tendríamos que realizar varias llamadas. Con .querySelector() se hace directamente sólo con una.

querySelectorAll()

Por otro lado, el método .querySelectorAll() realiza una búsqueda de elementos en el DOM, sólo que como podremos intuir por ese All(), devuelve un con todos los elementos que coinciden con el CSS.

// Obtiene todos los elementos con clase "info"
const infos = document.querySelectorAll(".info");

// Obtiene todos los elementos con atributo name="nickname"
const nicknames = document.querySelectorAll('[name="nickname"]');

// Obtiene todos los elementos <div> de la página HTML
const divs = document.querySelectorAll("div");

El método .querySelectorAll() siempre nos devolverá un de elementos. El número de elementos del array dependerá de los que encuentre.

Búsquedas acotadas

Al realizar una búsqueda de un elemento particular y guardarlo en una variable o constante, podemos volver a realizar una nueva búsqueda posteriormente sobre este elemento, en lugar del DOM íntegro document:

const menu = document.querySelector("#menu");
const links = menu.querySelectorAll("a");

Sin embargo, si controlamos un poco de CSS, esto puede ser más sencillo si hacemos lo siguiente:

const links = document.querySelectorAll("#menu a");

NodeList o HTMLCollection

Ten en cuenta que aunque en esta documentación hemos hablado de (para simplificar), realmente los métodos de búsqueda generalmente devuelven un tipo de dato HTMLCollection o NodeList, que aunque son muy similares, no son exactamente .

const elements = document.querySelectorAll("div");
elements.map // undefined

const elements = [...document.querySelectorAll("div")];
elements.map // ƒ map() { [native code] }

En el segundo caso hemos hecho una desestructuración de arrays, es decir, hemos sacado todos los elementos de la estructura y la hemos metido en un nuevo . Por esta razón en el primer caso no podemos usar .map() y en el segundo caso, sí.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev