Il modello a oggetti documento Dom è. Fondamenti per lavorare con il DOM in JavaScript. Documenti come alberi dei nodi

All'apertura di qualsiasi documento HTML, il browser analizza prima il suo contenuto e, sulla base di questa analisi, crea un modello a oggetti del documento HTML, o più brevemente DOM.

Il DOM è costituito da oggetti nidificati gerarchicamente chiamati nodi. Ogni nodo nella struttura rappresenta a pagina Html elemento.

Usando il DOM puoi interagire ( leggere, modificare, cancellare) con il contenuto di documenti HTML da script.

Di seguito è riportato il codice HTML del documento e il DOM che verrebbe creato dal browser in base a questo codice:

DOM HTML DOM HTML.

Ciao a tutti.

Tutti i rettangoli mostrati nell'immagine sono oggetti (o nodi). I nodi di diversi tipi sono contrassegnati con colori diversi nell'immagine.

Il nodo Documento è contrassegnato in rosso. Qualsiasi chiamata al DOM deve iniziare con una chiamata a questo nodo.

I nodi degli elementi sono contrassegnati in verde. Per ogni elemento HTML sulla pagina, il browser crea un nodo elemento corrispondente.

Il contenuto degli elementi viene archiviato in nodi di testo. I nodi di testo sono contrassegnati in blu nel nostro diagramma.

Per ciascuno Attributo HTML elemento, viene creato un nodo di attributo. Il nodo dell'attributo è contrassegnato in rosa nel diagramma.

Nota che non dimenticare che il testo è sempre memorizzato nei nodi di testo e non è una proprietà dell'elemento. Quelli. per accedere al contenuto di un elemento HTML, devi accedere alla proprietà del suo nodo di testo.

Relazioni tra nodi

I nodi in una struttura oggetto sono correlati tra loro. Esistono diversi termini speciali per descrivere le relazioni tra i nodi:

nodo padre ( nodo padre) - il nodo genitore in relazione all'oggetto in questione è il nodo in cui l'oggetto in questione è nidificato. Nel nostro diagramma, rispetto ai nodi e

è genitore. Per un nodo, il nodo padre è .

Nodi figli ( nodo figlio) - un nodo discendente in relazione all'oggetto considerato è un nodo annidato nell'oggetto considerato. Nel nostro schema, in relazione al nodo e

Sono discendenti. Per un nodo, il figlio è .

Nodi fratelli ( nodo fratello) - nodi che si trovano allo stesso livello di nidificazione rispetto al loro nodo padre. Nel nostro diagramma, i nodi fratelli sono e ,

Il nodo più in alto nel DOM è chiamato root. Nel nostro diagramma, la radice è (perché l'oggetto documento non fa parte del DOM).

Struttura del documento

Puoi pensare all'HTML come a un insieme di riquadri nidificati. I tag come e includono altri tag, che a loro volta includono tag o testo. Ecco un documento di esempio del capitolo precedente:

La mia home page La mia home page

Ciao, sono Mariin e questa è la mia homepage.

E ho anche scritto un libro! Leggi qui.

Questa pagina ha la seguente struttura:

La struttura dei dati utilizzata dal browser per rappresentare un documento ne riflette la forma. Per ogni scatola c'è un oggetto con cui possiamo interagire e apprendere diversi dati su di esso: quale tag rappresenta, quali scatole e testo contiene. Questa rappresentazione è chiamata Document Object Model, o DOM in breve.

Possiamo accedere a questi oggetti attraverso la variabile globale del documento. La sua proprietà documentElement fa riferimento all'oggetto che rappresenta il tag. Fornisce inoltre le proprietà head e body, che contengono oggetti per i rispettivi elementi.

Alberi Richiama gli alberi di sintassi del Capitolo 11. La loro struttura è notevolmente simile a quella di un documento del browser. Ogni nodo può collegarsi ad altri nodi, ogni ramo può avere il proprio ramo. Questa struttura è un tipico esempio di strutture nidificate, dove gli elementi contengono sottoelementi simili a se stessi.

Chiamiamo una struttura dati un albero quando si ramifica, non ha cicli (un nodo non può contenere se stesso) e ha una singola "radice" distinta. Nel caso del DOM, document.documentElement è la radice.

Gli alberi si trovano spesso nella scienza computazionale. Oltre a rappresentare strutture ricorsive come un documento HTML o programmi, sono spesso usati per lavorare con set di dati ordinati perché gli elementi sono solitamente più facili da trovare o inserire in un albero ordinato che in un array unidimensionale ordinato.

Un albero tipico ha diversi nodi. L'albero della sintassi del linguaggio Egg aveva variabili, valori e applicazioni. Le applicazioni avevano sempre rami figli e variabili e valori erano "foglie", cioè nodi senza rami figli.

Lo stesso vale per il DOM. Nodi per elementi normali che rappresentano Tag HTML, definire la struttura del documento. Possono avere nodi figlio. Un esempio di tale nodo è document.body. Alcuni di questi nodi figlio possono rivelarsi foglie, come testo o commenti (in Commenti HTML scritto tra i caratteri).

Ogni oggetto nodo DOM ha una proprietà nodeType che contiene un codice numerico che specifica il tipo di nodo. Per gli elementi normali, è 1, definito anche come proprietà costante document.ELEMENT_NODE. Per i nodi di testo che rappresentano passaggi di testo, è 3 (document.TEXT_NODE). I commenti hanno 8 (document.COMMENT_NODE).

Cioè, ecco un altro modo per rappresentare graficamente l'albero del documento:

Le foglie sono i nodi del testo e le frecce mostrano la relazione padre-figlio tra i nodi.

Standard L'utilizzo di numeri criptici per rappresentare un tipo di nodo non è un approccio in stile JavaScript. Più avanti incontreremo altre parti dell'interfaccia DOM che sembrano anch'esse aliene e goffe. Il motivo è che il DOM è stato progettato per qualcosa di più del semplice JavaScript. Cerca di definire un'interfaccia indipendente dalla lingua che può essere utilizzata in altri sistemi, non solo in HTML, ma anche in XML, che è un formato di dati. scopo generale con una sintassi che ricorda l'HTML.

Risulta scomodo. Sebbene gli standard siano una cosa molto utile, nel nostro caso il vantaggio dell'indipendenza dalla lingua non è così utile. È meglio avere un'interfaccia che sia ben adattata alla lingua che stai utilizzando piuttosto che un'interfaccia familiare in tutte le lingue.

Per mostrare un'integrazione linguistica scomoda, considera la proprietà childNodes che hanno i nodi DOM. Contiene un oggetto simile a un array con una proprietà length e proprietà numerate per l'accesso ai nodi figli. Ma è un'istanza di tipo NodeList, non un vero array, quindi non ha metodi come forEach.

Ci sono anche problemi associati alla cattiva progettazione del sistema. Ad esempio, non è possibile creare un nuovo nodo e aggiungervi immediatamente proprietà o nodi figlio. Per prima cosa devi crearlo, quindi aggiungere i figli uno per uno e infine assegnare le proprietà una per una, usando gli effetti collaterali. Il codice che funziona strettamente con il DOM è lungo, brutto e ripetitivo.

Ma questi problemi non sono fatali. JavaScript ti consente di creare astrazioni. Facile da scrivere funzioni secondarie, consentendo di esprimere le operazioni in modo più chiaro e conciso. In generale, tali strumenti forniscono molte librerie finalizzate alla programmazione per il browser.

I nodi DOM di attraversamento dell'albero contengono molti riferimenti ai loro vicini. Questo è mostrato nel diagramma:

Anche se qui viene mostrato solo un collegamento di ogni tipo, ogni nodo ha una proprietà parentNode che punta al suo nodo padre. Inoltre, ogni nodo elemento (tipo 1) ha una proprietà childNodes che punta a un oggetto simile a un array contenente i suoi nodi figlio.

In teoria, puoi andare in qualsiasi parte dell'albero usando solo questi collegamenti. Ma JavaScript ci fornisce molti collegamenti di supporto aggiuntivi. Le proprietà firstChild e lastChild puntano al primo e all'ultimo figlio o sono null per i nodi che non hanno figli. previousSibling e nextSibling puntano a nodi vicini - nodi con lo stesso genitore del nodo corrente, ma che si trovano immediatamente prima o dopo quello corrente nell'elenco. Il primo nodo avrà una proprietà previousSibling pari a null e l'ultimo nodo avrà una proprietà nextSibling pari a null.

Quando si ha a che fare con tali strutture annidate, le funzioni ricorsive tornano utili. Quanto segue cerca nel documento i nodi di testo contenenti la stringa data e restituisce true quando viene trovato:

Funzione talksAbout(node, string) ( if (node.nodeType == document.ELEMENT_NODE) ( for (var i = 0; i< node.childNodes.length; i++) { if (talksAbout(node.childNodes[i], string)) return true; } return false; } else if (node.nodeType == document.TEXT_NODE) { return node.nodeValue.indexOf(string) >-1; ) ) console.log(talkAbout(document.body, "libri")); // → vero

Proprietà del nodo di testo nodeValue contiene una stringa di testo.

Trovare gli elementi Spesso è utile esplorare questi collegamenti tra genitori, figli e fratelli e attraversare l'intero documento. Tuttavia, se abbiamo bisogno di un nodo specifico nel documento, è molto scomodo attraversarlo, partendo da document.body e passando stupidamente attraverso il percorso codificato nel codice. In tal modo, facciamo ipotesi sull'esatta struttura del documento nel programma, che in seguito potremmo voler modificare. Un altro fattore di complicazione è che i nodi di testo vengono creati anche per gli spazi tra i nodi. Nel documento di esempio, il tag body non ha tre figli (h1 e due p), ma ben sette: questi tre più spazi prima, dopo e tra di essi.

var link = document.body.getElementsByTagName("a"); console.log(link.href);

Tutti i nodi degli elementi hanno un metodo getElementsByTagName che raccoglie tutti gli elementi con il tag specificato che sono discendenti (discendenti diretti o non diretti) di questo nodo e lo restituisce come un oggetto di tipo array.

Per trovare un nodo specifico, puoi assegnargli un attributo id e utilizzare il metodo document.getElementById.

Il mio struzzo Gertrude:

var struzzo = document.getElementById("gertrude"); console.log(struzzo.src);

Il terzo metodo è getElementsByClassName , che, come getElementsByTagName , cerca il contenuto del nodo dell'elemento e restituisce tutti gli elementi che contengono la stringa data nella loro classe.

Modifica del documento Quasi tutto nella struttura del DOM può essere modificato. I nodi elemento hanno una serie di metodi che vengono utilizzati per modificarli. Il metodo removeChild rimuove il nodo figlio specificato. Per aggiungere un nodo, puoi usare appendChild, che aggiunge il nodo alla fine dell'elenco, o insertBefore, che aggiunge il nodo passato nel primo argomento prima del nodo passato nel secondo argomento.

var paragrafi = document.body.getElementsByTagName("p"); document.body.insertBefore(paragrafi, paragrafi);

Un nodo può esistere solo in un punto di un documento. Quindi inserendo il paragrafo "Tre" prima del paragrafo "Uno" lo stiamo effettivamente rimuovendo dalla fine dell'elenco e inserendolo all'inizio, e otteniamo "Tre/Uno/Due". Tutte le operazioni per inserire un nodo lo faranno scomparire dalla sua posizione attuale (se ne aveva uno).

Il metodo replaceChild viene utilizzato per sostituire un nodo figlio con un altro. Accetta due nodi: uno nuovo e uno che deve essere sostituito. Il nodo da sostituire deve essere un nodo figlio dell'elemento di cui stiamo chiamando il metodo. Sia replaceChild che insertBefore si aspettano di ricevere un nuovo nodo come primo argomento.

Creazione di nodi Nell'esempio seguente, dobbiamo creare uno script che sostituisca tutte le immagini (tag) nel documento con il testo contenuto nel loro attributo "alt", che specifica una rappresentazione testuale alternativa dell'immagine.

Per fare ciò, è necessario non solo eliminare le immagini, ma anche aggiungere nuovi nodi di testo per sostituirle. Per questo usiamo il metodo document.createTextNode.

Questo v .

Sostituire

function replaceImages() ( var immagini = document.body.getElementsByTagName("img"); for (var i = immagini.lunghezza - 1; i >= 0; i--) ( var immagine = immagini[i]; if ( image.alt) ( var text = document.createTextNode(image.alt); image.parentNode.replaceChild(text, image); ) ) )

Data una stringa, createTextNode ci fornisce un nodo DOM di tipo 3 (testo) che possiamo inserire nel documento da mostrare sullo schermo.

Il ciclo dell'immagine inizia alla fine dell'elenco dei nodi. Questo perché l'elenco dei nodi restituiti dal metodo getElementsByTagName (o dalla proprietà childNodes) viene costantemente aggiornato man mano che il documento cambia. Se partissimo dall'inizio, rimuovendo la prima immagine la lista perderebbe il suo primo elemento, e al secondo passaggio del ciclo, quando i è uguale a 1, si fermerebbe perché anche la lunghezza della lista diventerebbe 1 .

Se hai bisogno di lavorare con un elenco fisso di nodi invece di uno "live", puoi convertirlo in un vero array usando il metodo slice.

var arrayish = (0: "uno", 1: "due", lunghezza: 2); var real = Array.prototype.slice.call(arrayish, 0); real.forEach(function(elt) ( console.log(elt); )); // → uno // due

È possibile utilizzare document.createElement per creare nodi elemento (tipo 1). Il metodo accetta un nome di tag e restituisce un nuovo nodo vuoto del tipo specificato. L'esempio seguente definisce uno strumento elt che crea un nodo elemento e utilizza gli argomenti rimanenti come figli. Questa funzione viene quindi utilizzata per aggiungere ulteriori informazioni al preventivo.

Nessun libro può essere finito. Mentre ci lavoriamo, impariamo abbastanza per trovarlo immaturo non appena ci distogliamo dalla mente. function elt(type) ( var node = document.createElement(type); for (var i = 1; i< arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } document.getElementById("quote").appendChild(elt("footer", "-", elt("strong", "Карл Поппер"), ", предисловие ко второму изданию ", elt("em", "Открытое общество и его враги "), ", 1950"));

Attributi È possibile accedere ad alcuni elementi di attributo, come href per i collegamenti, tramite l'omonima proprietà dell'oggetto. Ciò è possibile per un numero limitato di attributi standard di uso comune.

Ma l'HTML ti consente di assegnare qualsiasi attributo ai nodi. Questo è utile perché consente di memorizzare Informazioni aggiuntive nel documento. Se ti vengono in mente i nomi degli attributi, non saranno tra le proprietà del nodo dell'elemento. Invece, dovrai usare i metodi getAttribute e setAttribute per lavorarci.

Codice iniziale 00000000.

Il gatto ha quattro zampe.

var paras = document.body.getElementsByTagName("p"); Array.prototype.forEach.call(paras, function(para) ( if (para.getAttribute("data-classified") == "secret") para.parentNode.removeChild(para); ));

Raccomando di mettere "data-" davanti ai nomi degli attributi inventati per assicurarsi che non siano in conflitto con nessun altro. Come semplice esempio, scriveremo l'evidenziazione della sintassi che cerca i tag ("preformattati", preformattati - usati per il codice e testo semplice) con l'attributo data-language (language) e cerca piuttosto rozzamente di evidenziare le parole chiave nella lingua.

Function highlightCode(node, keywords) ( var text = node.textContent; node.textContent = ""; // Cancella il nodo var match, pos = 0; while (match = keywords.exec(text)) ( var before = text . slice(pos, match.index); node.appendChild(document.createTextNode(before)); var strong = document.createElement("strong"); strong.appendChild(document.createTextNode(match)); node.appendChild( strong ); pos = keywords.lastIndex; ) var after = text.slice(pos); node.appendChild(document.createTextNode(after)); )

La funzione highlightCode accetta un nodo AND un'espressione regolare (con l'impostazione globale abilitata) che corrisponde alla parola chiave del linguaggio di programmazione che contiene l'elemento.

La proprietà textContent viene utilizzata per ottenere l'intero testo del nodo e quindi impostata sulla stringa vuota, che cancella il nodo. Passiamo in rassegna tutte le occorrenze dell'espressione della parola chiave, aggiungiamo del testo tra di esse sotto forma di semplici nodi di testo e aggiungiamo il testo corrispondente (parole chiave) racchiudendolo in elementi (in grassetto).

Possiamo evidenziare automaticamente l'intero codice della pagina scorrendo tutti gli elementi che hanno l'attributo data-language e chiamando highlightCode su ciascuno con l'espressione regolare corretta.

Var lingue = ( javascript: /\b(funzione|ritorno|var)\b/g /* … etc */ ); function highlightAllCode() ( var pres = document.body.getElementsByTagName("pre"); for (var i = 0; i< pres.length; i++) { var pre = pres[i]; var lang = pre.getAttribute("data-language"); if (languages.hasOwnProperty(lang)) highlightCode(pre, languages); } }

Ecco un esempio:

Ed eccola, la funzione di identificazione:

Funzione id(x) ( return x; ) highlightAllCode();

C'è un attributo comunemente usato, la classe, il cui nome è una parola chiave in JavaScript. Per motivi storici, quando le implementazioni precedenti di JavaScript non erano in grado di gestire i nomi delle proprietà che corrispondevano parole chiave, questo attributo è disponibile tramite una proprietà denominata className. Puoi anche accedervi con il suo vero nome "classe" attraverso i metodi getAttribute e setAttribute.

Disposizione degli elementi (layout) Potresti averlo notato tipi diversi gli elementi sono disposti in modo diverso. Ad alcuni piacciono i paragrafi

E le intestazioni si estendono per l'intera larghezza del documento e appaiono su righe separate. Tali elementi sono chiamati elementi di blocco. Altri come collegamenti o il testo in grassetto appare sulla stessa riga del testo circostante. Sono chiamati built-in (in linea).

Per qualsiasi documento, i browser possono costruire una disposizione di elementi, un layout in cui ciascuno avrà una dimensione e una posizione in base al tipo e al contenuto. Questa diffusione viene quindi utilizzata per creare l'aspetto del documento.

La dimensione e la posizione di un elemento possono essere trovate tramite JavaScript. Le proprietà offsetWidth e offsetHeight forniscono la dimensione, in pixel, dell'elemento. Un pixel è l'unità di misura di base nei browser e di solito corrisponde alla dimensione del pixel più piccolo dello schermo. Allo stesso modo, clientWidth e clientHeight danno la dimensione dell'interno dell'elemento, senza contare il bordo (o, come dicono alcuni, il cordolo).

Sono in una scatola

var para = document.body.getElementsByTagName("p"); console.log("clientHeight:", para.clientHeight); console.log("offsetHeight:", para.offsetHeight);

Il modo più efficiente per scoprire la posizione esatta di un elemento sullo schermo è con il metodo getBoundingClientRect. Restituisce un oggetto con proprietà top, bottom, left e right che contengono la posizione dell'elemento rispetto all'angolo superiore sinistro dello schermo in pixel. Se vuoi ottenere questi dati per l'intero documento, devi aggiungere la posizione di scorrimento corrente, che è contenuta nelle variabili globali pageXOffset e pageYOffset.

L'analisi di un documento è un compito difficile. Per motivi di velocità, i motori dei browser non ricostruiscono il documento ogni volta che viene modificato, ma piuttosto aspettano così a lungo. come è possibile. All'uscita dal programma JavaScript che ha modificato il documento, il browser dovrà calcolare il nuovo layout di pagina per poter visualizzare a schermo il documento modificato. Quando un programma richiede la posizione o la dimensione di qualcosa leggendo proprietà come offsetHeight o chiamando getBoundingClientRect, anche il layout deve essere calcolato per fornire le informazioni corrette.

Un programma che periodicamente legge il layout del DOM e modifica il DOM fa sì che il browser ricalcoli il layout molte volte e sarà quindi lento. Nell'esempio seguente, ci sono due diversi programmi che disegnano una linea di caratteri X larga 2000 pixel e misurano il tempo di esecuzione.

function time(name, action) ( var start = Date.now(); // Ora corrente in millisecondi action(); console.log(name, "took", Date.now() - start, "ms"); ) time("stupido", function() ( var target = document.getElementById("one"); while (target.offsetWidth< 2000) target.appendChild(document.createTextNode("X")); }); // → тупо заняло 32 ms time("умно", function() { var target = document.getElementById("two"); target.appendChild(document.createTextNode("XXXXX")); var total = Math.ceil(2000 / (target.offsetWidth / 5)); for (var i = 5; i < total; i++) target.appendChild(document.createTextNode("X")); }); // → умно заняло 1 ms

Stili Abbiamo visto che diversi elementi HTML si comportano diversamente. Alcuni sono mostrati come blocchi, altri sono in linea. Alcuni aggiungono uno stile visivo, come rendere il testo in grassetto e rendere il testo sottolineato e blu.

L'aspetto di un'immagine in un tag o il fatto che un collegamento in un tag apra una nuova pagina quando si fa clic è correlato al tipo di elemento. Ma gli stili di base associati a un elemento, come il colore del testo o la sottolineatura, possono essere modificati da noi. Ecco un esempio di utilizzo della proprietà style:

Collegamento verde

L'attributo style può contenere una o più dichiarazioni di proprietà (colore) seguite da due punti e un valore. In caso di dichiarazioni multiple, sono separate da un punto e virgola: “colore: rosso; bordo: nessuno".

Molte cose possono essere cambiate con gli stili. Ad esempio, la proprietà display controlla se un elemento viene visualizzato in forma di blocco o in linea.

Il testo viene mostrato in linea, come un blocco, e non è affatto visibile.

L'elemento del blocco viene visualizzato in un blocco separato e quest'ultimo non è affatto visibile - visualizzazione: nessuno disabilita la visualizzazione degli elementi. In questo modo puoi nascondere gli elementi. Questo di solito è preferito rimozione completa dal documento, perché è più facile mostrarli in seguito se necessario.

Il codice JavaScript può influenzare direttamente lo stile di un elemento tramite la proprietà style del nodo. Contiene un oggetto che ha proprietà per tutte le proprietà di stile. I loro valori sono stringhe su cui possiamo scrivere per modificare alcuni aspetti dello stile dell'elemento.

Bellezza

var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "magenta";

Alcuni nomi di proprietà di stile contengono trattini, come font-family. Dal momento che sarebbe scomodo lavorarci con JavaScript (dovresti scrivere style["font-family"]), i nomi delle proprietà nell'oggetto styles sono scritti senza un trattino, e invece in essi appaiono lettere maiuscole: style .famiglia di font

Stili a cascata Il sistema di stili in HTML è chiamato CSS (Cascading Style Sheets, Cascading Style Sheets). Un foglio di stile è un insieme di stili in un documento. Può essere scritto all'interno del tag:
strong ( font-style: corsivo; colore: grigio; )

Il testo del tag strong ora è in corsivo e grigio.

"Cascading" significa che più regole vengono combinate per produrre lo stile del documento finale. Nell'esempio, lo stile predefinito per, che rende il testo in grassetto, è sovrapposto alla regola del tag, che aggiunge lo stile del carattere e il colore.

Quando il valore di una proprietà è determinato da più di una regola, le regole successive hanno la precedenza. Se lo stile del testo includeva una regola font-weight: normal che era in conflitto con lo stile predefinito, il testo sarebbe normale anziché in grassetto. Gli stili applicati a un nodo tramite l'attributo style hanno la precedenza più alta.

In CSS, è possibile impostare non solo il nome dei tag. La regola per .abc si applica a tutti gli elementi che hanno la classe "abc" specificata. La regola per #xyz si applica a un elemento con un attributo id uguale a "xyz" (gli attributi id devono essere resi univoci all'interno del documento).

Subtle ( color: gray; font-size: 80%; ) #header ( background: blue; color: white; ) /* p elementi con classi a e b e id impostato su main */ p.a.b#main ( margin-bottom: 20px;)

La priorità dell'ultima regola funziona quando le regole hanno la stessa granularità. È una misura di quanto accuratamente descrive gli elementi adatti, come determinato dal numero e dal tipo di aspetti dell'elemento richiesti. Ad esempio, una regola per p.a è più dettagliata di una regola per p o just.a e avrà la precedenza.

La notazione p > a (...) si applica a tutti i tag che si trovano all'interno del tag e ne sono i diretti discendenti.
p a (...) si applica anche a tutti i tag all'interno, indipendentemente dal fatto che si tratti di un figlio diretto o meno.

Selettori di query In questo libro non useremo molto i fogli di stile. Capire come funzionano è fondamentale per la programmazione del browser, ma una spiegazione dettagliata di tutte le loro proprietà richiederebbe 2-3 libri. motivo principale familiarizzando con loro e con la sintassi dei selettori (record che determinano a quali elementi si applicano le regole) - possiamo usare lo stesso efficiente mini-linguaggio per trovare gli elementi DOM.

Il metodo querySelectorAll, che esiste sia sull'oggetto documento che sugli elementi nodo, accetta una stringa di selezione e restituisce un oggetto simile a un array contenente tutti gli elementi corrispondenti.

Adoro la tempesta all'inizio di maggio

Quando il primo tuono primaverile

Come se scherzasse e giocasse

Rumori nel cielo blu.

funzione count(selector) ( return document.querySelectorAll(selector).length; ) console.log(count("p")); // Tutti gli elementi

// → 4 console.log(count(".animal")); // Classe animale // → 2 console.log(count("p .animal")); // Classe animale all'interno

// → 2 console.log(count("p > .animal")); // Figlio diretto

// → 1

A differenza di metodi come getElementsByTagName , l'oggetto restituito da querySelectorAll non è interattivo. Non cambierà se cambi il documento.

Il metodo querySelector (senza All) funziona in modo simile. È necessario se hai bisogno di un elemento specifico. Restituirà solo la prima corrispondenza o null se non ci sono corrispondenze.

Posizionamento e animazione La proprietà dello stile di posizione influisce notevolmente sul posizionamento degli elementi. Per impostazione predefinita, è statico, il che significa che l'elemento si trova nella sua posizione normale nel documento. Quando è relativo, l'elemento occupa ancora spazio, ma ora è possibile utilizzare le proprietà top e left per spostarsi dalla sua posizione normale. Quando è assoluto, l'elemento viene rimosso dal normale "flusso" del documento, ovvero non occupa spazio e può sovrapporsi ad altri. Inoltre, le sue proprietà left e top possono essere utilizzate per la posizione assoluta relativa all'angolo superiore sinistro dell'elemento contenitore più vicino la cui posizione non è statica. E se non esiste tale elemento, viene posizionato rispetto al documento.

Possiamo usarlo per creare animazioni. Il seguente documento mostra l'immagine di un gatto che si muove in un'ellisse.

varcat = document.querySelector("img"); var angolo = 0, lastTime = null; function animate(time) ( if (lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle) * 20) + "px"; cat .style.left = (Math.cos(angolo) * 200) + "px";requestAnimationFrame(animato); ) requestAnimationFrame(animato);

L'immagine è centrata sulla pagina e impostata su position: relative. Aggiorniamo costantemente le proprietà in alto e a sinistra dell'immagine per farla muovere.

Lo script utilizza requestAnimationFrame per chiamare la funzione animate ogni volta che il browser è pronto per ridisegnare lo schermo. La stessa funzione animate chiama nuovamente requestAnimationFrame per pianificare il prossimo aggiornamento. Quando la finestra del browser (o la scheda) è attiva, ciò si tradurrà in aggiornamenti a una velocità di circa 60 volte al secondo, consentendo animazioni dall'aspetto gradevole.

Se aggiornassimo il DOM in un ciclo, la pagina si bloccherebbe e non sarebbe visibile nulla. I browser non aggiornano la pagina durante Funziona JavaScript e non consentire il lavoro con la pagina in questo momento. Ecco perché abbiamo bisogno di un requestAnimationFrame: dice al browser che abbiamo finito finora e può fare le sue cose del browser, come aggiornare lo schermo e rispondere alle richieste degli utenti.

Alla nostra funzione di animazione viene passata l'ora corrente come argomento, che confronta con l'ora precedente (la variabile lastTime) in modo che il movimento del gatto sia uniforme e l'animazione si svolga senza intoppi. Se lo spostassimo solo di un determinato periodo di tempo ad ogni passaggio, il movimento balbetterebbe se, ad esempio, un'altra attività caricasse il computer.

Il movimento in un cerchio viene eseguito utilizzando le funzioni trigonometriche Math.cos e Math.sin. Li descriverò brevemente per coloro che non li conoscono, poiché ne avremo bisogno in futuro.

Math.cos e Math.sin sono utili quando devi trovare punti su un cerchio centrato in (0, 0) con un raggio pari a uno. Entrambe le funzioni interpretano il loro argomento come una posizione sul cerchio, dove 0 denota il punto sul bordo destro del cerchio, quindi in senso antiorario finché un percorso di 2π (circa 6,28) ci porta intorno al cerchio. Math.cos calcola la coordinata x del punto che è la nostra posizione corrente sul cerchio e Math.sin restituisce la coordinata y. Sono consentite anche posizioni (o angoli) maggiori di 2π o minori di 0 - le rotazioni vengono ripetute in modo che a+2π indichi lo stesso angolo di a.

Utilizzo di seno e coseno per calcolare le coordinate L'animazione del gatto memorizza un contatore dell'angolo per l'angolo di rotazione corrente dell'animazione e lo incrementa proporzionalmente al tempo trascorso ogni volta che viene chiamata la funzione di animazione. Questo angolo viene utilizzato per calcolare la posizione corrente dell'elemento dell'immagine. Lo stile superiore viene calcolato tramite Math.sin e moltiplicato per 20: questo è il raggio verticale della nostra ellisse. Lo stile di sinistra viene calcolato tramite Math.cos e moltiplicato per 200 in modo che la larghezza dell'ellisse sia molto maggiore dell'altezza.

Gli stili di solito richiedono unità di misura. Nel nostro caso, dobbiamo aggiungere px al numero per spiegare al browser che stiamo contando in pixel (e non in centimetri, em o altre unità). È facile dimenticare. L'uso di numeri senza unità farà sì che lo stile venga ignorato, a meno che il numero non sia 0, che è indipendente dall'unità.

Sommario I programmi JavaScript possono ispezionare e modificare il documento visualizzato nel browser attraverso una struttura chiamata DOM. Questa struttura dati rappresenta il modello di documento del browser e un programma JavaScript può modificarlo per modificare il documento visibile. Il DOM è organizzato come un albero in cui gli elementi sono disposti gerarchicamente secondo la struttura del documento. Gli oggetti Element hanno proprietà di tipo parentNode e childNodes utilizzate per navigare nell'albero.

L'aspetto di un documento può essere modificato tramite gli stili, aggiungendo stili direttamente ai nodi o definendo regole per qualsiasi nodo. Gli stili hanno molte proprietà, come il colore o la visualizzazione. JavaScript può influenzare lo stile di un elemento direttamente attraverso la sua proprietà style.

EserciziCostruzione di una tabella Nel Capitolo 6 abbiamo costruito tabelle dal testo semplice. L'HTML semplifica la creazione di tabelle. Una tabella in HTML viene creata utilizzando i seguenti tag:

nome altezza paese

Kilimangiaro

5895

Tanzania

Per ogni riga, un tag contiene un tag. Al suo interno, possiamo posizionare celle: celle di intestazione o celle normali.

Gli stessi dati che abbiamo usato nel Capitolo 6 sono di nuovo disponibili nella variabile MOUNTAINS.

Scrivete una funzione buildTable che, dato un array di oggetti con le stesse proprietà, costruisca una struttura DOM che rappresenti una tabella. La tabella deve avere una riga di intestazione in cui i nomi delle proprietà sono racchiusi in elementi e deve esserci una riga per ogni oggetto matrice in cui le relative proprietà sono racchiuse in elementi. È qui che torna utile la funzione Object.keys, che restituisce un array contenente i nomi delle proprietà dell'oggetto.

Una volta apprese le nozioni di base, allinea a destra le celle numeriche modificando la loro proprietà style.textAlign in "right".

/* Definisce gli stili per tabelle graziose */ table ( border-collapse: collasso; ) td, th ( border: 1px solid black; padding: 3px 8px; ) th ( text-align: left; ) function buildTable(data) ( / / Il tuo codice ) document.body.appendChild(buildTable(MOUNTAINS));

Elementi per nome di tag Il metodo getElementsByTagName restituisce tutti gli elementi secondari con il nome di tag specificato. Trasforma la tua versione di questo metodo in una funzione normale che accetta un nodo e una stringa (nome del tag) e restituisce un array contenente tutti i nodi discendenti con il nome del tag specificato.

Per scoprire il nome del tag di un elemento, utilizzare la proprietà tagName. Si noti che restituirà il nome del tag in maiuscolo. Utilizzare i metodi stringa toLowerCase o toUpperCase.

Un titolo con un elemento span all'interno.

Un paragrafo con una, due spanne.

function byTagName(node, tagName) ( // Il tuo codice ) console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2

Cappello del gatto Estendere l'animazione del gatto in modo che sia il gatto che il suo cappello volino sui lati opposti dell'ellisse.

O lascia che il cappello voli intorno al gatto. Oppure pensa a qualcos'altro di interessante.

Per facilitare il posizionamento di molti oggetti, è consigliabile passare al posizionamento assoluto. Quindi superiore e sinistra saranno relativi all'angolo in alto a sinistra del documento. Per evitare di utilizzare coordinate negative, è possibile aggiungere un determinato numero di pixel ai valori di posizione.

varcat = document.querySelector("#cat"); var cappello = document.querySelector("#cappello"); // Il tuo codice qui.

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 .

Visibilità dell'elemento

nascosto
element.hidden = vero
L'attributo nascosto non è supportato in IE11.

Attributi

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é 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.

Lavorare con le classi

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 dati

Gli 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

Ordine dei nodi

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 nodi

vardiv = 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

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ù semplice

Costruiamo, 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ù complicato

Consideriamo ora una pagina più vitale:

A proposito di alci La verità su alci.

Elk è un animale intelligente

.. E insidioso

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

Accuratamente
Informazione

Prodotto in Russia

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 è elemento DOM dove sono elencati.

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 browser

Quando 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 DOM

Perché, 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 elementi

Tutti gli accessi e le modifiche al DOM provengono dall'oggetto documento.

Cominciamo dalla cima dell'albero.

documento.documentElement

Maggior parte etichetta superiore. Nel caso di una pagina HTML valida, questo sarebbe .

corpo del documento

Il 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 DOM

Ogni 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

Esempio

Ad 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

Accuratamente
Informazione

Prodotto in Russia

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 figlio

Tutti gli elementi figlio, inclusi gli elementi di testo, si trovano nell'array childNodes.

L'esempio seguente scorre tutti i figli di document.body .

For(var i=0; i CORPO

stile

Questa 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

innerHTML

Questa 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 classe

Questa 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

Questa pubblicazione precede una serie di articoli su modi alternativi lavorare con XML. "Alternativa", perché di norma lavorare con XML in 1C è limitato analisi xml utilizzando la lettura sequenziale - analisi riga per riga del contenuto del testo. E ci sono anche altri modi.

Ad esempio, utilizzando il linguaggio di query xPath XML oi modelli di trasformazione XSL. Queste opzioni saranno discusse in articoli futuri. Ma tutti si basano sulla rappresentazione DOM sottostante dei documenti XML. Su cosa DOM (document object model o document object model) è e sarà discusso nella pubblicazione.

DOM si basa sulla rappresentazione di un documento di qualsiasi struttura sotto forma di un albero di nodi, ogni nodo (nodo) di cui è un elemento, un attributo di un elemento, un valore di testo di un elemento, ecc. La connessione tra i nodi si basano sul principio di "genitore - subordinati". La radice del documento (albero DOM) non ha un genitore. Un elemento stub non ha elementi subordinati (tali elementi sono chiamati astrattamente foglie dell'albero). Pertanto, il modello DOM può essere creato non solo per XML, ma di fatto per qualsiasi documento strutturato (HTML, XHTML). Così, ad esempio, il browser dell'utente, ricevendo il codice HTML di una pagina web da Internet, costruisce un albero DOM di questa pagina nella RAM del computer dell'utente.

Il modello DOM apre un'ampia gamma di possibilità per la manipolazione dei dati dei documenti. Puoi creare nuovi nodi, inserirli a diversi livelli dell'albero, copiare nodi, eliminare nodi, cercare nodi in base a parametri diversi e molto altro.

Il DOM di un documento XML è visualizzato nella figura sottostante.

Qualsiasi linguaggio di programmazione moderno ha strumenti (parser) per lavorare con un tale albero. Ricevendo il contenuto della stringa come input, il parser XML crea un albero di nodi nella RAM ed esegue manipolazioni con i dati dell'albero. Il vantaggio di questo approccio rispetto all'analisi riga per riga è evidente: con una query all'albero, è possibile selezionare i dati necessari senza passare attraverso l'intero documento riga per riga, perché la RAM contiene una rappresentazione completa degli elementi con tutti interconnessioni.

Nella piattaforma 1C, il modello DOM è rappresentato da uno speciale oggetto DocumentDOM, che a sua volta viene costruito utilizzando l'oggetto DOM Builder e il suo metodo Read. Questo metodo richiede in genere un oggetto XML Reader o HTML Reader come input, che può essere utilizzato per leggere direttamente dai file o caricare da una stringa di contenuto testuale XML o HTML. Bene, allora ci sono un certo numero di strutture che ti permettono di estrarre dati dal modello a oggetti del documento letto.

Di tutte le opzioni, la più interessante dal mio punto di vista è l'opzione n. 1 che utilizza il metodo EvaluateXPath Expression. Ad esso sarà dedicato il prossimo articolo.

Vantaggi dell'analisi riga per riga: la necessità di risorse è inferiore. Contro: ci vuole molto tempo per ottenere i dati, è necessario leggere l'intero file riga per riga, la complessità del codice del programma durante l'analisi di documenti XML con una struttura complessa.

Il vantaggio del campionamento attraverso il DOM: la velocità di campionamento dei dati, la semplicità del codice del programma. Contro: richiedere risorse, costruire e interrogare il DOM è speso RAM e potenza di elaborazione.

Materiali tematici: