Latest web development tutorials

Metodo HTML DOM querySelector ()

Document Object Reference Document Object

Esempi

Prendi il primo elemento della id = documento di "demo" di:

document.querySelector ( "# demo");

Prova »

Definizione e utilizzo

querySelector () restituisce un elemento nel documento che corrisponde al selettore CSS specificato.

Nota: Metodo querySelector () restituisce semplicemente il primo elemento che corrisponde il selettore specificato. Se avete bisogno di restituire tutti gli elementi, utilizzare il metodo querySelectorAll () invece.

Più selettori CSS, si prega di visitare il nostro selettori CSS tutorial contenuti e le nostre selettori CSS manuale di riferimento .


Supporto per il browser

I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione metodo.

modo
querySelector () 4.0 8.0 3.5 3.1 10.0


grammatica

document.querySelector (selettori CSS)

Valore parametro

parametri tipo descrizione
selettori CSS stringa Must. Specificare uno o più elementi corrispondenti nel selettori CSS. È possibile utilizzare il proprio ID, classi, tipi, attributi, valori degli attributi, ecc per selezionare gli elementi.

Per più selettori separati da virgole, per restituire un elemento corrispondente.

Suggerimento: per ulteriori selettori CSS, si prega di vedere i nostri selettori CSS manuale di riferimento .

dettagli tecnici

Versione DOM: Livello selettori Oggetto 1 Documento
Ritorni: Il primo elemento corrispondente specificato selettore CSS. Se non viene trovato, restituisce null. Se si specifica viene generata un'eccezione selettore SYNTAX_ERR valido.


Altri esempi

Esempi

Essendo il primo documento in un elemento <p>:

document.querySelector ( "p");

Prova »

Esempi

Prendi il classe di documento = "esempio" il primo elemento:

document.querySelector ( "esempio.");

Prova »

Esempi

Prendi il classe di documento = "esempio" il primo elemento <p>:

document.querySelector ( "p.example");

Prova »

Esempi

Prendi il documento è "target" attributo primi elementi <a>:

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

Prova »

Esempi

Il seguente esempio illustra l'utilizzo di una pluralità di selettori.

Supponiamo di scegliere i due selettori: <h2> e <h3> elemento.

Il primo <h2> elemento nel seguente codice aggiungerà un colore di sfondo del documento:

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

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

Prova »

Tuttavia, se il documento <h3> è <h2> elemento prima, <h3> elemento saranno impostati per specificare il colore di sfondo.

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

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

Prova »


Pagine correlate

JavaScript Manuale di riferimento: Elemento .querySelector ()


Document Object Reference Document Object