Document.querySelector()

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.

En este ejemplo, obtendremos el primer elemento del documento con la clase "miClase":

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

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

var el = document.querySelector("div.user-panel.main input[name='login']");

• 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):

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

• document.querySelectorAll()
• element.querySelector()
• element.querySelectorAll()
• Snippets para querySelector