HTML DOM querySelector método ()

Ejemplos

El primer elemento de Identificación del niño contenido de texto de modificación = "demo" del elemento <div>:

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

Definición y Uso

querySelector () devuelve el elemento selector CSS especificado primer hijo elemento coincidente.

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

Para más selectores CSS, se puede visitar nuestros 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

.querySelector elemento (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 elementos de objeto
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

Modificar elemento <div> en el contenido de la primera <p> del elemento:

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

Trate »

Ejemplos

Modificar <div> en la primera clase = "ejemplo" contenido sub-elemento:

var x = document.getElementById ( "myDiv");
x.querySelector ( "ejemplo"). innerHTML = "Hello World!" .;

Trate »

Ejemplos

Modificar <div> en la primera clase = "ejemplo" del elemento <p>:

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

Trate »

Ejemplos

Añadir borde rojo como un elemento <div> tiene elementos de un primer atributo de destino <a>:

var x = document.getElementById ( "myDiv");
. X.querySelector ( "un [objetivo]") style.border = "10px sólido rojo";

Trate »

Ejemplos

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

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

Los primeros <h2> elemento para el elemento siguiente código <div> para añadir un color de fondo:

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

Trate »

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

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

Trate »