Obtener elemento basado en el nombre de la clase en JavaScript
-
Obtenga un elemento basado en su nombre de clase CSS con la función Javascript
.getElementsByClassName() -
Obtener elemento basado en el nombre de clase CSS con la función
.querySelector()de Javascript -
Obtenga varios elementos HTML basados en el nombre de la clase CSS con la función
.querySelectorAll()
Es posible que necesitemos consultar un elemento del DOM para cambiar su estilo dinámicamente en el tiempo de ejecución. Javascript tiene varias funciones incorporadas que pueden servir para nuestro propósito. El famoso de estos es el .getElementById(). Pero .getElementById() devuelve sólo un elemento, el primer elemento, cuyo id HTML coincide con el parámetro pasado a la función. El enfoque de la función .getElementById() puede ser engorroso si vamos a cambiar estilos, de múltiples elementos, al mismo tiempo. Implicará agregar múltiples identificadores a los elementos HTML y consultarlos uno a la vez. ¿Podemos hacerlo de una mejor manera? La siguiente sección detalla las formas de obtener elementos del DOM en función de su nombre de clase CSS.
Obtenga un elemento basado en su nombre de clase CSS con la función Javascript .getElementsByClassName()
Javascript tiene un método incorporado .getElementsByClassName() que nos permite consultar más de un elemento HTML basado en su nombre de clase CSS. Es un método disponible en la interfaz Document y generalmente se usa en él como document.getElementsByClassName(). La función buscará en el documento (el DOM) todos los elementos con el nombre de clase CSS especificado en los parámetros de la función.
Según MDN Docs, la función devuelve la colección en vivo de elementos HTML. Significa que los elementos devueltos por la función getElementsByClassName() pueden modificarse en tiempo de ejecución si hay fragmentos de código que modifiquen los elementos DOM directamente.
Sintaxis de getElementsByClassName
let el = document.getElementsByClassName(cssClassName);
El cssClassName debe ser una cadena que represente la clase CSS deseada. Si hay varias clases de CSS, podemos mencionarlas separadas por espacios (como css-class1 css-class2, etc.)
Argumentos de getElementsByClassName
La función toma un parámetro, el nombre de la clase CSS. En algunos casos, es posible que necesitemos una combinación de nombres de clases CSS para seleccionar un elemento. En tales escenarios, podemos pasar varios nombres de clases CSS separados por espacios.
Ejemplo
Consultemos el siguiente código para comprender el funcionamiento.
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.getElementsByClassName('bold');
console.log(els);
}
Producción :
HTMLCollection(2) [div.bold, div.bold]
El código anterior registrará una colección de elementos HTML en la consola. La consola de Google Chrome mostrará una salida como se muestra arriba. Escribir el código document.getElementsByClassName("bold") dentro de window.onload asegura que el código se ejecute sólo una vez que el HTML ha sido renderizado. Tenga en cuenta que, a diferencia de la función .getElementById(), la función getElementsByClassName() devuelve un array de elementos HTML. No podemos trabajar directamente en el elemento, generado por getElementsByClassName() como lo hacemos para .getElementById(). Si vamos a cambiar el estilo bold en el código anterior a normal para el primer elemento, podemos usar el siguiente código.
let els = document.getElementsByClassName('bold');
els[0].style.fontWeight = '100';
Obtener elemento basado en el nombre de clase CSS con la función .querySelector() de Javascript
getElementsByClassName() es un método ampliamente utilizado y está restringido a seleccionar elementos HTML según su nombre de clase CSS. Javascript tiene otra función incorporada disponible en la interfaz Documento, el querySelector(), que es de naturaleza más genérica. Se puede utilizar para consultar elementos en función de su nombre de clase CSS. Esta funcionalidad es solo un subconjunto de las capacidades reales de querySelector(). La función de Javascript querySelector() es comparable a .getElementById() ya que devuelve el primer elemento que satisface el parámetro de selección pasado en sus argumentos.
.querySelector() Sintaxis
La sintaxis es similar a la de .getElementsByClassName().
let el = document.querySelector('.cssQuerySelector');
.querySelector() Parámetros
El querySelector() acepta un tipo de datos de cadena como parámetro que representa el css query selector. De la misma forma que usamos los selectores CSS para aplicar estilos particulares a los elementos seleccionados. Incluye #<id> para seleccionar un elemento HTML basado en su id, .<css-class-name> para seleccionar un elemento basado en su nombre de clase de estilo CSS e incluso una combinación de los dos, como #<id>.<css-class-name>, se puede usar para seleccionar un elemento.
Ejemplo
El siguiente código explica el uso de .querySelector().
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.querySelector('.bold');
console.log(els);
}
Producción :
<div class="bold">Element 1: Bolder text</div>
El resultado es como aparece en la consola del navegador de Google Chrome. Tenga en cuenta que la función .querySelector() devuelve solo un elemento HTML a diferencia de .getElementsByClassName() que devuelve una colección de ellos. Por lo tanto, si vamos a procesarlo, podemos aplicarle directamente los cambios. Por ejemplo, si vamos a cambiar la fuente del elemento seleccionado a normal, podemos lograrlo usando el siguiente código.
window.onload = function() {
let els = document.querySelector('.bold');
els.style.fontWeight = '100';
}
Obtenga varios elementos HTML basados en el nombre de la clase CSS con la función .querySelectorAll()
Como sugiere el nombre, la función .querySelectorAll() en Javascript devuelve una colección de elementos HTML que satisfacen los criterios de selección. Al igual que el .querySelector(), el .querySelectorAll() acepta la cadena de selección de consultas CSS como parámetro. Devuelve una lista estática de elementos HTML, que no están activos. Se comporta de forma similar a .getElementsByClassName() ya que devuelve múltiples elementos HTML consultados en base a él, pero no se limita a ello. Al igual que el .querySelector(), podemos usar el .querySelectorAll() para obtener elementos basados en sus identificadores o los nombres de las clases CSS. Al igual que seleccionamos elementos con los Selectores de consultas en las hojas de estilo CSS.
.querySelectorAll() Sintaxis
document.querySelectorAll('<css-selector-string>');
.querySelectorAll() Parámetros
La función acepta una cadena de consulta CSS como su único parámetro de entrada. Para seleccionar elementos basados en id, debemos utilizar el parámetro #<id>. Y para seleccionar según el nombre de la clase CSS, debería ser .<css-class-name>. Para la combinación de los dos podemos usar el formato #<id>.<css-class-name>.
Ejemplo
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
console.log(els);
Producción :
NodeList(2)
0: div.bold
1: div.bold
La salida es un array de tipo lista de nodos. Podemos procesar estos nodos aún más seleccionándolos del array y cambiando sus valores de clase CSS según el requisito. Un ejemplo es el que se muestra en el siguiente código. La línea els[0].style.fontWeight = "100"; hará que el primer nodo HTML seleccionado tenga un peso de fuente normal.
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
els[0].style.fontWeight = '100';
console.log(els);
Producción :
NodeList(2)
0: div.bold
1: div.bold