API DOM TreeWalker

L'API DOM TreeWalker

L'API TreeWalker consente agli sviluppatori di creare un oggetto treeWalker che può essere utilizzato per attraversare l'albero DOM. Il treeWalker ha una serie di metodi che possono essere usati per spostare la posizione corrente del treeWalker all'interno dell'albero DOM, così come per restituire informazioni sul nodo corrente.

L'API TreeWalker è un potente strumento per attraversare l'albero DOM. Con esso, puoi spostarti facilmente nell'albero e ottenere informazioni sui nodi che incontri. L'API fornisce anche una serie di metodi pratici per operazioni comuni, come ottenere il fratello successivo o precedente di un nodo o ottenere il nodo padre.

Esempi di utilizzo dell'API TreeWalker

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      return node.tagName === 'DIV' ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  console.log(treeWalker.currentNode.tagName);
}

Il codice sopra crea un TreeWalker, che viene quindi utilizzato per attraversare l'albero DOM. Il TreeWalker accetta solo nodi che sono elementi DIV, quindi salterà qualsiasi altro tipo di nodo. Mentre attraversa l'albero, stampa il nome del tag di ogni nodo DIV che incontra. Questo è un modo utile per trovare tutti gli elementi DIV in un documento.

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      // Check if the node is a DIV, and if it has the "my-class" class.
      return node.tagName === 'DIV' && node.classList.contains('my-class') ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  // Do something with the node, such as add a border.
  treeWalker.currentNode.style.border = '1px solid black';
}

Il codice sopra fa lo stesso dell'esempio precedente, ma accetta solo nodi DIV che hanno la classe "my-class". Una volta che incontra un tale nodo, aggiunge un bordo nero di 1px ad esso. Questo è solo un semplice esempio di cosa puoi fare con l'API TreeWalker.

(Quasi) tutto verde

Una delle sfide quando si utilizza l'API TreeWalker è che può essere facile perdere traccia del nodo corrente. Questo perché l'API non fornisce alcun metodo per trovare un nodo specifico. Invece, devi usare i metodi per spostarti intorno all'albero, il che può essere complicato. Un'altra sfida è che l'API non è molto ben supportata dai browser, quindi potrebbe essere necessario utilizzare un polyfill.

Riepilogo

L'API TreeWalker è un potente strumento per attraversare l'albero DOM. Fornisce una serie di metodi per spostarsi nell'albero, nonché per ottenere informazioni sul nodo corrente. L'API fornisce anche alcuni metodi pratici per le operazioni comuni. Tuttavia, l'API può essere difficile da usare e non è ben supportata dai browser.

Altre API interessanti relative al recupero dei dati DOM sono le seguenti, che potrei trattare in futuro.

• L'API della gamma DOM
• L'API DOM NodeIterator