Document.querySelector()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
querySelector

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Especificaciones

Specification
DOM
# ref-for-dom-parentnode-queryselector①

Vea también