Ultimo aggiornamento: 1.11.2015

Per lavorare con la struttura DOM in JavaScript, l'oggetto documento è definito nell'oggetto finestra globale. L'oggetto documento fornisce una serie di proprietà e metodi per manipolare gli elementi della pagina.

Cerca elementi

I seguenti metodi vengono utilizzati per cercare elementi in una pagina:

getElementById(value) : seleziona l'elemento il cui attributo id è uguale a value

getElementsByTagName(value) : seleziona tutti gli elementi il ​​cui tag è uguale a value

getElementsByClassName(value) : seleziona tutti gli elementi che hanno un valore di classe

querySelector(value) : seleziona il primo elemento che corrisponde al valore del selettore css

querySelectorAll(value) : seleziona tutti gli elementi che corrispondono al valore del selettore css

Per esempio, trova elemento per identificazione:

Intestazione del blocco var headerElement = document.getElementById("header"); document.write("Testo intestazione: " + headerElement.innerText);

Chiamando document.getElementById("header") troviamo l'elemento con id="header". E usando la proprietà innerText, puoi ottenere il testo dell'elemento trovato.

Cerca per tag specifico:

intestazione

Primo paragrafo

Secondo paragrafo

var pElements = document.getElementsByTagName("p"); per (var i = 0; i< pElements.length; i++) { document.write("Текст параграфа: " + pElements[i].innerText + "
"); }

Chiamando document.getElementsByTagName("p") troviamo tutti gli elementi paragrafo. Questa chiamata restituisce un array di elementi trovati. Pertanto, per ottenere i singoli elementi dell'array, è necessario eseguirli in un ciclo.

Se abbiamo bisogno di ottenere solo il primo elemento, allora possiamo accedere al primo elemento della raccolta di oggetti trovata:

VarpElement = document.getElementsByTagName("p"); document.write("Testo paragrafo: " + pElement.innerText);

Ottenere un elemento per classe:

Titolo dell'articolo

Primo paragrafo

Secondo paragrafo

var articleDiv = document.getElementsByClassName("articolo"); console.log(articoloDiv); var textElems = document.getElementsByClassName("testo"); per (var i = 0; i< textElems.length; i++) { console.log(textElems[i]); }

Scelta di selettore CSS:

Estratto dell'articolo

Primo paragrafo

Secondo paragrafo

varelem = document.querySelector(".annotation p"); document.write("Testo selettore: " + elem.innerText);

L'espressione document.querySelector(".annotation p") trova un elemento che corrisponde a selector.annotation p . Se nella pagina sono presenti più elementi che corrispondono al selettore, il metodo selezionerà il primo di essi. Di conseguenza, il browser visualizzerà:

Annotazione dell'articolo Primo paragrafo Secondo paragrafo Testo del selettore: Annotazione dell'articolo

Per ottenere tutti gli elementi in un selettore, puoi utilizzare in modo simile il metodo document.querySelectorAll, che restituisce un array degli elementi trovati:

Estratto dell'articolo

Primo paragrafo

Secondo paragrafo

varelems = document.querySelectorAll(".text p"); per (var i = 0; i< elems.length; i++) { document.write("Текст селектора " + i + ": " + elems[i].innerText + "
"); }

Uscita del browser:

Annotazione articolo Primo paragrafo Secondo paragrafo Testo selettore 0: Primo paragrafo Testo selettore 1: Secondo paragrafo

Il metodo JavaScript document .querySelector() restituisce il primo elemento nel documento (un oggetto Element) che corrisponde al selettore specificato o al gruppo di selettori. Se non viene trovata alcuna corrispondenza, viene restituito null.

Attiro la tua attenzione sul fatto che non è consentito utilizzare pseudo-elementi CSS come valore di selezione per la ricerca di elementi, in questo caso il valore restituito sarà sempre null .

Se hai bisogno di un elenco di tutti gli elementi che corrispondono al selettore o ai selettori specificati, usa il metodo querySelectorAll() per questo.

Il metodo .querySelector() è definito anche sull'oggetto Element, motivo per cui può essere chiamato su qualsiasi elemento, non solo sull'oggetto documento. L'elemento su cui viene chiamato verrà utilizzato come elemento radice per la ricerca.

Supporto del browser per la sintassi JavaScript: document .querySelector( selettori) selettori- Valori dei parametri di livello 1 dell'API dei selettori delle specifiche delle stringhe Parametro Descrizione

selettori

L'argomento deve corrispondere a una stringa selettore valida contenente uno o più selettori. Quando si specificano più selettori, è necessario separare i valori con le virgole. In questo caso, verrà selezionato il primo elemento trovato dai selettori dati. Se per qualche motivo usi caratteri nel nome dei selettori che non fanno parte della sintassi standard css, allora tali caratteri devono essere sfuggiti con una barra rovesciata ( "\" ). Poiché anche la barra rovesciata è carattere speciale (fuga) v javascript, quindi quando si immette una stringa letterale, è necessario eseguire l'escape due volte. Parametro obbligatorio.

Eccezioni Esempio di utilizzo Utilizzo del metodo document.querySelector() di JavaScript Fare clic su di me Primo blocco Secondo blocco Terzo blocco funzione myFunc() ( let firstBlock = document .querySelector(".block "), // seleziona l'elemento con la classe block first = document .querySelector( ".first, .block "), // trova il primo elemento dai selettori dati second = document .querySelector("div:nth-of-type(2) "), // seleziona ogni elemento div che è il secondo figlio del proprio elemento genitore third = document .querySelector("div:last-of-type "); // trova ogni elemento div che è l'ultimo elemento del suo elemento genitore firstBlock.style.background = "nero"; // cambia il colore di sfondo dell'elemento Primo.style.color = "rosso"; secondo.style.color = "verde"; // cambia il colore del testo dell'elemento terzo.style.color = "blu"; // cambia il colore del testo dell'elemento )

In questo esempio, stiamo utilizzando l'attributo dell'evento onclick quando si fa clic sul pulsante ( Elemento HTML) chiamiamo la funzione myFunc() , che, utilizzando javascript Il metodo document .querySelector() seleziona i seguenti elementi:

• Primo elemento con blocco di classe nel documento e set nero il colore di sfondo dell'elemento trovato.
• Primo element dai selettori dati (element with class first , element with class block ) e imposta il colore del testo dell'elemento trovato su rosso. In questo caso, verrà selezionato Primo l'elemento trovato dai selettori dati.
• L'elemento che è secondo elemento figlio del suo elemento genitore e impostato su elemento trovato verde colore del testo.
• L'elemento che è l'ultimo elemento del relativo elemento padre e impostato sull'elemento trovato blu colore del testo.

Il risultato del nostro esempio.

Come sai, nello sviluppo di una grande applicazione JS che utilizza la libreria jQuery più popolare, arriva un momento in cui il problema delle prestazioni diventa acuto. Tutte le forze si precipitano alla scappatoia del profiler, ogni chiamata viene esaminata scrupolosamente, ogni pezzo di implementazione funzionalmente caricato viene annusato da tutti i lati e raddrizzato. Ma il problema viene dalla parte sbagliata, dove il 90% degli sviluppatori se lo aspetta. Selettori - Quanti in questa parola.
Diamo un'occhiata a come funziona questa magia e perché le ricerche di elementi DOM possono causare un calo delle prestazioni dell'applicazione.

Come jQuery analizza il selettore La libreria stessa utilizza il motore Sizzle per trovare gli elementi, che ha una serie di funzionalità. Daremo un'occhiata a queste querySelectorAll() I nuovi browser ora hanno le eccellenti funzioni querySelectorAll() e querySelector() che possono cercare elementi utilizzando le capacità del browser (in particolare, quelle utilizzate durante la visualizzazione di CSS e l'assegnazione di proprietà agli elementi) . Lavori data funzione non in tutti i browser, ma solo in FF 3.1+ , IE8+ (solo in modalità standard IE8), Opera 9.5+ (?) e Safari 3.1+ . Quindi Sizzle rileva sempre la presenza di questa funzione e cerca di eseguire qualsiasi ricerca attraverso di essa. Tuttavia, ciò non è privo di sorprese: per utilizzare correttamente querySelectorAll(), il nostro selettore deve essere valido.
Faccio un semplice esempio:
I due selettori mostrati sono praticamente gli stessi e restituiranno lo stesso insieme di elementi. Tuttavia, il primo selettore restituirà il risultato di querySelectorAll() e il secondo restituirà il risultato del normale filtraggio per elementi.
$("#mio_form input")
$("#my_form input") Analisi e ricerca del selettore Se querySelectorAll() fallisce, Sizzle tenterà di utilizzare le normali funzioni del browser getElementById(), getElementsByName(), getElementsByTagName() e getElementByClass(). Nella maggior parte dei casi sono sufficienti, ma (sic!) In IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
In generale, Sizzle analizza il selettore da destra a sinistra. Ecco alcuni esempi per illustrare questa funzione:
$(".divs.mia_classe")
Gli elementi .my_class verranno trovati per primi, quindi solo quelli che hanno .div nei loro genitori verranno filtrati. Come possiamo vedere, questa è un'operazione piuttosto costosa e l'uso del contesto non risolve il problema (parleremo del contesto in seguito).
Come ho detto, nella maggior parte dei casi Sizzle analizzerà il selettore da destra a sinistra, ma non nel caso di utilizzo di un elemento con un ID:
$("#divs.mia_classe")
In questo caso, il selettore si comporterà come previsto e l'elemento #divs verrà immediatamente utilizzato come contesto Contesto Il secondo parametro passato insieme al selettore alla funzione $() è chiamato contesto. È progettato per restringere la ricerca di elementi. Tuttavia, durante l'analisi, il contesto verrà allegato all'inizio del selettore, il che non dà affatto una vittoria. Una combinazione vincente di using context è un selettore valido per querySelectorAll(), poiché questa funzione può essere applicata non solo per conto del documento, ma anche sull'elemento. Quindi il selettore con il contesto viene trasformato figurativamente nella seguente costruzione:
$(".divs", document.getElementById("wrapper"));
document.getElementById("wrapper").querySelectorAll(".divs"); // usa querySelectorAll() se possibile

IN questo esempio se non è possibile utilizzare querySelectorAll(), Sizzle filtrerà gli elementi per semplice iterazione.
Un'altra nota sul contesto (non sui selettori): se il secondo parametro del selettore per la funzione .live() è un oggetto jQuery, l'evento verrà catturato sul documento (!), E se l'oggetto DOM, allora il event apparirà solo su questo elemento . Cerco di non ricordare tali sottigliezze, ma uso .delegate() .

Filtri e gerarchia degli elementi È possibile utilizzare il seguente selettore per cercare gli elementi nidificati:
$(".root > .child")
Come sappiamo, il selettore viene analizzato e la ricerca inizierà su tutti gli elementi .child della pagina (supponendo che querySelectorAll() non sia disponibile). Tale operazione è piuttosto costosa e possiamo trasformare il selettore in questo modo:
$(".child", $(".root")); // l'uso del contesto non renderà più facile la ricerca
$(".root").find(".child"); // perché dobbiamo scorrere tutti gli elementi all'interno di .root?
$(".root").children(".child"); // opzione più corretta

Tuttavia, se è necessario utilizzare filtri su alcuni attributi (:visible, :eq, ecc.) e il selettore ha questo aspetto:
$(".alcune_immagini:visibili")
quindi il filtro verrà applicato per ultimo, ad es. deviamo ancora una volta dalla regola da destra a sinistra.

Risultati

• Quando possibile, usa i selettori appropriati che corrispondono a querySelectorAll()
• Sostituisci le sottoquery all'interno dei selettori con le sottoquery (.children(...) ecc.)
• Perfeziona il contesto del selettore
• Filtra il più piccolo possibile un insieme di elementi già pronti

Selettori veloci a te nel nuovo anno! Tutto in arrivo!

Basato sulla master class

Affinché lo script funzioni con qualche elemento della pagina, questo elemento deve prima essere trovato. Ci sono diversi modi per farlo in JavaScript. L'elemento trovato viene solitamente assegnato a una variabile e successivamente, attraverso questa variabile, lo script accede all'elemento ed esegue alcune azioni con esso.

Cerca per id

Se all'elemento viene assegnato un attributo id nel codice della pagina, l'elemento può essere trovato tramite id. Questo è il modo più semplice. L'elemento viene cercato utilizzando il metodo getElementById() dell'oggetto globale del documento.

documento.getElementById(id)

Opzioni:

id - l'id dell'elemento da trovare. id è una stringa, quindi deve essere tra virgolette.

Creiamo una pagina, aggiungiamo un elemento ad essa e diamogli un id , e troviamo questo elemento nello script:

Codice HTML:

javascript:

var blocco = document.getElementById("blocco"); log della console(blocco);

Abbiamo assegnato l'elemento trovato alla variabile di blocco e visualizzato la variabile nella console. Apri la console del browser, dovrebbe contenere l'elemento.

Poiché la ricerca per ID è la più semplice e strada conveniente, lo usano spesso. Se devi lavorare con qualche elemento in uno script, l'attributo id è impostato per questo elemento nel codice della pagina, anche se non è stato impostato prima. E trova l'elemento per id.

Cerca per classe

Il metodo getElementsByClassName() consente di trovare tutti gli elementi appartenenti a una determinata classe.

documento.getElementsByClassName(classe)

Opzioni:

class - classe di elementi da trovare

Il metodo restituisce uno pseudo-array contenente gli elementi trovati. Si chiama pseudo-array perché molti metodi di array non funzionano per questo. Ma la proprietà principale rimane: puoi fare riferimento a qualsiasi elemento dell'array. Anche se viene trovato un solo elemento, è ancora nell'array.

Aggiungiamo elementi alla pagina e diamo loro una classe. Alcuni degli elementi verranno posizionati all'interno del blocco che abbiamo creato in precedenza. L'altra parte verrà creata all'esterno del blocco. Il significato di questo diventerà chiaro un po 'più tardi. Ora la pagina sarà simile a questa:

Codice HTML:

javascript:

Ora vengono trovati solo gli elementi che si trovano nel blocco.

Cerca per etichetta

Il metodo getElementsByTagName() trova tutti gli elementi con un tag specifico. Restituisce anche uno pseudo-array con gli elementi trovati.

document.getElementsByTagName (tag)

Opzioni:

tag - tag degli elementi da trovare

Troviamo tutti i tag p presenti nella pagina:

var p = document.getElementsByTagName("p"); log della console(p);

Questo metodo può anche essere applicato non all'intero documento, ma a un elemento specifico. Trova tutti i tag p nel blocco.

Cerca per selettore

Esistono metodi querySelector() e querySelectorAll() che trovano elementi che corrispondono a un determinato selettore. In altre parole, verranno trovati gli elementi a cui sarebbe stato applicato lo stile se fosse stato specificato in tale selettore. Allo stesso tempo, la presenza di un tale selettore nello stile della pagina non è affatto necessaria. Questi metodi non hanno nulla a che fare con i CSS. Il metodo querySelectorAll() trova tutti gli elementi che corrispondono al selettore. E il metodo querySelector() trova un elemento, che è il primo elemento nel codice della pagina. Questi metodi possono sostituire tutti i modi per trovare gli elementi discussi in precedenza, perché c'è un selettore di id, un selettore di tag e molti altri.

documento.querySelector(selettore)

document.querySelectorAll(selettore)

I selettori sono scritti allo stesso modo dei CSS, ma non dimenticare di mettere le virgolette.

Aggiungiamo un elenco alla pagina e lo troviamo tramite il selettore. Stiamo cercando un solo elemento e sappiamo per certo che sarà il primo, perché è l'unico sulla pagina. Pertanto, dentro questo casoè più conveniente utilizzare il metodo querySelector(). Ma quando si utilizza questo metodo, è necessario tenere conto del fatto che gli stessi elementi possono essere aggiunti alla pagina in futuro. Tuttavia, questo vale per la maggior parte dei metodi.

Codice HTML:

Questi metodi possono anche cercare elementi non nell'intero documento, ma all'interno di un singolo elemento.

Nell'esempio, abbiamo utilizzato solo i selettori per tag. Prova a trovare gli elementi della pagina utilizzando altri selettori.

Elementi adiacenti

Per l'elemento trovato, puoi trovare i vicini. Ogni elemento è un oggetto e gli elementi vicini possono essere ottenuti tramite le proprietà di questo oggetto. La proprietà previousElementSibling contiene l'elemento precedente e la proprietà nextElementSibling contiene l'elemento successivo.

element.previousElementSibling

element.nextElementSibling

Trova l'elemento che segue il blocco:

Elementi figlio

La proprietà children contiene un array di figli.

elemento.bambini

Trova gli elementi figlio del blocco.

Un'attività che viene spesso affrontata dagli sviluppatori javascript inesperti è selezionare un elemento su una pagina Web tramite il suo attributo id.

Diciamo che abbiamo il codice su una pagina.

Blocca il contenuto.

Come posso selezionare un elemento con id="elem" ed eseguire alcune azioni con esso?

Ci sono diverse opzioni per risolvere il problema qui. Diamo un'occhiata a loro ora.

Opzione 1. Usa Metodo Javascript getElementById.

C'è un modo per fare riferimento a un elemento tramite il suo id usando codice javascript "puro", senza usare librerie di terze parti. Questo metodo consiste nell'usare il metodo ggetElementById("element_id"). Pertanto, ci riferiamo all'elemento di cui abbiamo bisogno con il suo id.

Vediamo come funziona con un semplice esempio.

Blocca il contenuto. alert(document.getElementById("elem").innerHTML);

Si noti che queste righe di codice (script) si trovano sotto l'elemento stesso. Questo è un prerequisito per il funzionamento di questo script, perché. Il codice Javascript viene eseguito al caricamento della pagina. Se inseriamo il codice sopra, faremo riferimento a un elemento della pagina che non è ancora stato caricato, ad es. non sarà nel codice al momento dell'esecuzione dello script. Ci sono modi per evitarlo, ma questo va oltre lo scopo di questo articolo.

Di conseguenza, se tutto funziona correttamente, otterremo una finestra pop-up. Questa finestra visualizzerà il testo che si trova all'interno del blocco div.

Vediamo ora come risolvere questo problema in modo diverso.

Opzione 2: utilizzo librerie jquery.

La seconda opzione per selezionare un elemento in base al suo id è utilizzare la libreria Jquery. In pratica, negli script moderni, questo metodo viene utilizzato più spesso. È molto più conveniente e più facile da ricordare.

Per fare riferimento a un elemento tramite il suo id, è necessario utilizzare la costruzione:

$("#elem")

Qui elem è il nome contenuto nell'attributo id.

Perché Poiché utilizzeremo una libreria Javascript di terze parti chiamata Jquery, questa libreria deve essere prima inclusa.

Viene aggiunto nella sezione, un modo per farlo è aggiungere la seguente riga di codice:

Affinché la libreria possa essere caricata, deve essere presente una connessione Internet.

Blocca il contenuto. alert($("#elem").html());

Lo script stesso, come nell'esempio precedente, dovrebbe trovarsi sotto il codice dell'elemento con cui si vuole interagire.

Pertanto, abbiamo analizzato due modi in cui è possibile selezionare un elemento su una pagina Web tramite il suo attributo id e interagire con esso. Scegli il metodo che fa per te e usalo nella pratica.