Si hace poco veíamos los condicionales de WordPress y cómo a veces pueden llevarnos a confusión, hoy vamos a ver un tema también básico pero que no siempre tenemos claro y puede llevar a confusión, y son los métodos JavaScript para seleccionar elementos en nuestro HTML y poder modificarlos o interactuar con ellos ‘al vuelo’.
getElementById()
Devuelve un elemento único o null a partir de su ID, es decir, si tenemos una capa:
<div id="contenido"></div>document.getElementByID(‘contenido’); nos devolvería ese objeto div y podremos acceder a sus propiedades o cambiarlas:
var capa = document.getElementById('contenido');
capa.style.backgroundColor = 'red'; Más info en:
- https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
- https://www.w3schools.com/jsref/met_document_getelementbyid.asp
getElementsByClassName()
Selecciona todos los elementos que tienen asignada una clase de CSS y lo devuelve en formato colección (HTMLCollection) y podemos recorrer los valores como si fuera un array.
var elmMenu = document.getElementsByClassName("menu-item");
var i;
for (i = 0; i < elmMenu.length; i++) {
elmMenu[i].style.backgroundColor = "#92a8d1";
}Podemos utilizarlo en el document o directamente un un elemento, para buscar subelementos que utilicen esa clase y si sabemos que sólo hay un elemento de ese tipo, o sólo nos interesa el primero, no es necesario hacer la iteración y podemos acceder directamente al elemento ‘0’, que es el primero siempre:
elmMenu[0].style.backgroundColor = "#92a8d1";Si queremos buscar más de una clase, las ponemos separados por espacio, sin coma: getElementsByClassName(«menu active»);
- https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
- https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
getElementsByName()
Este es de los que menos se utiliza porque el atributo ‘name’ se ha ido sustituyendo por el ‘id’ .
Funciona exactamente igual que getElementsByClassName, devolviendo una NodeList (colección), pero en base a los elementos con una etiqueta name concreta, por lo que solía usarse para campos de formulario que acostumbran a utilizar ese atributo.
var campo = document.getElementsByClassName("nombre");
var i;
for (i = 0; i < campo.length; i++) {
campo[i].style.borderColor = "red";
}- https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp
- https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
Ojo si trabajas o das soporte a versiones de IE porque getElementsByName funciona algo diferente y devuelve una HTMLCollection y no reconoce los elementos que no deberían tener atributo ‘name’.
getElementsByTagName()
En este caso, el método nos devuelve todos los elementos de una etiqueta HTML concreta (li, p, div….)
Técnicamente funciona igual que getElementsByClassName(), devolviendo una colección HTML que podemos recorrer como un array o acceder directamente al elemento de la posición que queramos.
Es muy práctico, por ejemplo para listas ordenadas:
var elLista = document.getElementsByTagName("li");
var i;
for (i = 0; i < elLista.length; i++) {
elLista[i].style.color = "red";
}querySelector() y querySelectorAll()
Por último vamos a ver dos métodos que también podemos utilizar para trabajar con elementos de nuestra página y que nos pueden ser muy útiles para llegar a elementos que con los métodos anteriores nos es más complicado, ya que pueden ser mucho más específicos.
querySelector() y querySelectorAll() seleccionan uno o varios elementos utilizando los selectores de CSS, ya sean una .clase, un #id, o elementos mucho más concretos (ul li.activo).
querySelector() nos devuelve el primer elemento que encuentra con esa clase:
document.querySelector("p.nota");querySelectorAll() nos devuelve todos los elementos con esa clase (NodeList) y podremos recorrerlos como un array:
var elmListas = document.querySelectorAll("li, span.lista");
var i;
for (i = 0; i < elmListas.length; i++) {
elmListas[i].style.backgroundColor = "red";
}- https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
- https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
A tener en cuenta…
¿getElement… o querySelector?
Entonces, si en muchos casos podemos conseguir el mismo resultado, ¿es mejor utilizar getElement… o querySelector?
Los métodos getElementById y getElementsByClassName parece que son más rápidos pero también menos potentes. Es decir, si podemos acceder al elemento que necesitamos con getElement… seguramente sea la mejor opción.
En otras ocasiones, no tendremos más remedio que usar querySelector porque por la complejidad de los nodos o del elemento al que hemos de llegar, simplemente con getElement no podremos.
También debemos tener en cuenta que querySelectorAll devuelve una NodeList estática, es decir, que no tiene en cuenta los cambios que se hayan podido hacer «en vivo» en el DOM, y en cambio getElementById y getElementsByClassName si trabajan con la lista de nodos dinámica.
Nota: al contrario que los otros métodos, getElementById() sólo trabaja a nivel de document, no existe element.getElementById porque se supone que el ID ha de ser único para todo el documento, por lo que no es necesario reducir el ámbito de búsqueda.
¡Ojo con la sintaxis!
Parecerá absurdo, pero la de veces que me ha fallado un código por utilizar getElementByID() o getElementByClassName() (sin la s de elements)
También ten presente siempre si el método que estás utilizando te va a devolver un elemento o un array y si hay una forma específica de llegar a un elemento concreto o vas a tener que hacer malabarismos recorriendo arrays y buscando dentro.
No siempre tenemos la opción de modificar las etiquetas HTML para añadir o modificar selectores de CSS para poder acceder más fácilmente a lo que necesitamos, así que a veces vamos a tener que requerir de algo de imaginación 😉
