Di movimento albero DOM: Walk facilmente Document Object Model

Traversal dell'albero Document Object Model (DOM) è spesso richiesto di utilità per gli sviluppatori web. Questo processo è abbastanza facile. Imparare a camminare DOM!

A+ A-

Che attraversano i vari modelli di dati e strutture di dati sono un requisito molto comune nel campo dell'ingegneria del software. programmatori Web anche spesso la necessità di affrontare il Document Object Model (DOM) di una pagina web o di un file XML. Walking DOM albero e manipolare i nodi DOM è un affare di routine per gli sviluppatori web. Pertanto, da tempo vi è stata una necessità di un metodo semplice e veloce per accedere nodi in un DOM. Per fortuna, ora c'è un modo molto semplice a disposizione per l'attraversamento del DOM.

Con W3C definita interfaccia TreeWalker -ora è possibile accedere rapidamente i nodi necessari. Metodo createTreeWalker () in grado di creare un oggetto di TreeWalker. Vediamolo con un esempio JavaScript:

 var walker = document.createTreeWalker (rootNode, NodeFilter.SHOW_TEXT, null, false) 

Il codice precedente crea un albero con la sua radice come rootNode specificato. Questo significa che si può effettivamente entrare in possesso di qualsiasi sub-albero all'interno DOM! E nel caso in cui siete interessati a lavorare con l'intero DOM è possibile ottenere il albero completo utilizzando l'elemento BODY come root. BODY copre tutta l'elemento visibile su una pagina web.

Caveat (come al solito!): Per quanto ne so, IE 8 (o minore) non supporta questo metodo. Firefox / Chrome / Opera lo supportano. Speriamo che IE 9 e, soprattutto, avrà il supporto per questo metodo. È possibile controllarlo fuori nel browser.

var rootNode = document.getElementById ( 'root')
var walker = document.createTreeWalker (rootNode, NodeFilter.SHOW_TEXT, null, false) 

Non è una bellezza ?! Nella prima riga, si ottiene una maniglia su ogni elemento dal suo ID e quindi fornire questo elemento per il metodo createTreeWalker () per ottenere l'albero pieno DOM sotto quell'elemento.

JavaScript è bello!

JavaScript è bello!

Cosa c'è di più ?! È inoltre possibile specificare quale tipo di nodi nel sotto-albero che si desidera giocare. NodeFilter interfaccia definisce 15 diverse costanti per aiutarvi in questo. Di queste costanti, che verrà utilizzato per lo più le seguenti:

NodeFilter.SHOW_ALL (per la selezione di tutti i nodi)
NodeFilter.SHOW_ELEMENT (per la selezione solo i nodi di testo)
NodeFilter.SHOW_ATTRIBUTE (per la selezione solo i nodi di attributi)
NodeFilter.SHOW_TEXT (per la selezione solo i nodi elemento)

Ecco un esempio di funzione che vi darà l'accesso a tutti i nodi di testo:

Funzione domwalker (root) {
var rootNode = document.getElementById (root)
var walker = document.createTreeWalker (rootNode, NodeFilter.SHOW_TEXT, null, false)

while (walker.nextNode ()) {
// Fa qualcosa con il nodo corrente
}
}

Utilizzando un semplice ciclo while, si può camminare attraverso tutti i nodi presenti in una sotto-albero DOM. Nell'esempio precedente, viene restituito sub-albero con soli nodi di testo.

Traslazione DOM è spesso eseguita durante lo sviluppo di applicazioni Web con JavaScript, Perl, Python, ecc Per esempio, l'altro giorno, quando avevo bisogno di randomizzare un elenco HTML , ho dovuto prendere tutti i nodi Li e poi mescolarle. Anche se, in questo caso utilizzato un altro metodo per accedere nodi.

Spero che questo metodo vi aiuterà a scrivere codice migliore e più facile.