Cara Menapis dan Menarik Pohon DOM dengan JavaScript

Adakah anda tahu ada API JavaScript yang misi tunggalnya menyaring dan meleset melalui nod kita mahu dari pokok DOM? Malah, bukan satu tetapi ada dua API seperti itu: NodeIterator dan TreeWalker. Mereka agak sama antara satu sama lain, dengan beberapa perbezaan yang berguna. Kedua-duanya boleh kembali senarai nod yang terdapat di bawah nod root yang diberikan semasa mematuhi sebarang peraturan penapis yang ditetapkan dan / atau adat memohon kepada mereka.

Penapis yang dipratentukan yang terdapat di API boleh membantu kami sasaran pelbagai jenis nod seperti nod atau nod teks, dan penapis tersuai (ditambah oleh kami) boleh penapis selanjutnya, misalnya dengan mencari nod dengan kandungan tertentu. Senarai pemulangan nod adalah iterable, jadi mereka boleh bergelung melalui, dan kita boleh bekerjasama dengan semua nod individu dalam senarai.

Cara menggunakannya NodeIterator API

A NodeIterator objek boleh dibuat dengan menggunakan createNodeIterator () kaedah dokumen antara muka. Kaedah ini mengambil tiga hujah. Yang pertama diperlukan; ia”s the nod akar yang memegang semua nod yang kita ingin menyaring.

Hujah kedua dan ketiga adalah pilihan. Mereka adalah penapis yang telah ditetapkan dan khusus, masing-masing. Penapis yang dipratentukan tersedia untuk digunakan sebagai pemalar NodeFilter objek.

Contohnya, jika NodeFilter.SHOW_TEXT pemalar ditambah sebagai parameter kedua, ia akan mengembalikan penyesuai untuk senarai semua nod teks di bawah nod akar. NodeFilter.SHOW_ELEMENT akan kembali hanya nod elemen. Lihat senarai penuh semua pemalar yang ada.

Hujah ketiga (penapis khusus) ialah fungsi yang melaksanakan penapis.

Berikut adalah contoh coretan kod:

        
tajuk
 
 ini adalah pembungkus halaman 
Hello
 
Apa khabar?
 
 txt beberapa pautan    

Dengan mengandaikan kami mahu ekstrak kandungan semua nod teks yang ada di dalamnya #wrapper div, ini adalah bagaimana kita menggunakannya NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); sementara (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * output konsol [Log] ini pembungkus halaman [Log] Hello [Log] [Log] Bagaimana anda? [Log] * / 

The nextNode () kaedah NodeIterator API mengembalikan nod seterusnya dalam senarai nod teks boleh diubah. Apabila kita menggunakannya dalam a sementara gelung untuk mengakses setiap nod dalam senarai, kami log kandungan yang dipotong setiap nod teks ke dalam konsol. The referenceNode harta tanah NodeIterator mengembalikan nod yang disambungkan iterator pada masa ini.

Seperti yang anda lihat dalam output, terdapat beberapa nod teks dengan hanya ruang kosong untuk kandungannya. Kita boleh elakkan daripada menunjukkan kandungan kosong menggunakan penapis tersuai:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); sementara (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * output konsol [Log] ini pembungkus halaman [Log] Hello [Log] Bagaimana anda? * / 

Fungsi penapis tersuai kembali pemalar NodeFilter.FILTER_ACCEPTjika nod teks tidak kosong, yang membawa kepada penyertaan nod itu dalam senarai nod yang akan menjadi lelaran. Sebaliknya, yang NodeFilter.FILTER_REJECT pemalar dikembalikan agar tidak termasuk nod teks kosong dari senarai nod yang boleh ditafsirkan.

Cara menggunakannya TreeWalker API

Seperti yang saya nyatakan sebelum ini, NodeIterator dan TreeWalker API adalah serupa dengan satu sama lain.

TreeWalker boleh dibuat dengan menggunakan createTreeWalker () kaedah dokumen antara muka. Kaedah ini, seperti createNodeFilter (), mengambil tiga hujah: nod akar, penapis yang telah ditetapkan, dan penapis tersuai.

Jika kita menggunakan TreeWalker API bukan NodeIterator coretan kod sebelumnya kelihatan seperti berikut:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); sementara (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [Log] ini pembungkus halaman [Log] Hello [Log] Bagaimana anda? * / 

Sebaliknya referenceNode, yang currentNode harta benda TreeWalker API digunakan untuk akses nod yang mana penyesuai kini dilampirkan. Sebagai tambahan kepada nextNode () kaedah, Treewalker mempunyai kaedah lain yang berguna. The sebelumnyaNode () kaedah (juga terdapat di dalam NodeIterator) mengembalikan nod sebelumnya dari nod iterator kini berlabuh.

Fungsi yang sama dilakukan oleh parentNode (), firstChild (), anak bongsu(), sebelumnyaSibling (), dan nextSibling () kaedah. Kaedah ini adalah hanya terdapat di dalam TreeWalker API.

Berikut adalah contoh kod itu mengeluarkan anak terakhir nod tersebut penyesuai berlabuh kepada:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * output [Log] 
Apa khabar?
 * / 

Yang API untuk dipilih

Pilih NodeIterator API, apabila anda hanya memerlukan pemula yang mudah untuk menapis dan menghidupkan melalui nod yang dipilih. Dan, pilih TreeWalker API, apabila anda perlu mengakses keluarga nod yang ditapis, seperti adik beradik mereka.