El método querySelector() en HTML se usa para devolver el primer elemento que coincide con un selector CSS específico en el documento.
Nota: El método querySelector() solo devuelve el primer elemento que coincide con los selectores especificados. Para devolver todas las coincidencias, use el método querySelectorAll() .
Sintaxis:
element.querySelector(selectors);
Los selectores son el campo obligatorio. Especifica uno o más selectores de CSS para que coincida 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. El elemento que aparece primero en el documento es el elemento devuelto. Si el selector coincide con una identificación (que debe ser única en cada página), que se usa varias veces en el documento, devolverá el primer elemento coincidente.
Valor de retorno: este método se utiliza para devolver el primer elemento que coincide con un selector CSS específico en el documento.
Ejemplo: este ejemplo describe el uso del método DOM querySelector() para seleccionar el primer elemento coincidente para el selector específico.
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM querySelector() Method</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>querySelector() Method</h2>
<div id="gfg">
<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("gfg");
x.querySelector("p").style.backgroundColor = "Green";
x.querySelector("p").style.color = "white";
}
</script>
</body>
</html>
Producción:
Método DOM querySelector()
Navegadores compatibles: los navegadores compatibles con el método querySelector() se enumeran a continuación:
- Google cromo 1
- Borde 12
- explorador de Internet 9
- Firefox 3.5
- Ópera 10
- Safari 3.1
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