DOM Ağacıyla JavaScript Nasıl Filtrelenir ve Geçilir

Tek görevi olan bir JavaScript API olduğunu biliyor muydunuz? filtreleyin ve düğümleri yineleyin DOM ağacından istiyoruz? Aslında, bir değil ama iki tane API var: NodeIterator ve TreeWalker. Birbirlerine oldukça benzerler, bazı yararlı farklılıklar var. Her ikisi de olabilir bir düğüm listesi döndür uyurken, belirli bir kök düğümü altında bulunanlar önceden tanımlanmış ve / veya özel filtre kuralları onlara uygulanan.

API’lerde mevcut olan önceden tanımlanmış filtreler bize yardımcı olabilir farklı düğüm türlerini hedefle metin düğümleri veya öğe düğümleri ve özel filtreler (bizim tarafımızdan eklenen) Demet daha filtre, örneğin, belirli içerikleri olan düğümleri arayarak. Döndürülen düğümlerin listesi iterable, yani olabilirler ilmekledi, ve listedeki tüm düğümlerle çalışabiliriz.

Nasıl kullanılır NodeIterator API

bir NodeIterator nesne kullanılarak oluşturulabilir createNodeIterator () yöntemi belge arayüz. Bu method üç argüman alır. İlki gereklidir; o”s kök düğümü filtrelemek istediğimiz tüm düğümleri tutar..

İkinci ve üçüncü argümanlar isteğe bağlı. Onlar önceden tanımlanmış ve özel filtreler, sırasıyla. Önceden tanımlanmış filtreler sabitleri NodeFilter nesne.

Örneğin, eğer NodeFilter.SHOW_TEXT İkinci parametre olarak sabit eklenir. kök düğümü altındaki tüm metin düğümlerinin listesi. NodeFilter.SHOW_ELEMENT geri dönücek sadece element düğümleri. Tam listesine bakın mevcut tüm sabitler.

Üçüncü argüman (özel filtre) bir süzgeci uygulayan işlev.

İşte bir örnek kod pasajı:

        
Başlık
 
 bu sayfa sarıcı 
Merhaba
 
Nasılsın?
 
 Txt bazı bağlantı    

İstediğimizi varsayarsak içindeki tüm metin düğümlerinin içeriğini çıkarın. #wrapper div, kullanarak nasıl gidiyor NodeIterator:

 var div = document.querySelector ('# sarmalayıcı'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsol çıkışı [Günlük] bu sayfa sarmalayıcıdır [Günlük] Merhaba [Günlük] [Günlük] Nasılsınız? [Giriş] * / 

nextNode () yöntemi NodeIterator API yinelenebilir metin düğümleri listesindeki bir sonraki düğümü döndürür. Bir kullandığımız zaman süre Listedeki her düğüme erişmek için, her metin düğümünün kırpılmış içeriğini konsola kaydederiz. referenceNode mülkiyet NodeIterator yineleyicinin o anda bağlı olduğu düğümü döndürür.

Çıktıda görebileceğiniz gibi, içerikleri için sadece boş alanları olan bazı metin düğümleri vardır. Yapabiliriz Özel bir filtre kullanarak bu boş içerikleri göstermekten kaçının:

 var div = document.querySelector ('# sarmalayıcı'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * konsol çıkışı [Günlük] bu sayfa sarmalayıcıdır [Günlük] Merhaba [Günlük] Nasılsın? * / 

Özel filtre işlevi sabiti döndürür NodeFilter.FILTER_ACCEPTMetin düğümü boş değilse, bu da bu düğümün düğüm listesine dahil edilmesine yol açar, yineleyici yinelenir. Aksine, NodeFilter.FILTER_REJECT için sabit döndürülür boş metin düğümlerini dışla yinelenebilir düğümler listesinden.

Nasıl kullanılır TreeWalker API

Daha önce de belirttiğim gibi NodeIterator ve TreeWalker API'ler birbirine benzer.

TreeWalker kullanılarak oluşturulabilir createTreeWalker () yöntemi belge arayüz. Bu yöntem gibi createNodeFilter (), üç argüman alır: kök düğümü, önceden tanımlanmış bir filtre ve özel bir filtre.

Eğer biz kullan TreeWalker API yerine NodeIterator önceki kod pasajı aşağıdaki gibi görünür:

 var div = document.querySelector ('# sarmalayıcı'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_RE:;); while (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Günlük] bu sayfa sarmalayıcıdır [Günlük] Merhaba [Günlük] Nasılsın? * / 

Yerine referenceNode, currentnode mülkiyeti TreeWalker API kullanılır yineleyicinin bağlı olduğu düğüme eriş. Buna ek olarak nextNode () yöntem, Treewalker başka faydalı yöntemleri var. previousNode () yöntem (ayrıca mevcut NodeIterator) önceki düğümü döndürür düğümün yineleyicisi şu anda bağlı.

Benzer işlevsellik parentNode (), ilk çocuk(), lastChild (), previousSibling (), ve nextSibling () yöntemleri. Bu yöntemler yalnızca TreeWalker API.

İşte bir kod örneği düğümün son alt bilgisini verir yineleyici aşağıdakilere bağlanır:

 var div = document.querySelector ('# sarmalayıcı'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * çıkış [Günlük] 
Nasılsın?
 * / 

Seçilecek API

Seç NodeIterator API, ne zaman sadece basit bir yineleyiciye ihtiyacım var Seçilen düğümler arasında filtre ve döngü uygulamak için. Ve seç TreeWalker API, ne zaman Filtrelenen düğümlerin ailesine erişme ihtiyacı, onların acil kardeşleri gibi.