Cómo seleccionar elementos mediante selectores CSS usando JavaScript

JavaScript proporciona dos métodos, querySelector() y querySelectorAll() , para seleccionar elementos DOM basados ​​en selectores CSS. Los selectores de CSS son una forma muy simple pero poderosa de seleccionar elementos HTML del documento.

El querySelector() El método toma un selector CSS como entrada y devuelve el primer elemento coincide con el selector dado. Si no coincide ningún elemento, devuelve null . Aquí hay un ejemplo que selecciona el primer <button> elemento en el documento:

const p = document.querySelector('p');

// Get paragraph text
console.log(p.innerText);

El querySelectorAll() El método toma un selector CSS como entrada y devuelve una lista de elementos DOM , básicamente una lista de nodos, que coincide con el selector CSS dado. Si no se encuentra ninguna coincidencia, devuelve una lista vacía.

Aquí hay un ejemplo que selecciona todos los <div> elementos que contiene el active Clase CSS:

const divs = document.querySelectorAll('div.active');

// iterate over elements
divs.forEach((div, index) => {
    div.style.color = 'red';
});

En el ejemplo anterior, usamos el ciclo forEach() para iterar a través de los elementos de NodeList . Eche un vistazo a esta guía para obtener más información sobre la creación de bucles sobre elementos DOM en JavaScript.

También puede especificar múltiples selectores de CSS separados por coma con querySelectorAll() , al igual que el $(...) de jQuery método:

// select all <div> tags with the `active` class + all <p> tags
const elems = document.querySelectorAll('div.active, p');

Ambos métodos funcionan en todos los navegadores modernos y antiguos hasta Internet Explorer 8. Eche un vistazo a la guía sobre cómo seleccionar elementos DOM para obtener más información sobre las diferentes formas de extraer elementos DOM en JavaScript.