HTML DOM querySelector() Method

Ejemplo

Obtener el primer elemento en el documento con class = "ejemplo":

document.querySelector(".example");

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

El querySelector() método devuelve el primer elemento que coincide con un CSS especificado selector(s) en el documento.

Nota: El querySelector() método sólo devuelve el primer elemento que coincide con los selectores especificados. Para devolver todos los partidos, utilice el querySelectorAll() método en su lugar.

Si el selector equivale a una identificación en el documento que se utiliza varias veces (Tenga en cuenta que un "id" debe ser único dentro de una página y no debe utilizarse más de una vez), se devuelve el primer elemento coincidente.

Para obtener más información acerca de CSS Selectores, visite nuestro CSS Selectores Tutorial y nuestro CSS Selectores de referencia .

Soporte del navegador

Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con el método.

Método
querySelector()	4.0	8.0	3.5	3.2	10.0

Sintaxis

document.querySelector( CSS selectors )

Los valores de los parámetros

Parámetro	Tipo	Descripción
CSS selectors	String	Necesario. Especifica uno o más selectores CSS para que coincida con el elemento. Estos se utilizan para seleccionar elementos HTML basado en su documento de identidad, clases, tipos, atributos, valores de atributos, etc. Para múltiples selectores, separar cada selector con una coma. El elemento devuelto depende de qué elemento que se encuentra primero en el documento (See "More Examples") . Consejo: Para obtener una lista de todos los selectores CSS, visita nuestra CSS Selectores de referencia .

Detalles técnicos

DOM Versión:	Nivel 1 selectores de objetos de documento
Valor de retorno:	Un objeto NodeList, que representa el primer elemento que coincide con el CSS especificado selector(s) . Si no se encuentran coincidencias, se devuelve null. Lanza una excepción si el SYNTAX_ERR especificada selector(s) no es válido.

Más ejemplos

Ejemplo

Obtener el primer <p> elemento en el documento:

document.querySelector("p");

Inténtalo tú mismo "

Ejemplo

Obtener el primer <p> elemento en el documento con class = "ejemplo":

document.querySelector("p.example");

Inténtalo tú mismo "

Ejemplo

Cambiar el texto de un elemento con id = "demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Inténtalo tú mismo "

Ejemplo

Obtener el primer <p> elemento en el documento donde el padre es un <div> elemento.

document.querySelector("div > p");

Inténtalo tú mismo "

Ejemplo

Obtener el primer <a> elemento en el documento que tiene un "target" atributo:

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

Inténtalo tú mismo "

Ejemplo

Este ejemplo muestra cómo funcionan los selectores múltiples.

Suponga que tiene dos elementos: a <h2> y <h3> elemento.

El siguiente código añade un color de fondo al primer <h2> elemento en el documento:

<h2>A h2 element</h2>
<h3>A h3 element</h3>

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

Inténtalo tú mismo "

Sin embargo, si el <h3> elemento se coloca antes de la <h2> elemento en el documento. La <h3> elemento es el que va a conseguir el color de fondo rojo.

<h3>A h3 element</h3>
<h2>A h2 element</h2>

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

Inténtalo tú mismo "