querySelector() y querySelectorAll() son dos funciones jQuery que ayudan a que los elementos HTML se pasen como un parámetro mediante el uso de selectores CSS (‘id’, ‘clase’) que se pueden seleccionar.
Método querySelector(): El método querySelector() devuelve el primer elemento dentro del documento que coincide con un selector CSS específico. Si se producen varios elementos, devuelve el resultado solo para el primer elemento coincidente.
Sintaxis:
document.querySelector(selectors);
Devuelve el primer elemento que coincide con el selector.
Método querySelectorAll(): El método querySelectorAll() devuelve todos los elementos del documento que coinciden con los selectores CSS especificados. Devuelve todos los elementos que coinciden con el selector en forma de un objeto NodeList estático que es una colección de Nodes. Para acceder a cada elemento, normalmente usamos un bucle. Se puede acceder a cada elemento a través de un índice. El índice comienza con 0. La longitud de la propiedad se puede usar para obtener la cantidad de elementos que coinciden con el selector especificado.
Sintaxis:
document.querySelectorAll(selectors);
Devuelve todos los elementos que coinciden con el selector.
document.querySelectorAll(selectors)[i];
Devuelve el elemento en el índice i en la lista.
Diferencia entre el método querySelector() y querySelectorAll():
Código HTML:
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:#006600">
GeeksforGeeks
</h1>
<div class="test-btn">text</div>
<div class="test-btn">text</div>
<div class="test-btn">text</div>
<div class="test-btn">text</div>
<button onClick="qselector()">
querySelector
</button>
<button onClick="qselectorall()">
querySelectorAll
</button>
<script>
function qselector() {
document.querySelector(".test-btn")
.style.color = "#006600";
}
function qselectorall() {
var x = document
.querySelectorAll(".test-btn");
for (var i = 0; i < x.length; i++) {
x[i].style.color = "#006600";
}
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en cualquier botón:
- Después de hacer clic en el botón querySelector:
- Después de hacer clic en el botón querySelectorAll:
Diferencias: como se vio anteriormente, el método querySelector() solo se puede usar para acceder a un solo elemento, mientras que el método querySelectorAll() se puede usar para acceder a todos los elementos que coinciden con un selector CSS específico. Para devolver todas las coincidencias, se debe usar querySelectorAll , mientras que para devolver una sola coincidencia, se usa querySelector .
Publicación traducida automáticamente
Artículo escrito por mharshita31 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA