DOM TreeWalker API'sı

TreeWalker API: DOM ağacında gezinmek için güçlü bir araç.

DOM TreeWalker API'si

TreeWalker API, geliştiricilerin DOM ağacında gezinmek için kullanılabilecek bir treeWalker nesnesi oluşturmasına olanak tanır. TreeWalker, treeWalker'ın mevcut konumunu DOM ağacı içinde taşımak ve mevcut düğüm hakkında bilgi döndürmek için kullanılabilecek bir dizi yönteme sahiptir.

TreeWalker API, DOM ağacında geçiş yapmak için güçlü bir araçtır. Bununla ağacın etrafında kolayca hareket edebilir ve karşılaştığınız düğümler hakkında bilgi alabilirsiniz. API ayrıca, bir düğümün sonraki veya önceki kardeşini almak veya ana düğümü almak gibi yaygın işlemler için bir dizi kolaylık yöntemi sağlar.

TreeWalker API'sinin örnek kullanımları

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

Yukarıdaki kod, daha sonra DOM ağacını geçmek için kullanılan bir TreeWalker oluşturur. TreeWalker yalnızca DIV öğeleri olan düğümleri kabul eder ve bu nedenle diğer herhangi bir düğüm türünü atlar. Ağacı geçerken karşılaştığı her DIV düğümünün etiket adını yazdırır. Bu, bir belgedeki tüm DIV öğelerini bulmanın kullanışlı bir yoludur.

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

Yukarıdaki kod, önceki örnekle aynı şeyi yapar, ancak yalnızca "sınıfım" sınıfına sahip DIV düğümlerini kabul eder. Böyle bir düğümle karşılaştığında, ona 1 piksel siyah kenarlık ekler. Bu, TreeWalker API ile neler yapabileceğinizin basit bir örneğidir.

(Neredeyse) tamamen yeşil

TreeWalker API'sini kullanırken karşılaşılan zorluklardan biri, mevcut düğümün izini kaybetmenin kolay olabilmesidir. Bunun nedeni, API'nin belirli bir düğümü bulmak için herhangi bir yöntem sağlamamasıdır. Bunun yerine, ağacın etrafında hareket etme yöntemlerini kullanmalısınız ki bu zor olabilir. Diğer bir zorluk, API'nin tarayıcılar tarafından çok iyi desteklenmemesidir, bu nedenle bir çoklu dolgu kullanmanız gerekebilir.

Özet

TreeWalker API, DOM ağacında geçiş yapmak için güçlü bir araçtır. Ağacın etrafında hareket etmenin yanı sıra mevcut düğüm hakkında bilgi almak için bir dizi yöntem sağlar. API ayrıca yaygın işlemler için bazı kolaylık yöntemleri sağlar. Ancak API'nin kullanımı zor olabilir ve tarayıcılar tarafından iyi desteklenmez.

DOM veri alımıyla ilgili diğer ilginç API'ler, gelecekte ele alabileceğim aşağıdakilerdir.

  • DOM Aralığı API'si
  • DOM NodeIterator API'si