Element.querySelector()

selectores

Es el grupo de selectores que servirán para filtrar los elementos descendientes del Element elementoBase; debe tener una sintáxis CSS válida o se producirá una excepción SyntaxError. Devuelve el primer elemento que encuentre que coincida con el grupo de selectores.

Devolverá el primer descendiente del elemento elementoBase que coincida con el grupo de selectores especificado. Para la comparación se recorrerá la jerarquía completa de elementos, incluyendo a aquellos que no son descendientes del elementoBase; en otras palabras, los selectores se aplican primero al documento completo, no sólo al elementoBase, creando una lista inicial de elementos potencialmente seleccionables. Después se examina dicha lista para comprobar qué elementos son descendientes del elementoBase. El método querySelector() devolverá el primero de dichos elementos descendientes.

Si no hubiera coincidencias, devolverá el valor null.

SyntaxError

Los selectores especificados no son válidos.

Vamos a ver unos cuantos ejemplos.

En este primer ejemplo, obtendremos el primer elemento <style> del body del documento HTML que no tenga atributo "type" o cuyo atributo "type" sea igual a "text/css":

var el = document.body.querySelector(
  "style[type='text/css'], style:not([type])",
);

El ejemplo que mostramos a continuación, demuestra que la jerarquía de todo el documento se tiene en cuenta cuando se aplican los selectores, de modo que se tienen en cuenta todos los niveles que se encuentran fuera de la jerarquía del elementoBase para localizar coincidencias.

HTML

<div>
  <h5>Original content</h5>
  <p>
    inside paragraph
    <span>inside span</span>
    inside paragraph
  </p>
</div>
<div>
  <h5>Output</h5>
  <div id="output"></div>
</div>

JavaScript

var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  baseElement.querySelector("div span").innerHTML;

Resultado

El resultado es el siguiente:

Podemos ver que el selector "div span" coincide con el elemento <span>, aunque baseElement excluye el elemento div al no ser parte de su selector.

Puedes ver más ejemplos sobre el formato apropiado para los selectores aquí Document.querySelector().

• Localizando elementos DOM usando selectores
• Selectores de atributo en la guia de CSS
• Selectores de atributo en MDN Learning
• Element.querySelectorAll()
• Document.querySelector() y Document.querySelectorAll()
• DocumentFragment.querySelector() y DocumentFragment.querySelectorAll()
• ParentNode.querySelector() y ParentNode.querySelectorAll()
• Code snippets for querySelector
• Otros métodos que toman selectores: element.closest() y element.matches().