DOM TreeWalker API

La DOM TreeWalker API

La TreeWalker API permesas al programistoj krei treeWalker-objekton, kiu povas esti uzata por trairi la DOM-arbon. La treeWalker havas kelkajn metodojn, kiuj povas esti uzataj por movi la nunan pozicion de la treeWalker ene de la DOM-arbo, kaj ankaŭ por resendi informojn pri la nuna nodo.

La TreeWalker API estas potenca ilo por trairi la DOM-arbon. Per ĝi, vi povas facile moviĝi ĉirkaŭ la arbo, kaj akiri informojn pri la nodoj, kiujn vi renkontas. La API ankaŭ disponigas kelkajn oportunajn metodojn por oftaj operacioj, kiel ekzemple ricevi la sekvan aŭ antaŭan gefraton de nodo, aŭ ricevi la gepatronodon.

Ekzemplaj uzokutimoj de la 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);
}

La supra kodo kreas TreeWalker, kiu tiam estas uzata por trairi la DOM-arbon. La TreeWalker nur akceptas nodojn kiuj estas DIV-elementoj, kaj do ĝi preterpasos ajnan alian tipon de nodo. Dum ĝi trairas la arbon, ĝi presas la etikednomon de ĉiu DIV-nodo kiun ĝi renkontas. Ĉi tio estas utila maniero trovi ĉiujn DIV-elementojn en dokumento.

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

La ĉi-supra kodo faras la samon kiel la antaŭa ekzemplo, sed nur akceptas DIV-nodojn kiuj havas la "my-class" klason. Post kiam ĝi renkontas tian nodon, ĝi aldonas 1px nigran randon al ĝi. Ĉi tio estas nur simpla ekzemplo de tio, kion vi povas fari kun la TreeWalker API.

(Preskaŭ) ĉio verda

Unu el la defioj kiam vi uzas la TreeWalker API estas, ke povas esti facile perdi la spuron de la nuna nodo. Ĉi tio estas ĉar la API ne provizas iujn ajn metodojn por trovi specifan nodon. Anstataŭe, vi devas uzi la metodojn por moviĝi ĉirkaŭ la arbo, kio povas esti malfacila. Alia defio estas, ke la API ne estas tre bone subtenata de retumiloj, do vi eble devos uzi poliplenigaĵon.

Resumo

La TreeWalker API estas potenca ilo por trairi la DOM-arbon. Ĝi disponigas kelkajn metodojn por moviĝi ĉirkaŭ la arbo, same kiel por ricevi informojn pri la nuna nodo. La API ankaŭ disponigas kelkajn oportunajn metodojn por oftaj operacioj. Tamen, la API povas esti malfacila uzi, kaj ne estas bone subtenata de retumiloj.

Aliaj interesaj API-oj rilataj al DOM-datumo-reakiro estas la sekvaj, kiujn mi eble kovros estonte.

• La DOM Range API
• La DOM NodeIterator API