HTML DOM querySelector() Method

Ejemplo

Cambiar el texto del primer elemento secundario con class = "ejemplo" en un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

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

Definición y Uso

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

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.

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

element .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 elementos de objeto
Valor de retorno:	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

Cambiar el texto de la primera <p> elemento de un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Inténtalo tú mismo "

Ejemplo

Cambiar el texto de la primera <p> elemento con class = "ejemplo" en un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Inténtalo tú mismo "

Ejemplo

Cambiar el texto de un elemento con id = "demo" en un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Inténtalo tú mismo "

Ejemplo

Añadir un borde rojo a la primera <a> elemento que tiene un atributo de destino dentro de un <div> elemento:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

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

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Inténtalo tú mismo "

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

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Inténtalo tú mismo "