MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

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":

var el = document.querySelector(".miClase");

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 es 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 AP​I 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): 
<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

Plataforma Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte Basico 1 3.5 (1.9.1)
bug 416317
8 10 3.2 (525.3)
WebKit bug 16587
Plataforma Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte Basico 2.1 Si 9 10.0 3.2

 

Especificaciones

También puedes consultar

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Luis_Calvo, dannysalazar90
 Última actualización por: Luis_Calvo,