Document.querySelector()

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

Especificaciones

• Selectors API

Ver Tambien

• document.querySelectorAll()
• element.querySelector()
• element.querySelectorAll()
• Code snippets for querySelector