DOM TreeWalker API

Die DOM TreeWalker API

Die TreeWalker API laat ontwikkelaars toe om 'n treeWalker-objek te skep wat gebruik kan word om die DOM-boom te deurkruis. Die treeWalker het 'n aantal metodes wat gebruik kan word om die huidige posisie van die treeWalker binne die DOM-boom te skuif, asook om inligting oor die huidige nodus terug te gee.

Die TreeWalker API is 'n kragtige instrument om die DOM-boom te deurkruis. Daarmee kan jy maklik om die boom beweeg, en inligting kry oor die nodusse wat jy teëkom. Die API bied ook 'n aantal geriefsmetodes vir algemene bewerkings, soos om die volgende of vorige broer of suster van 'n nodus te kry, of om die ouernodus te kry.

Voorbeeld gebruike van die TreeWalker API

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);
}

Die kode hierbo skep 'n TreeWalker, wat dan gebruik word om die DOM-boom te deurkruis. Die TreeWalker aanvaar slegs nodusse wat DIV-elemente is, en dit sal dus enige ander tipe nodus oorslaan. Soos dit die boom deurkruis, druk dit die merkernaam uit van elke DIV-knooppunt wat dit teëkom. Dit is 'n nuttige manier om al die DIV-elemente in 'n dokument te vind.

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';
}

Die kode hierbo doen dieselfde as die vorige voorbeeld, maar aanvaar slegs DIV nodusse wat die "my-klas" klas het. Sodra dit so 'n nodus teëkom, voeg dit 'n 1px swart rand daarby. Dit is net 'n eenvoudige voorbeeld van wat jy met die TreeWalker API kan doen.

(Byna) alles groen

Een van die uitdagings wanneer die TreeWalker API gebruik word, is dat dit maklik kan wees om tred te raak met die huidige nodus. Dit is omdat die API geen metodes verskaf om 'n spesifieke nodus te vind nie. In plaas daarvan moet jy die metodes gebruik om om die boom te beweeg, wat moeilik kan wees. Nog 'n uitdaging is dat die API nie baie goed deur blaaiers ondersteun word nie, so jy sal dalk 'n polyfill moet gebruik.

Opsomming

Die TreeWalker API is 'n kragtige instrument om die DOM-boom te deurkruis. Dit bied 'n aantal metodes om om die boom te beweeg, sowel as om inligting oor die huidige nodus te kry. Die API bied ook 'n paar geriefsmetodes vir algemene bedrywighede. Die API kan egter uitdagend wees om te gebruik, en word nie goed deur blaaiers ondersteun nie.

Ander interessante API's wat verband hou met DOM-dataherwinning is die volgende, wat ek dalk in die toekoms sal dek.

• Die DOM Range API
• Die DOM NodeIterator API