HTML DOM querySelector()

Ejemplo

document.querySelector(".ejemplo");

Obtiene el primer elemento en el documento con la clase "ejemplo".
El método querySelector() retorna el primer elemento del documento que matchea con un específico selector CSS. Si se quiere obtener todos los elementos se puede usar querySelectorAll().

Sintaxis

document.querySelector(CSS selectors)

El parámetro especifica uno o más selectores CSS separados por comas, para buscar un elemento en el documento. Retorna un objeto NodeList o null si no es encontrado.

Más ejemplos

document.querySelector("p");

Obtiene el primer elemento párrafo en el documento.

document.querySelector("p.ejemplo");

Obtiene el primer elemento párrafo en el documento con la clase "ejemplo".

document.querySelector("#demo").innerHTML = "Hola Mundo!";

Obtiene el primer elemento con id="demo" y modifica su texto.

document.querySelector("div > p");

Obtiene el primer elemento párrafo cuyo parent es un elemento div.

document.querySelector("a[target]");

Obtiene el primer elemento <a> que tenga un atributo "target".

Ejemplo con múltiples selectores

<h2>Titulo de nivel 2</h2>
<h3>Titulo de nivel 3</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

El primer elemento que encuentra es un título de nivel 2, por eso lo colorea de rojo y no sigue buscando elementos de título de nivel 3.
En el ejemplo siguiente colorea el elemento de título de nivel 3 porque es el primer elemento que matchea con alguno de los selectores, luego no sigue buscando.

<h3>Titulo de nivel 3</h3>
<h2>Titulo de nivel 2</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";