HTML DOM querySelector()Método

HTML 元素对象参考手册Objeto Elemento

Ejemplo

Modifica el contenido de texto del primer elemento hijo del elemento <div> con class="demo":

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

Pruébalo »

Definición y uso

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

Nota:El método querySelector() solo devuelve el primer elemento que coincide con el selector especificado. Si deseas devolver todos los elementos que coinciden, usa el método querySelectorAll() en su lugar.

Para más selectores CSS, puedes consultar nuestroTutorial de selectores CSSy nuestroManual de referencia de selectores CSS。

Compatibilidad del navegador

Los números de la tabla indican la versión del primer navegador que admite este método.

Método
querySelector() 4.0 8.0 3.5 3.1 10.0

Sintaxis

element.querySelector(Selector CSS)

Valores de parámetros

Parámetro Tipo Descripción
Selector CSS String Obligatorio. Especifica uno o más selectores CSS para elementos coincidentes. Puedes seleccionar elementos usando su id, clase, tipo, atributo, valor de atributo, etc.

Para varios selectores, sepáralos con comas; devuelve un elemento que coincida.

Consejo:Para más selectores CSS, consulta nuestroManual de referencia de selectores CSS。

Detalles técnicos

Versión DOM: Selectors Level 1 Element Object
Valor de retorno: El primer elemento que coincide con el selector CSS especificado. Si no se encuentra, devuelve null. Si se especifica un selector no válido, se lanza una excepción SYNTAX_ERR.

Más ejemplos

Ejemplo

Modifica el contenido del primer elemento <p> dentro del elemento <div>:

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

Pruébalo »

Ejemplo

Modifica el contenido del primer elemento hijo con class="example" dentro del elemento <div>:

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

Pruébalo »

Ejemplo

Modifica el primer elemento <p> con class="example" dentro del elemento <div>:

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

Pruébalo »

Ejemplo

Agrega un borde rojo al primer elemento <a> que tenga el atributo target dentro del elemento <div>:

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

Pruébalo »

Ejemplo

El siguiente ejemplo demuestra el uso de múltiples selectores.

Supongamos que eliges dos selectores: los elementos <h2> y <h3>.

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

Pruébalo »

Sin embargo, si el elemento <h3> está antes que el elemento <h2> dentro del elemento <div>, al elemento <h3> se le aplicará el color de fondo especificado.

<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";

Pruébalo »

Páginas relacionadas

Manual de referencia de JavaScript:document.querySelector()

HTML 元素对象参考手册Objeto Elemento

Otras extensiones