Document.querySelector()
Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincida con el grupo especificado de selectores.
Sintaxis
js
element = document.querySelector(selectores);
Donde:
element
es un objeto de tipo element.selectores
es una cadena de caracteres que contiene uno o más selectores CSS separados por coma.
Ejemplo
En este ejemplo, obtendremos el primer elemento del documento con la clase "miClase":
js
var el = document.querySelector(".miClase");
Ejemplo más útil
Los Selectores pueden ser muy útiles como se demostrará en el siguiente ejemplo. Aquí, será retornado el primer elemento <input name="login" />
dentro de <div class="user-panel main">
.
js
var el = document.querySelector("div.user-panel.main input[name='login']");
Notas
- Devuelve
null
si no se encuentran coincidencias, de lo contrario, retorna el primer elemento encontrado. - Si el selector coincide con un ID y este ID es usado erróneamente varias veces en el documento, devuelve el primer elemento encontrado.
- Lanza una excepción de tipo SYNTAX_ERR si el grupo de selectores especificado no es válido.
- querySelector() se introdujo en la API Selectors.
- La cadena de caracteres que se pasa como argumento a
querySelector debe seguir la sintaxis CSS.
- Las Pseudo-clases CSS nunca devolverán elementos, tal y como está especificado en la
API Selectors
. - Para que coincidan ID's o selectores que no siguen la sintáxis CSS (usando inapropiadamente dos puntos o un espacio por ejemplo), se debe 'escapar' el carácter con una barra invertida (\). Como la barra invertida es un carácter de 'escape' en JavaScript, si estás indicando una cadena de caracteres literal, debes 'escaparla' dos veces (una para la cadena de caracteres JavaScript y otra para el querySelector):
html
<div id="foo\bar"></div>
<div id="foo:bar"></div>
<script>
console.log("#foo\bar"); // "#fooar"
document.querySelector("#foo\bar"); // No coincide con nada
console.log("#foo\\bar"); // "#foo\bar"
console.log("#foo\\\\bar"); // "#foo\\bar"
document.querySelector("#foo\\\\bar"); // Coincide con el primer div
document.querySelector("#foo:bar"); // No coincide con nada
document.querySelector("#foo\\:bar"); // Coincide con el segundo div
</script>
Compatibilidad en los navegadores
BCD tables only load in the browser
Especificaciones
Specification |
---|
DOM Standard # ref-for-dom-parentnode-queryselector① |