Método HTML DOM querySelector()

Ejemplo

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

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

Más ejemplos de "Pruébelo usted mismo" a continuación.

Definición y uso

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

Nota: El método querySelector() solo devuelve el primer elemento que coincide con los selectores especificados. Para devolver todas las coincidencias, utilice el método querySelectorAll() en su lugar.

Para obtener más información sobre los selectores de CSS, visite nuestro Tutorial de selectores de CSS y nuestra Referencia de selectores de CSS .

Compatibilidad con navegador

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

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

Sintaxis

element.querySelector(CSS selectors)

Valores paramétricos

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Detalles técnicos

Versión DOM:	Selectores Nivel 1 Elemento Objeto
Valor devuelto:	El primer elemento que coincide con los selectores de CSS especificados. Si no se encuentran coincidencias, se devuelve nulo. Lanza una excepción SYNTAX_ERR si los selectores especificados no son válidos.

Más ejemplos

Ejemplo

Cambia el texto del primer elemento <p> en un elemento <div>:

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

Ejemplo

Cambia el texto del primer elemento <p> con class="example" en un elemento <div>:

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

Ejemplo

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

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

Ejemplo

Agregue un borde rojo al primer elemento <a> que tiene un atributo de destino dentro de un elemento <div>:

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

Ejemplo

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

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

El siguiente código agregará un color de fondo al primer elemento <h2> en <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";

Sin embargo, si el elemento <h3> se colocó antes que el elemento <h2> en <div>. El elemento <h3> es el que obtendrá 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";