El método querySelectorAll() en HTML se usa para devolver una colección de elementos secundarios de un elemento que coinciden con un selector CSS específico, como un objeto NodeList estático. El objeto NodeList representa una colección de Nodes. Se puede acceder a los Nodes por números de índice. El índice comienza en 0.
Nota: si queremos aplicar la propiedad CSS a todos los Nodes secundarios que coincidan con el selector especificado, podemos recorrer todos los Nodes y aplicar esa propiedad en particular.
Sintaxis:
element.querySelectorAll(selectors)
Selectores es el campo obligatorio. Especifica uno o más selectores de CSS para que coincidan con el elemento. Estos selectores se utilizan para seleccionar elementos HTML en función de su id, clases, tipos, etc.
En el caso de varios selectores, se utiliza una coma para separar cada selector.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM querySelectorAll() Method</title>
<style>
#geek {
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">GeeksforGeeks</h1>
<h2>querySelectorAll() Method</h2>
<div id="geek">
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("geek").querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "green";
x[i].style.color = "white";
}
}
</script>
</body>
</html>
Producción:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con el método querySelectorAll() se enumeran a continuación:
- Apple Safari 3.1
- Google Chrome 1.0
- Borde 12.0
- Firefox 3.5
- Ópera 10.0
- Internet Explorer 9.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA