Cara Memfilter dan Melintasi DOM Tree dengan JavaScript

Apakah Anda tahu ada API JavaScript yang misi utamanya adalah untuk menyaring dan beralih melalui node kami inginkan dari pohon DOM? Faktanya, bukan hanya satu tetapi ada dua API seperti itu: NodeIterator dan TreeWalker. Mereka sangat mirip satu sama lain, dengan beberapa perbedaan yang bermanfaat. Keduanya bisa mengembalikan daftar node yang ada di bawah simpul akar yang diberikan saat mematuhi setiap aturan filter standar dan / atau kustom diterapkan pada mereka.

Filter standar yang tersedia di API dapat membantu kami menargetkan berbagai jenis node seperti simpul teks atau simpul elemen, dan filter khusus (ditambahkan oleh kami) dapat lanjut saring banyak, misalnya dengan mencari node dengan konten tertentu. Daftar node yang dikembalikan adalah iterable, yaitu mereka bisa dilingkarkan, dan kami dapat bekerja dengan semua node individual dalam daftar.

Cara menggunakan NodeIterator API

SEBUAH NodeIterator objek dapat dibuat menggunakan createNodeIterator () metode dokumen antarmuka. Metode ini Dibutuhkan tiga argumen. Yang pertama diperlukan; saya t”itu simpul akar yang menampung semua node yang ingin kita filter.

Argumen kedua dan ketiga adalah pilihan. Mereka adalah filter standar dan kustom, masing-masing. Filter standar tersedia untuk digunakan sebagai konstanta dari NodeFilter obyek.

Misalnya, jika NodeFilter.SHOW_TEXT konstanta ditambahkan sebagai parameter kedua ia akan mengembalikan iterator untuk a daftar semua simpul teks di bawah simpul akar. NodeFilter.SHOW_ELEMENT akan kembali hanya elemen node. Lihat daftar lengkap semua konstanta yang tersedia.

Argumen ketiga (filter khusus) adalah a fungsi yang mengimplementasikan filter.

Ini adalah contoh cuplikan kode:

        
judul
 
 ini adalah pembungkus halaman 
Halo
 
Apa kabar?
 
 txt beberapa tautan    

Anggap saja kita mau ekstrak konten dari semua node teks yang ada di dalam #pembungkus div, ini adalah bagaimana kita menggunakannya NodeIterator:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * keluaran konsol [Log] ini adalah pembungkus halaman [Log] Halo [Log] [Log] Apa kabar? [Log] * / 

Itu nextNode () metode NodeIterator API mengembalikan node berikutnya dalam daftar node teks iterable. Ketika kita menggunakannya dalam sementara loop untuk mengakses setiap node dalam daftar, kami mencatat konten yang dipangkas dari setiap node teks ke konsol. Itu referenceNode properti dari NodeIterator mengembalikan simpul tempat iterator dilampirkan.

Seperti yang Anda lihat di output, ada beberapa node teks dengan hanya ruang kosong untuk isinya. Kita dapat hindari menampilkan konten kosong ini menggunakan filter khusus:

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, fungsi (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * keluaran konsol [Log] ini adalah pembungkus halaman [Log] Halo [Log] Apa kabar? * / 

Fungsi filter khusus mengembalikan konstanta NodeFilter.FILTER_ACCEPTjika simpul teks tidak kosong, yang mengarah ke penyertaan simpul dalam daftar node iterator akan iterasi. Sebaliknya, itu NodeFilter.FILTER_REJECT konstanta dikembalikan untuk mengecualikan node teks kosong dari daftar node yang dapat diubah.

Cara menggunakan TreeWalker API

Seperti yang saya sebutkan sebelumnya, the NodeIterator dan TreeWalker API adalah mirip satu sama lain.

TreeWalker dapat dibuat menggunakan createTreeWalker () metode dokumen antarmuka. Metode ini, sama seperti createNodeFilter (), Dibutuhkan tiga argumen: simpul akar, filter standar, dan filter khusus.

Jika kita menggunakan TreeWalker API alih-alih NodeIterator cuplikan kode sebelumnya terlihat seperti berikut:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, fungsi (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); while (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * keluaran [Log] ini adalah pembungkus halaman [Log] Halo [Log] Apa kabar? * / 

Dari pada referenceNode, itu currentNode properti dari TreeWalker API digunakan untuk mengakses node yang terhubung dengan iterator saat ini. Selain itu nextNode () metode, Treewalker memiliki metode lain yang bermanfaat. Itu sebelumnyaNode () metode (juga hadir dalam NodeIterator) mengembalikan simpul sebelumnya dari simpul iterator saat ini berlabuh ke.

Fungsionalitas serupa dilakukan oleh parentNode (), anak pertama(), anak terakhir(), Sajian sebelumnya (), dan nextSibling () metode. Metode-metode ini hanya tersedia di TreeWalker API.

Berikut contoh kode itu menampilkan anak terakhir dari simpul iterator berlabuh ke:

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

API mana yang harus dipilih

Memilih NodeIterator API, saat Anda hanya perlu iterator sederhana untuk menyaring dan loop melalui node yang dipilih. Dan, pilih TreeWalker API, saat Anda perlu mengakses keluarga node yang difilter, seperti saudara langsung mereka.