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 songetElements
(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 unid
. -
En el segundo ejemplo, estamos recuperando el primer elemento con clase
info
que esté dentro de otro con clasemain
. 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
// 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
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 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 .map()
y en el segundo caso, sí.