Document.querySelector()

Retorna el primer elemento dentro del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincide 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, el primer elemento en el documento con la clase "miClase" es devuelto:

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

Notas

  • Retorna 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 muchas veces en el documento, retorna el primer elemento encontrado.
  • Arroja una excepción de tipo SYNTAX_ERR si el grupo de selectores especificado es invalido.
  • 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 retornaran elementos, como está especificado en la AP​I Selectors.
  • Para que coincidan ID's o selectores que no siguen la sintaxis CSS (usando inapropiadamente dos puntos o un espacio por ejemplo), se debe 'escapar' el carácter con un back-slash (\). Como el back-slash es un carácter de 'escape' en JavaScript, si estas ingresando una cadena de caracteres literal, debes 'escaparla' dos veces (una vez para la cadena de caracteres JavaScript y otra vez 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 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

Ver Tambien

Etiquetas y colaboradores del documento

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