DOM TreeWalker API

A DOM TreeWalker API

A TreeWalker API lehetővé teszi a fejlesztők számára, hogy létrehozzanak egy treeWalker objektumot, amely felhasználható a DOM fa bejárására. A treeWalker számos módszerrel rendelkezik, amelyek segítségével mozgatható a treeWalker aktuális pozíciója a DOM-fán belül, valamint az aktuális csomóponttal kapcsolatos információk visszaadására.

A TreeWalker API egy hatékony eszköz a DOM-fa bejárására. Ezzel könnyedén mozoghat a fában, és információkat kaphat a talált csomópontokról. Az API számos kényelmi módszert is biztosít a gyakori műveletekhez, például egy csomópont következő vagy előző testvérének beszerzéséhez, vagy a szülőcsomópont beszerzéséhez.

Példák a TreeWalker API használatára

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

A fenti kód létrehoz egy TreeWalker-t, amelyet azután a DOM-fa bejárására használnak. A TreeWalker csak olyan csomópontokat fogad el, amelyek DIV elemek, ezért átugorja a többi típusú csomópontot. Ahogy áthalad a fán, kiírja minden egyes talált DIV csomópont címkenevét. Ez egy hasznos módja annak, hogy megtalálja az összes DIV elemet a dokumentumban.

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

A fenti kód ugyanazt teszi, mint az előző példa, de csak azokat a DIV csomópontokat fogadja el, amelyek a "my-class" osztályúak. Ha találkozik egy ilyen csomóponttal, egy 1 képpontos fekete keretet ad hozzá. Ez csak egy egyszerű példa arra, hogy mit tehet a TreeWalker API-val.

(Majdnem) teljesen zöld

A TreeWalker API használata során az egyik kihívás az, hogy könnyen elveszíthetjük az aktuális csomópontot. Ennek az az oka, hogy az API nem biztosít módszert egy adott csomópont megtalálásához. Ehelyett a fa körüli mozgás módszereit kell használnia, ami trükkös lehet. Egy másik kihívás, hogy az API-t nem nagyon támogatják a böngészők, ezért előfordulhat, hogy polifilt kell használni.

Összegzés

A TreeWalker API egy hatékony eszköz a DOM-fa bejárására. Számos módszert biztosít a fában való mozgáshoz, valamint az aktuális csomóponttal kapcsolatos információk megszerzéséhez. Az API néhány kényelmi módszert is biztosít a gyakori műveletekhez. Az API használata azonban kihívást jelenthet, és a böngészők nem támogatják megfelelően.

További érdekes API-k, amelyek a DOM adatlekéréshez kapcsolódnak, a következők, amelyekre a jövőben talán kitérek.

• A DOM Range API
• A DOM NodeIterator API