Il DOM viene spesso definito albero DOM perché è costituito da un albero di oggetti chiamati nodi. In hai imparato cos'è il Document Object Model (DOM), come accedere all'oggetto documento e modificarne le proprietà utilizzando la console, e abbiamo anche appreso la differenza tra codice sorgente HTML e DOM.
In questo manuale troverai la terminologia HTML necessaria per lavorare con JavaScript e il DOM, scopri cos'è un albero e Nodi DOM e impara a identificare i tipi di nodo più comuni. Puoi anche creare un programma JavaScript nella console per modificare interattivamente il DOM.
Terminologia HTMLComprendere i termini HTML e JavaScript è fondamentale per lavorare con il DOM. Diamo una rapida occhiata ai termini principali.
Guarda questo elemento HTML:
Casa
Ha un ancoraggio, che è un collegamento a index.html.
Tutto ciò che si trova tra i tag di apertura e chiusura è un elemento HTML.
Torniamo al file index.html del tutorial precedente:
Imparare il DOM
Modello a oggetti documento
Il modo più semplice per accedere a un elemento con JavaScript è con l'attributo id. Aggiungiamo il link sopra al file index.html con id="nav".
...
Modello a oggetti documento
Casa
...
Carica (o aggiorna) la pagina in una finestra del browser e controlla il DOM per assicurarti che il codice sia stato aggiornato.
Quindi utilizzare il metodo getElementById() per accedere all'intero elemento. Inserisci quanto segue nella console:
document.getElementById("nav");
Casa
Il metodo getElementById() recupererà l'intero elemento. Ora, invece di dover digitare questo oggetto e metodo ogni volta che è necessario accedere al collegamento nav, è possibile inserire l'elemento in una variabile per semplificare il lavoro.
let navLink = document.getElementById("nav");
La variabile navLink contiene l'ancora. Qui puoi facilmente modificare attributi e valori. Ad esempio, per modificare la posizione di un collegamento, modificare l'attributo href:
navLink.href = "https://www.wikipedia.org";
Puoi anche modificare il testo riassegnando la proprietà textContent:
navLink.textContent = "Vai a Wikipedia";
Ora, se visualizzi questo elemento nella console o controlli il tag Elements, vedrai come è stato aggiornato.
collegamento di navigazione;
Vai a Wikipedia
Le modifiche si rifletteranno anche sul front-end.
L'aggiornamento della pagina restituirà tutti i valori originali.
A questo punto, dovresti capire come utilizzare il metodo document per accedere a un elemento, come assegnare un elemento a una variabile e come modificare proprietà e valori su un elemento.
Albero e nodi DOMTutti gli elementi nel DOM sono definiti come nodi. Esistono molti tipi di nodi, ma ce ne sono tre principali con cui lavorerai più spesso:
Quando un elemento HTML è un elemento nel DOM, viene chiamato nodo elemento. Qualsiasi singolo testo al di fuori di un elemento è un nodo di testo e Commento HTML– un nodo di commento. A parte questi tre tipi di nodi, l'oggetto documento stesso è il nodo documento, che è il nodo radice di tutti gli altri nodi.
Il DOM è costituito da una struttura ad albero di nodi nidificati, spesso indicata come albero DOM. Probabilmente sai cos'è un albero genealogico: è una rappresentazione schematica dei legami familiari, che consiste di genitori, figli e parenti stretti. I nodi nel DOM sono anche chiamati nodi padre e figlio in base alla loro relazione con altri nodi.
Ad esempio, crea un file nodes.html. aggiungi un nodo di testo ad esso, così come i nodi di commento ed elemento.
Informazioni sui nodi
Un elemento nodo
Un nodo di testo.
Il nodo dell'elemento html è il genitore. head e body sono nodi figlio html. body contiene tre nodi figlio e sono tutti allo stesso livello: il tipo di nodo non influisce sul livello di annidamento.
Nota: quando si lavora con DOM generato da HTML, padding codice sorgente L'HTML crea molti nodi di testo vuoti che non saranno visibili nella scheda Elementi di DevTools. Maggiori informazioni su questo al link.
Definizione del tipo di nodoOgni nodo in un documento ha un tipo, a cui si accede tramite la proprietà nodeType. Il Mozilla Developer Network ha un elenco aggiornato di tutte le costanti del tipo di nodo. Di seguito è riportata una tabella dei tipi di nodo più comuni.
Nella scheda Elementi degli Strumenti per sviluppatori, potresti notare che ogni volta che fai clic e selezioni una qualsiasi riga nel DOM, accanto ad essa viene visualizzato il valore == $0. Questo è molto strada conveniente accedere all'elemento attivo corrente.
Nella console node.html, fai clic sul primo elemento nel corpo (h1).
Utilizzando la console, scopri il tipo di nodo selezionato utilizzando la proprietà nodeType.
$0.nodoTipo;
1
Selezionando l'elemento h1, vedrai 1 come output, che fa riferimento a ELEMENT_NODE. Fai lo stesso con altri nodi e restituiranno rispettivamente 3 e 8.
Sapendo come accedere a un elemento, puoi vedere il tipo di nodo senza evidenziare gli elementi nel DOM.
documento.corpo.nodoTipo;
1
Oltre a nodeType, puoi anche utilizzare la proprietà nodeValue per ottenere il valore di un nodo di testo o di commento e nodeName per ottenere il tag dell'elemento.
Cambiare il DOM con EventiFinora si è visto come modificare il DOM nella console e si sa che tali modifiche sono temporanee; ogni volta che la pagina viene aggiornata, tutte le modifiche vengono perse. In hai aggiornato il colore di sfondo della pagina nella console. Prova a combinare ciò che hai imparato in questo tutorial con ciò che già sai per creare un pulsante interattivo che cambia il colore di sfondo.
Torna al file index.html e aggiungi un elemento pulsante con un id. È inoltre necessario aggiungere un collegamento al nuovo file nella nuova directory js js/scripts.js.
Imparare il DOM
Modello a oggetti documento
Cambia colore di sfondo
Un evento in JavaScript è un'azione eseguita dall'utente. L'utente passa con il mouse su un elemento, fa clic su di esso o preme un determinato tasto sulla tastiera: questi sono tutti eventi. In questo caso particolare, il pulsante deve eseguire un'azione quando l'utente fa clic su di esso. Per fare ciò, è necessario aggiungere un listener di eventi. Crea un file scripts.js e salvalo in una nuova directory js. È necessario definire un elemento pulsante nel file e assegnarlo a una variabile.
Utilizzando il metodo addEventListener(), il pulsante ascolterà i clic ed eseguirà la sua funzione dopo il clic.
...
button.addEventListener("clic", () => (
// l'azione andrà qui
});
All'interno della funzione, è necessario inserire il codice del manuale precedente per cambiare il colore di sfondo in fucsia.
...
Ecco come appare lo script:
let button = document.getElementById("changeBackground");
button.addEventListener("clic", () => (
document.body.style.backgroundColor = "fucsia";
});
Salva e chiudi il file. Aggiorna la pagina index.html nel browser. Fare clic sul nuovo pulsante e il colore di sfondo della pagina cambierà.
Tag: ,Lo strumento principale per lavorare e modificare dinamicamente la pagina è il DOM (Document Object Model) - un modello a oggetti utilizzato per i documenti XML/HTML.
Secondo il modello DOM, un documento è una gerarchia.
Ogni tag HTML forma un elemento nodo separato, ogni pezzo di testo forma un elemento di testo e così via.
In poche parole, il DOM è una rappresentazione di un documento come un albero di tag. Questo albero è formato da una struttura nidificata di tag più frammenti di testo della pagina, ciascuno dei quali forma un nodo separato.
Il DOM più sempliceCostruiamo, per cominciare, l'albero DOM per il prossimo documento.
Intestazione Bel documento
Il tag più esterno è , quindi l'albero inizia a crescere da esso.
All'interno ci sono due nodi: e - diventano nodi figlio per .
Modulo tag nodi elemento(nodo elemento). Testo inviato nodi di testo(nodo di testo). Entrambi sono nodi peer dell'albero DOM.
Esempio più complicatoConsideriamo ora una pagina più vitale:
A proposito di alci La verità su alci.
L'elemento radice della gerarchia è html . Ha due discendenti. Il primo è la testa, il secondo è il corpo. E così via, ogni tag nidificato è figlio del tag precedente:
In questa figura, gli elementi-nodi sono contrassegnati in blu, gli elementi di testo sono contrassegnati in nero.
L'albero è formato da elementi nodo blu - tag HTML.
Ed ecco come appare l'albero se lo disegni direttamente sulla pagina HTML:
A proposito, l'albero in questa figura non tiene conto del testo costituito solo da spazi bianchi. Ad esempio, un tale nodo di testo dovrebbe venire immediatamente dopo . Viene chiamato DOM che non contiene tali nodi "vuoti". "normalizzato".
Diamo un'occhiata a un documento leggermente più complesso.
Documento dati
Il tag superiore è html , ha figli head e body e così via. Il risultato è un albero di tag:
Attributi
In questo esempio, i nodi hanno attributi: style , class , id . In generale, gli attributi sono anche considerati nodi nel DOM il cui genitore è l'elemento DOM su cui sono specificati.
Tuttavia, nella programmazione web, queste giungle solitamente non vengono scalate, e gli attributi sono considerati semplicemente proprietà del nodo DOM, che, come vedremo in seguito, possono essere impostate e modificate su richiesta del programmatore.
In realtà, questo è un segreto, ma DOCTYPE è anche un nodo DOM e si trova nell'albero DOM a sinistra dell'HTML (questo fatto è nascosto nella figura).
P.S. Per quanto riguarda il segreto, ovviamente uno scherzo, ma non tutti lo sanno davvero. È difficile immaginare dove tale conoscenza possa essere utile...
Normalizzazione in vari browserQuando si analizza HTML Internet Explorer crea immediatamente normalizzato DOM che non crea nodi da testo vuoto.
Firefox ha un'opinione diversa, crea un elemento DOM da ogni frammento di testo.
Pertanto, in Firefox, l'albero di questo documento si presenta così:
Nella figura, per brevità, i nodi di testo sono semplicemente indicati da un hash. corpo ha 7 figli invece di 3.
Anche l'opera ha qualcosa di cui vantarsi. Può aggiungere un ulteriore elemento vuoto "solo da se stessa".
Per vederlo, apri il documento. Restituisce il numero di nodi figlio di document.body , inclusi i nodi di testo.
Ottengo 3 per IE, 7 per Firefox e 8 (!?) per Opera.
In pratica questa incompatibilità non crea grossi problemi, ma bisogna ricordarsene. Ad esempio, la differenza può manifestarsi nel caso dell'enumerazione dei nodi dell'albero.
Il potere del DOMPerché, oltre ai bei disegni, abbiamo bisogno di un modello DOM gerarchico?
Molto semplice:
Ogni elemento DOM è un oggetto e fornisce proprietà per manipolarne il contenuto, per accedere a genitori e figli.
L'oggetto documento viene utilizzato per la manipolazione del DOM.
Utilizzando document , puoi ottenere l'elemento desiderato dell'albero e modificarne il contenuto.
Ad esempio, questo codice prende il primo elemento con il tag ol, rimuove due elementi della lista in sequenza e poi li aggiunge in ordine inverso:
Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)
Per un esempio del lavoro di tale script, fai clic sul testo nella pagina dell'alce
Nei manuali e negli script precedenti, potresti vedere modifiche al codice HTML della pagina chiamando direttamente document.write .
Negli script moderni, questo metodo non viene quasi mai utilizzato, casi di esso corretta applicazione si possono contare sulle dita.
Evita document.write .. A meno che tu non sappia davvero cosa stai facendo (e perché stai leggendo un tutorial - sei già un guru)
Diamo un'occhiata più da vicino ai metodi di accesso e alle proprietà degli elementi DOM.
Accesso agli elementiTutti gli accessi e le modifiche al DOM provengono dall'oggetto documento.
Cominciamo dalla cima dell'albero.
documento.documentElementEtichetta superiore. Nel caso di una pagina HTML valida, questo sarebbe .
corpo del documentoIl tag, se presente nel documento (deve essere).
L'esempio seguente, quando si fa clic sul pulsante, visualizzerà la rappresentazione testuale degli oggetti document.documentElement e document.body. La stringa stessa dipende dal browser, sebbene gli oggetti siano gli stessi ovunque.
funzione go() ( alert(document.documentElement) alert(document.body) )
Tipi di elementi DOMOgni elemento nel DOM ha un tipo. Il suo numero è memorizzato nell'attributo elem.nodeType
In totale, ci sono 12 tipi di elementi nel DOM.
Di solito ne viene utilizzato solo uno: Node.ELEMENT_NODE , il cui numero è 1. I tag HTML corrispondono a elementi di questo tipo.
A volte è utile anche il tipo Node.TEXT_NODE, che è uguale a 3. Questi sono elementi di testo.
Altri tipi dentro programmazione javascript non vengono utilizzati.
L'esempio seguente, quando si fa clic sul pulsante, stamperà i tipi di document.documentElement , quindi il tipo dell'ultimo figlio del nodo document.body. È un nodo di testo.
function go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) ) Testo
EsempioAd esempio, questo è l'aspetto che avrebbe il documento dell'esempio precedente in un browser se ogni elemento visibile fosse incorniciato con un numero nodeType nell'angolo in alto a destra.
... Dati
Qui vengono mostrati solo gli elementi all'interno del corpo, in quanto sono gli unici visualizzati nella pagina. Per gli elementi di tipo 1 (tag) il tag corrispondente è indicato tra parentesi, per gli elementi di testo (tipo 3) è solo un numero.
Elementi figlioL'esempio seguente scorre tutti i figli di document.body .
For(var i=0; i CORPO
stileQuesta proprietà controlla lo stile. È simile all'impostazione di uno stile in CSS.
Ad esempio, puoi impostare element.style.width :
Codice sorgente per questo pulsante:
Mangiare regola generale sostituzioni: se l'attributo CSS ha trattini, per impostare lo stile è necessario sostituirli con maiuscolo lettere.
Ad esempio, per impostare la proprietà z-index su 1000, dovresti impostare:
element.style.zIndex = 1000
innerHTMLQuesta proprietà una volta era supportata solo in IE. Ora è supportato da tutti i browser moderni.
Contiene tutto l'HTML all'interno del nodo e può essere modificato.
La proprietà innerHTML viene utilizzata principalmente per modificare dinamicamente il contenuto di una pagina, ad esempio:
Document.getElementById("footer").innerHTML = "Ciao!"
Forse innerHTML è una delle proprietà dell'elemento DOM più comunemente utilizzate.
nome della classeQuesta proprietà specifica la classe dell'elemento. È del tutto analogo all'attributo "classe" html.
Elem.className = "nuovaclasse"
onclick, onkeypress, onfocus...E altre proprietà che iniziano con "on..." memorizzano le corrispondenti funzioni del gestore eventi. Ad esempio, puoi assegnare un gestore eventi onclick.
Per ulteriori informazioni su queste proprietà e gestori di eventi, vedere
Lavorare con il modello DOM
Ogni oggetto Window ha una proprietà del documento che fa riferimento a un oggetto Document. Questo oggetto Document non è un oggetto autonomo. È l'oggetto centrale di una ricca API nota come Document Object Model (DOM), che definisce come si accede al contenuto di un documento.
Panoramica del DOMIl Document Object Model (DOM) è un'interfaccia di programmazione applicativa fondamentale che offre la possibilità di lavorare con il contenuto di documenti HTML e XML. L'API (Application Programming Interface) DOM non è particolarmente complessa, ma ci sono molte caratteristiche architettoniche di cui dovresti essere a conoscenza.
Prima di tutto, dovrebbe essere chiaro che gli elementi nidificati di documenti HTML o XML sono rappresentati come un albero di oggetti DOM. La vista ad albero di un documento HTML contiene nodi che rappresentano elementi o tag come e
E nodi che rappresentano righe di testo. Un documento HTML può anche contenere nodi che rappresentano commenti HTML. Considera il seguente semplice documento HTML:
Documento di esempio Questo è un documento HTML
Esempio semplice testo.
La rappresentazione DOM di questo documento è mostrata nel diagramma seguente:
Per coloro che non hanno ancora familiarità con le strutture ad albero nella programmazione dei computer, è utile sapere che la terminologia per descriverle è stata presa in prestito dagli alberi genealogici. Viene chiamato il nodo immediatamente sopra il nodo dato parentale rispetto a questo nodo. I nodi che sono un livello sotto un altro nodo lo sono filiali rispetto a questo nodo. Vengono chiamati i nodi che sono allo stesso livello e hanno lo stesso genitore fraterno. I nodi situati a qualsiasi numero di livelli sotto un altro nodo sono i suoi figli. Genitore, nonno e qualsiasi altro nodo sopra questo nodo sono i suoi antenati.
Ogni rettangolo in questo diagramma è un nodo del documento, rappresentato da un oggetto Node. Si prega di notare che la figura mostra tre vari tipi nodi. La radice dell'albero è il nodo Documento, che rappresenta l'intero documento. I nodi che rappresentano elementi HTML sono nodi di tipo Element, mentre i nodi che rappresentano testo sono nodi di tipo Text. Document, Element e Text sono sottoclassi della classe Node. Documento ed Elemento sono le due classi più importanti nel DOM.
Il tipo Node e i suoi sottotipi formano la gerarchia dei tipi mostrata nel diagramma seguente. Notare le differenze formali tra i tipi generici Document ed Element ei tipi HTMLDocument e HTMLElement. Il tipo Document rappresenta un documento HTML e XML e la classe Element rappresenta un elemento di quel documento. Le sottoclassi HTMLDocument e HTMLElement rappresentano specificamente un documento HTML e i suoi elementi:
In questo diagramma, va anche notato che un largo numero sottotipi della classe HTMLElement che rappresentano tipi concreti di elementi HTML. Ognuno di questi definisce le proprietà JavaScript che riflettono gli attributi HTML di un particolare elemento o gruppo di elementi. Alcune di queste classi specifiche definiscono proprietà o metodi aggiuntivi che non riflettono la sintassi del linguaggio di markup HTML.
Selezione degli elementi del documentoIl funzionamento della maggior parte dei programmi client su javascript in qualche modo legato alla manipolazione degli elementi del documento. Durante l'esecuzione, questi programmi possono utilizzare la variabile globale document, che fa riferimento all'oggetto Document. Tuttavia, per eseguire qualsiasi manipolazione sugli elementi del documento, il programma deve in qualche modo ottenere, o selezionare, gli oggetti Element che fanno riferimento a quegli elementi del documento. Il DOM definisce diversi modi per selezionare gli elementi. Puoi selezionare uno o più elementi di un documento:
dal valore dell'attributo id;
dal valore dell'attributo name;
per nome tag;
dal nome della classe o delle classi CSS;
in linea con un certo Selettore CSS.
Tutte queste tecniche di selezione degli elementi sono descritte nelle seguenti sottosezioni.
Selezione di elementi in base al valore dell'attributo idTutti gli elementi HTML hanno attributi id. Il valore di questo attributo deve essere univoco all'interno del documento - due elementi nello stesso documento non devono avere lo stesso valore dell'attributo id. Seleziona elemento per valore unico l'attributo id può essere eseguito utilizzando il metodo getElementById() dell'oggetto Document:
Var sezione1 = document.getElementById("sezione1");
Questo è il modo più semplice e più comune per selezionare gli elementi. Se lo script deve essere in grado di manipolare un insieme specifico di elementi del documento, assegna valori agli attributi id di quegli elementi e usa la possibilità di cercarli in base a quei valori.
IN Versioni Internet Explorer sotto il metodo getElementById() di IE8 cerca i valori dell'attributo id senza distinzione tra maiuscole e minuscole e restituisce anche elementi che corrispondono al valore dell'attributo name.
Selezione di elementi in base al valore dell'attributo nameL'attributo del nome HTML era originariamente destinato a denominare gli elementi del modulo e il valore di questo attributo veniva utilizzato quando i dati del modulo venivano inviati al server. Come l'attributo id, l'attributo name assegna un nome a un elemento. Tuttavia, a differenza di id, il valore dell'attributo name non deve essere univoco: più elementi possono avere lo stesso nome contemporaneamente, il che è abbastanza comune quando viene utilizzato nei pulsanti di opzione e nei moduli delle caselle di controllo. Inoltre, a differenza di id, l'attributo name è consentito solo su determinati elementi HTML, inclusi form, elementi form ed elementi and .
È possibile selezionare gli elementi HTML in base ai valori dei loro attributi del nome utilizzando il metodo getElementsByName() dell'oggetto Document:
Var radiobuttons = document.getElementsByName("favorite_color");
Il metodo getElementsByName() non è definito dalla classe Document, ma dalla classe HTMLDocument, quindi è disponibile solo nei documenti HTML e non nei documenti XML. Restituisce un oggetto NodeList che si comporta come un array di sola lettura di oggetti Element.
In IE, il metodo getElementsByName() restituisce anche elementi i cui valori dell'attributo id corrispondono al valore specificato. Per garantire la compatibilità con diverse versioni browser, è necessario fare attenzione nella scelta dei valori degli attributi e non utilizzare le stesse stringhe per i valori degli attributi name e id.
Selezione di elementi per tipoIl metodo getElementsByTagName() dell'oggetto Document consente di selezionare tutti gli elementi HTML o XML del tipo specificato (o per nome di tag). Ad esempio, per ottenere un oggetto simile a un array di sola lettura contenente gli oggetti Element di tutti gli elementi nel documento, puoi eseguire le seguenti operazioni:
var spans = document.getElementsByTagName("span");
Come il metodo getElementsByName(), getElementsByTagName() restituisce un oggetto NodeList. Gli elementi del documento sono inclusi nell'array NodeList nello stesso ordine in cui appaiono nel documento, ad es. primo elemento
In un documento puoi scegliere:
Var firstParagraph = document.getElementsByTagName("p");
I nomi dei tag HTML non fanno distinzione tra maiuscole e minuscole e quando getElementsByTagName() viene applicato a un documento HTML, confronta il nome del tag senza fare distinzione tra maiuscole e minuscole. La variabile spans creata sopra, ad esempio, includerà anche tutti gli elementi scritti come .
È possibile ottenere una NodeList contenente tutti gli elementi in un documento passando il carattere jolly "*" al metodo getElementsByTagName().
Inoltre, la classe Element definisce anche il metodo getElementsByTagName(). Agisce esattamente come la versione del metodo nella classe Document, ma seleziona solo gli elementi figli dell'elemento su cui viene chiamato il metodo. Cioè, trova tutti gli elementi all'interno del primo elemento
È possibile come segue:
Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");
Per ragioni storiche, la classe HTMLDocument definisce proprietà speciali per l'accesso a determinati tipi di nodi. Proprietà immagini, forme E link, ad esempio, fanno riferimento a oggetti che si comportano come array di sola lettura contenenti elementi , E (ma solo quei tag , che hanno un attributo href). Queste proprietà fanno riferimento agli oggetti HTMLCollection, che sono molto simili agli oggetti NodeList, ma possono essere ulteriormente indicizzati dai valori degli attributi id e name.
L'oggetto HTMLDocument definisce anche proprietà sinonime di incorporamenti e plug-in, che sono raccolte di elementi HTMLCollection. La proprietà anchors non è standard, ma può essere utilizzata per accedere agli elementi A che ha un attributo name ma nessun attributo href. La proprietà scripts è definita dallo standard HTML5 ed è una raccolta di elementi HTMLCollection.
Inoltre, l'oggetto HTMLDocument definisce due proprietà, ciascuna delle quali non fa riferimento a una raccolta, ma a un singolo elemento. La proprietà document.body rappresenta un elemento del documento HTML e la proprietà document.head rappresenta il file . Queste proprietà sono sempre definite nel documento: anche se non ci sono elementi e nel documento originale, il browser le creerà implicitamente. La proprietà documentElement dell'oggetto Document fa riferimento all'elemento radice del documento. Nei documenti HTML, rappresenta sempre l'estensione .
Selezione di elementi per classe CSSIl valore dell'attributo della classe HTML è un elenco di zero o più identificatori separati da spazi. Consente di definire insiemi di elementi del documento correlati: tutti gli elementi che hanno lo stesso identificatore nell'attributo di classe fanno parte dello stesso insieme. La parola class è riservata in JavaScript, quindi JavaScript lato client utilizza la proprietà className per archiviare il valore dell'attributo class HTML.
In genere, l'attributo class viene utilizzato insieme ai fogli di stile CSS per applicare uno stile di visualizzazione comune a tutti i membri di un insieme. Tuttavia, in aggiunta, lo standard HTML5 definisce il metodo getElementsByClassName(), che consente di selezionare insiemi di elementi del documento in base agli identificatori nei relativi attributi di classe.
Come il metodo getElementsByTagName(), il metodo getElementsByClassName() può essere chiamato sia su documenti HTML che su elementi HTML e restituisce un oggetto NodeList "attivo" contenente tutti i discendenti di documenti o elementi che corrispondono ai criteri di ricerca.
Il metodo getElementsByClassName() accetta un singolo argomento stringa, ma la stringa stessa può contenere più identificatori separati da spazi. Tutti gli elementi i cui attributi di classe contengono tutti gli identificatori specificati verranno considerati corrispondenti. L'ordine degli identificatori non ha importanza. Si noti che sia nell'attributo class che nell'argomento del metodo getElementsByClassName(), gli identificatori di classe sono separati da spazi, non da virgole.
Di seguito sono riportati alcuni esempi di utilizzo del metodo getElementsByClassName():
// Trova tutti gli elementi con la classe "warning" var warnings = document.getElementsByClassName("warning"); // Trova tutti i discendenti dell'elemento con id "log" // con le classi "error" e "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("errore fatale");
Selezione di elementi utilizzando i selettori CSSI fogli di stile CSS CSS hanno costrutti sintattici molto potenti noti come selettori che consentono di descrivere elementi o insiemi di elementi in un documento. Insieme alla standardizzazione dei selettori CSS3, definisce un altro standard W3C noto come Selectors API Metodi javascript per ottenere elementi che corrispondono al selettore specificato.
La chiave di questa API è il metodo querySelectorAll() dell'oggetto Document. Prende un singolo argomento stringa con un selettore CSS e restituisce un oggetto NodeList che rappresenta tutti gli elementi nel documento che corrispondono al selettore.
Oltre al metodo querySelectorAll(), l'oggetto documento definisce anche un metodo querySelector(), simile a un metodo querySelectorAll(), con la differenza che restituisce solo il primo elemento corrispondente (nell'ordine del documento) o null se non ci sono elementi corrispondenti.
Questi due metodi sono definiti anche dalla classe Elements. Quando vengono chiamati su un elemento, nell'intero documento viene cercata una corrispondenza con il selettore dato, quindi il risultato viene filtrato in modo che rimangano solo i discendenti dell'elemento utilizzato. Questo approccio può sembrare controintuitivo, in quanto significa che la stringa del selettore può includere gli antenati dell'elemento da abbinare.
Struttura del documento e navigazione del documentoDopo aver selezionato un elemento del documento, a volte è necessario trovare parti strutturalmente correlate del documento (padre, fratelli, elemento figlio). L'oggetto Document può essere pensato come un albero di oggetti Node. Il tipo Node definisce le proprietà che consentono di navigare attraverso tale albero. C'è un'altra interfaccia dell'applicazione per navigare attraverso il documento, come un albero di oggetti Element.
Documenti come alberi dei nodiL'oggetto Document, i suoi oggetti Element e gli oggetti Text che rappresentano i blocchi di testo nel documento sono tutti oggetti Node. La classe Node definisce le seguenti importanti proprietà:
parentNodeIl nodo padre di questo nodo, o null per i nodi che non hanno un padre, come Document.
childNodesUn oggetto simile a un array leggibile (NodeList) che fornisce una rappresentazione dei nodi figlio.
firstChild, lastChildIl primo e l'ultimo nodo figlio o null se il nodo specificato non ha figli.
nextSibling, previousSiblingI nodi di pari livello successivi e precedenti. I nodi Brother sono due nodi che hanno lo stesso genitore. Il loro ordine corrisponde all'ordine nel documento. Queste proprietà collegano i nodi in un elenco doppiamente collegato.
tipodinodoIl tipo di questo nodo. I nodi di tipo Document hanno un valore di 9 in questa proprietà. Nodi di tipo Element - valore 1. Nodi di testo di tipo Text - valore 3. Nodi di tipo Comments - valore 8 e nodi di tipo DocumentFragment - valore 11.
nodeValueIl contenuto di testo dei nodi Testo e Commento.
nomeNodoIl nome del tag di un elemento in cui tutti i caratteri vengono convertiti in maiuscolo.
Con queste proprietà della classe Node, puoi fare riferimento al secondo nodo figlio del primo nodo figlio dell'oggetto Document, come mostrato di seguito:
Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling
Supponiamo che il documento in questione abbia questo aspetto:
Prova Ciao mondo!
Quindi il secondo nodo figlio del primo nodo figlio sarà l'elemento . Contiene il valore 1 nella proprietà nodeType e il valore "BODY" nella proprietà nodeName.
Tuttavia, tieni presente che questa API è estremamente sensibile ai cambiamenti nel testo del documento. Ad esempio, se aggiungi una singola nuova riga tra i tag e in questo documento, quel carattere di nuova riga diventerà il primo nodo figlio (nodo di testo) del primo nodo figlio e il secondo nodo figlio sarà l'elemento, non il .
Documenti come alberi degli elementiQuando gli elementi del documento stessi sono di interesse primario, piuttosto che il testo al loro interno (e lo spazio bianco tra di essi), è molto più conveniente utilizzare un'API che permetta di interpretare il documento come un albero di oggetti Element, ignorando il Text e Commento che fanno anch'essi parte del documento.
La prima parte di questa API è la proprietà child degli oggetti Element. Come la proprietà childNodes, il suo valore è un oggetto NodeList. Tuttavia, a differenza della proprietà childNodes, l'elenco dei figli contiene solo oggetti Element.
Si noti che i nodi Testo e Commento non hanno nodi figli. Ciò significa che la proprietà Node.parentNode descritta in precedenza non restituisce mai nodi Text o Comment. Il valore della proprietà parentNode di qualsiasi oggetto Element sarà sempre un altro oggetto Element o la radice dell'albero, un oggetto Document o DocumentFragment.
La seconda parte dell'API di navigazione dell'elemento del documento è costituita dalle proprietà dell'oggetto Element, simili alle proprietà di accesso ai nodi figlio e di pari livello dell'oggetto Node:
firstElementChild, lastElementChildSimile alle proprietà firstChild e lastChild, ma restituisce elementi figlio.
nextElementSibling, previousElementSiblingSimile alle proprietà nextSibling e previousSibling, ma restituiscono elementi di pari livello.
childElementCountIl numero di elementi figlio. Restituisce lo stesso valore della proprietà children.length.
Queste proprietà di accesso figlio e fratello sono standardizzate e implementate in tutti browser attuali tranne IE.
Il Document Object Model, o "DOM", è interfaccia software accesso a elementi di pagine web. Fondamentalmente, è un'API di pagina che ti consente di leggere e manipolare il contenuto, la struttura e gli stili della pagina. Vediamo come funziona e come funziona.
Come si costruisce una pagina web?Il processo di conversione di un documento HTML di origine in una pagina visualizzabile, stilizzata e interattiva è chiamato "percorso di rendering critico". Mentre questo processo può essere suddiviso in diversi passaggi, come ho descritto in Comprensione del percorso di rendering critico, questi passaggi possono essere raggruppati approssimativamente in due passaggi. Nel primo, il browser analizza il documento per determinare cosa verrà eventualmente visualizzato sulla pagina, e nel secondo, il browser esegue il rendering.
Il risultato della prima fase è quello che viene chiamato un "albero di rendering". L'albero di rendering è una vista Elementi HTML, che verrà visualizzato sulla pagina, e i relativi stili associati. Per costruire questo albero, il browser ha bisogno di due cose:
DOM è una rappresentazione oggetto del documento HTML originale. Presenta alcune differenze, come vedremo in seguito, ma essenzialmente è un tentativo di trasformare la struttura e il contenuto di un documento HTML in modello a oggetti, che può essere utilizzato da vari programmi.
La struttura degli oggetti DOM è rappresentata da quello che viene chiamato un "albero dei nodi". È così chiamato perché può essere pensato come un albero con un solo genitore che si ramifica in più rami figli, ognuno dei quali può avere foglie. In questo caso, l'"elemento" padre è l'elemento radice, i "rami" figlio sono elementi nidificati e le "foglie" sono il contenuto all'interno degli elementi.
Prendiamo questo documento HTML come esempio:
La mia prima pagina web Ciao, mondo!
Come stai?
Questo documento può essere rappresentato come il seguente albero di nodi:
Nell'esempio sopra, sembra che il DOM sia una mappatura 1:1 del documento HTML originale. Tuttavia, come ho detto, ci sono delle differenze. Per comprendere appieno cos'è il DOM, dobbiamo guardare a cosa non è.
DOM non è una copia dell'HTML originaleSebbene il DOM sia creato da un documento HTML, non è sempre esattamente lo stesso. Ci sono due casi in cui il DOM può differire dall'HTML originale.
1. Quando l'HTML contiene errori di markupIl DOM è un'interfaccia per accedere agli elementi effettivi (cioè già renderizzati) di un documento HTML. Nel processo di creazione del DOM, il browser stesso può correggere alcuni errori nel codice HTML.
Considera questo documento HTML come esempio:
Ciao mondo!
Il documento manca di elementi, che è un requisito per l'HTML. Ma se guardiamo all'albero DOM risultante, possiamo vedere che questo è stato risolto:
Oltre ad essere l'interfaccia per la visualizzazione dei contenuti di un documento HTML, il DOM stesso può anche essere modificato.
Possiamo, ad esempio, creare nodi aggiuntivi per il DOM utilizzando Javascript.
Var newParagraph = document.createElement("p"); var sectionContent = document.createTextNode("Sono nuovo!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);
Questo codice cambierà il DOM, ma le modifiche non si rifletteranno nel documento HTML.
Il DOM non è quello che vedi nel browser (cioè l'albero di rendering)Nel viewport del browser, vedi l'albero di rendering, che, come ho detto, è una combinazione di DOM e CSSOM. Ciò che rende il DOM diverso da un albero di rendering è che quest'ultimo consiste solo di ciò che alla fine verrà visualizzato sullo schermo.
Poiché l'albero di rendering si occupa solo di ciò che viene visualizzato, esclude gli elementi visivamente nascosti. Ad esempio, elementi che hanno stili con display: none .
Ciao mondo!
DOM includerà l'elemento
Tuttavia, l'albero di rendering, e quindi ciò che è visibile nel viewport, non sarà incluso in questo elemento.
Questa differenza è leggermente inferiore perché DevTools Element Inspector fornisce l'approssimazione più vicina al DOM che abbiamo in un browser. Tuttavia, l'ispettore DevTools contiene Informazioni aggiuntive, che non è nel DOM.
Il miglior esempio di ciò sono gli pseudo-elementi CSS. Gli pseudo-elementi creati utilizzando i selettori ::before e ::after fanno parte del CSSOM e dell'albero di rendering, ma tecnicamente non fanno parte del DOM. Questo perché il DOM viene generato solo dal documento HTML originale, esclusi gli stili applicati all'elemento.
Anche se gli pseudo-elementi non fanno parte del DOM, sono nel nostro ispettore degli elementi devtools.
Riepilogo DOM è un'interfaccia per un documento HTML. Viene utilizzato dai browser come primo passaggio per determinare cosa visualizzare nel viewport e dal codice Javascript per modificare il contenuto, la struttura o lo stile di una pagina.
innerHTML
vartext = elemento.innerHTML;
elemento.innerHTML = "";
L'assegnazione di un nuovo innerHTML sovrascrive il codice, anche se il nuovo valore viene aggiunto a quello corrente (+=). Gli script aggiunti in questo modo non vengono eseguiti.
outerHTML
Contiene l'intero elemento e non può essere modificato. Tecnicamente, scrivere su questa proprietà crea un nuovo elemento che sostituisce quello vecchio. I riferimenti al vecchio elemento nelle variabili non cambiano.
dati
textNode.data - contenuto di nodi di testo e commenti
textContent
element.textContent - testo all'interno dell'elemento senza tag.
Esiste anche una proprietà innerText non standard che ha molto in comune con textContent .
nascosto
element.hidden = vero
L'attributo nascosto non è supportato in IE11.
La maggior parte degli attributi standard nel DOM diventano proprietà dell'oggetto:
element.id = "id"
Per gli attributi non standard, non viene creata alcuna proprietà (undefined)
Puoi creare le tue proprietà DOM:
element.myData = (nome:"John", lastName:"Smith");
e metodi:
element.myFunc = function()(avvisa this.nodeName);
Funziona perché i nodi DOM sono normali oggetti JavaScript. Queste proprietà e metodi non standard non influiscono sulla visualizzazione del tag e sono visibili solo in JavaScript.
Accesso agli attributi dei tag:
elemento.hasAttribute(nome)
elemento.getAttribute(nome)
element.setAttribute(nome, valore)
elemento.removeAttribute(nome)
element.attributes è uno pseudo array di attributi.
Gli attributi non fanno distinzione tra maiuscole e minuscole (html) e le proprietà fanno distinzione tra maiuscole e minuscole (javaScript).
Il valore dell'attributo è sempre una stringa.
Attributo: a.getAttribute("href") - mostra esattamente cosa c'è nell'HTML
Proprietà: a.href - può differire dal valore dell'attributo
Molto spesso, una proprietà dipende da un attributo, ma non viceversa. La modifica della proprietà non influisce sull'attributo.
L'attributo class ha due proprietà:
className - stringa
classList - oggetto
metodi dell'oggetto classList:
element.classList.contains("class") - controlla se un oggetto contiene una determinata classe
element.classList.add("classe")
element.classList.remove("classe")
element.classList.toggle("classe")
classList è uno pseudo-array, può essere iterato per ciclo.
attributi dei datiGli attributi dei dati personalizzati sono disponibili non solo come attributi, ma anche tramite la proprietà del set di dati
data-about = "qualche valore"
elemento.dataset.about
parent.contains(child) - vero o falso
controlla se il nodo figlio è nidificato nel genitore
nodeA.compareDocumentPosition(nodeB): fornisce informazioni sul contenuto e sull'ordine relativo degli elementi. Il valore restituito è una maschera di bit:
Aggiunta e rimozione di nodivardiv = document.createElement("div")
document.createTextNode("testo")
parent.appendChild(element) - l'elemento viene aggiunto alla fine del genitore
parent.insertBefore(element, nextSibling) - l'elemento viene aggiunto prima di nextSibling
parent.insertBefore(element, parent.firstChild) - aggiunto all'inizio
parent.insertBefore(element, null) - funziona come appendChild
Tutti i metodi insert restituiscono il nodo inserito.
Quando si sposta un elemento, non è necessario rimuoverlo prima dalla vecchia posizione, i metodi di inserimento lo fanno automaticamente.
element.insertAdjacentHTML(where, html) - inserisce codice HTML arbitrario in qualsiasi punto del documento. Dove specifica dove inserire html in relazione all'elemento - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(where, newElement)
element.insertAdjacentText(dove, testo)
gli ultimi due metodi non sono supportati in Firefox
node.append(...nodes) - inserisce i nodi alla fine di node ,
node.prepend(...nodes) - inserisce i nodi all'inizio di node ,
node.after(...nodes) - inserisce i nodi dopo il nodo ,
node.before(...nodes) - inserisce i nodi prima di node ,
node.replaceWith(...nodes) - Inserisce nodi invece di node .
qui i nodi sono nodi o stringhe, in qualsiasi numero e combinazione, separati da virgole.
var fragment = document.createDocumentFragment() - simula un nodo DOM che scompare quando viene inserito in un documento, lasciando solo i suoi figli. IN browser moderni Non consigliato.
element.cloneNode(true) - copia completa dell'elemento
element.cloneNode(false) - copia senza figli
parent.removeChild(elemento)
parent.replaceChild(newElement, elemento)
element.remove() - rimuove l'elemento direttamente, senza riferimento al genitore.
I metodi restituiscono l'host remoto
