Método querySelector() del Elemento DOM HTML

Definición y uso

querySelector() El método devuelve el primer elemento hijo que coincide con el selector CSS especificado para el elemento.

Nota:

querySelector() El método solo devuelve el primer elemento que coincide con el selector especificado. Para devolver todos los elementos coincidentes, utilice Método querySelectorAll().

Véase también:

Manual de referencia:

Atributo classList

Atributo className

Método querySelectorAll()

Método getElementsByTagName()

Método getElementsByClassName()

Objeto Style de HTML DOM

Tutoriales:

Sintaxis de CSS

Selector de CSS

Manual de referencias de selectores de CSS

Ejemplo

Ejemplo 1

Cambiar el texto del primer elemento hijo con class="example" en el elemento <div>:

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

Pruebe usted mismo

Más ejemplos se proporcionan a continuación en la página.

Sintaxis

elemento.querySelector(CSSselectors)

Parámetros

Parámetros Descripción
CSSselectors

Obligatorio. String. Especifica uno o más selectores CSS para coincidir con los elementos.

Los selectores CSS se utilizan para seleccionar elementos HTML según el id, la clase, el tipo, las propiedades, los valores de las propiedades, etc.

Para múltiples selectores, separe cada selector con una coma.

El elemento devuelto depende del primer elemento encontrado en el documento (consulte los "más ejemplos" a continuación).

Consejo:Para una lista completa de selectores CSS, consulte nuestra Manual de referencias de selectores de CSS.

Detalles técnicos

Valor devuelto:

Coincide con el primer elemento que coincide con el selector CSS especificado.

Si no se encuentra ningún elemento coincidente, se devuelve null.

Si el selector especificado no es válido, se lanza la excepción SYNTAX_ERR.
Versión del DOM: Objeto de Elemento Nivel 1 Selectores

Más ejemplos

Ejemplo 2

Cambiar el texto del primer <p> elemento en el elemento <div>:

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

Pruebe usted mismo

Ejemplo 3

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

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

Pruebe usted mismo

Ejemplo 4

Cambiar el texto del elemento <div> con id="demo":

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

Pruebe usted mismo

Ejemplo 5

Añadir un borde rojo sólido de 10px al primer elemento <a> con la propiedad target dentro del elemento <div>.

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

Pruebe usted mismo

Ejemplo 6

Este ejemplo muestra cómo funcionan varios selectores.

Supongamos que tiene dos elementos: elementos <h2> y <h3>.

El siguiente código añadirá un color de fondo al primer elemento <h2> dentro de <div>:

<div id="myDIV">
  <h2>Un elemento h2</h2>
  <h3>Un elemento h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Pruebe usted mismo

Ejemplo 7

Sin embargo, si el elemento <h3> dentro de <div> se coloca antes del elemento <h2> <h3> obtendrá un fondo de color rojo.

<div id="myDIV">
  <h3>Un elemento h3</h3>
  <h2>Un elemento h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Pruebe usted mismo

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente el método.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Páginas relacionadas

Tutoriales de CSS:Selector de CSS

Manual de referencia de CSS:Manual de referencias de selectores de CSS

Tutoriales de JavaScript:Nodo de lista HTML DOM de JavaScript

Manual de referencia de JavaScript:document.querySelector()

Manual de referencia de JavaScript:element.querySelectorAll()

Manual de referencia de HTML DOM:document.querySelectorAll()