Latest web development tutorials

HTML DOM querySelector método ()

Documento de Referencia de objetos objetos del documento

Ejemplos

Obtener el primer elemento del documento id = "demo" de:

document.querySelector ( "# demo");

Trate »

Definición y Uso

querySelector () devuelve un elemento en el documento que coinciden con el selector CSS especificado.

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

Más selectores CSS, por favor visite nuestro selectores CSS tutorial y nuestros manual de referencia selectores CSS .


Soporte para el navegador

Las cifras de la tabla representan el primer navegador compatible con el número de versión del método.

camino
querySelector () 4.0 8.0 3.5 3.1 10.0


gramática

document.querySelector (selectores CSS)

parámetro Valor

parámetros tipo descripción
selectores CSS cadena Must. Especificar uno o más elementos coincidentes en los selectores CSS. Puede utilizar su identificación, clases, tipos, atributos, valores de atributos, etc. para seleccionar elementos.

Para varios selectores, separados por comas, para devolver un elemento coincidente.

Consejo: Para obtener más selectores CSS, por favor ver nuestras Referencia selectores CSS Manual .

detalles técnicos

Versión DOM: Nivel 1 selectores de objetos de documento
Devuelve: El primer elemento coincidente especificado selector CSS. Si no lo encuentra, devuelve un valor nulo. Si especifica una excepción selector de SYNTAX_ERR inválida es lanzada.


más ejemplos

Ejemplos

Al ser el primer documento en un elemento <p>:

document.querySelector ( "p");

Trate »

Ejemplos

Obtener la clase de documento = "ejemplo" el primer elemento:

document.querySelector ( "ejemplo".);

Trate »

Ejemplos

Obtener la clase de documento = "ejemplo" el primer elemento <p>:

document.querySelector ( "p.example");

Trate »

Ejemplos

Obtener el documento ha "objetivo" atributo primeros elementos <a>:

document.querySelector ( "un [objetivo]");

Trate »

Ejemplos

El siguiente ejemplo demuestra el uso de una pluralidad de selectores.

Supongamos que elige los dos selectores: <h2> y <h3> elemento.

El primer elemento <h2> en el código siguiente será añadir un color de fondo del documento:

<H2> Un elemento h2 </ h2>
<H3> Un elemento h3 </ h3>

document.querySelector ( "H2, H3") style.backgroundColor = "red" .;

Trate »

Sin embargo, si el documento elemento <h3> es <h2> elemento antes, <h3> elemento serán puestos para especificar el color de fondo.

<H3> Un elemento h3 </ h3>
<H2> Un elemento h2 </ h2>

document.querySelector ( "H2, H3") style.backgroundColor = "red" .;

Trate »


Páginas relacionadas

Manual de referencia de JavaScript: Elemento .querySelector ()


Documento de Referencia de objetos objetos del documento