TreeWalker: Panduan Praktikal untuk DOM Traversal

Baru-baru ini saya telah mula mengusahakan sambungan Chrome baharu dalam masa lapang saya dan dalam penyelidikan tentang cara mengendalikan beberapa fungsi, saya telah mula menemui lebih banyak fungsi yang JS ada dalam menangani DOM bagi halaman.

Memandangkan sebilangan besar orang yang menggunakan JS menggunakannya hanya melalui rangka kerja, ini akan menjadikan topik yang menarik untuk satu siri artikel pendek untuk orang ramai mengetahui lebih lanjut tentang teknologi asas yang merupakan rangka kerja yang mereka harapkan. sebenarnya menggunakan.

Kita semua pernah ke sana — anda perlu mencari elemen khusus dalam DOM, tetapi querySelector dan getElementsBy* tidak cukup memotongnya. Mungkin anda perlu mencari semua nod teks yang mengandungi frasa tertentu atau anda ingin melintasi elemen yang sepadan dengan syarat tertentu sambil melangkau yang lain. Masukkan TreeWalker - API traversal DOM yang berkuasa tetapi sering diabaikan.

Apakah TreeWalker?

TreeWalker ialah antara muka DOM yang membolehkan anda melintasi dan menapis nod DOM dengan cekap. Fikirkannya sebagai alternatif yang lebih berkuasa dan fleksibel kepada kaedah seperti querySelector. Walaupun querySelector memberikan anda elemen yang sepadan dengan pemilih CSS, TreeWalker membolehkan anda:

• Navigasi pepohon DOM ke mana-mana arah (ke hadapan, belakang, atas, bawah)
• Tapis nod berdasarkan keadaan tersuai
• Langkau bahagian tertentu pokok sepenuhnya
• Akses nod teks secara langsung (sesuatu querySelector tidak boleh lakukan)

Mencipta TreeWalker

Mari kita mulakan dengan contoh asas:

const walker = document.createTreeWalker(
    document.body, // Root node to start traversal
    NodeFilter.SHOW_TEXT, // Only show text nodes
    {
        acceptNode: function(node) {
            // Only accept text nodes that aren't empty
            return node.textContent.trim().length > 0
                ? NodeFilter.FILTER_ACCEPT
                : NodeFilter.FILTER_REJECT;
        }
    }
);

Tiga parameter tersebut ialah:

1. Nod akar — tempat untuk mula merentasi
2. Apakah jenis nod yang hendak ditunjukkan (teks, elemen, ulasan, dll.)
3. Fungsi penapis yang menentukan nod yang hendak diterima atau ditolak

Contoh Dunia Nyata

1. Cari dan Gantikan Teks

Inilah sesuatu yang sebenarnya anda akan gunakan — mencari dan menggantikan teks sambil mengekalkan struktur HTML.

function replaceText(root, search, replace) {
    const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_TEXT,
        {
            acceptNode: function(node) {
                return node.textContent.includes(search)
                    ? NodeFilter.FILTER_ACCEPT
                    : NodeFilter.FILTER_REJECT;
            }
        }
    );

    let node;
    while (node = walker.nextNode()) {
        node.textContent = node.textContent.replace(search, replace);
    }
}

// Usage
replaceText(document.body, 'old text', 'new text');

Ini jauh lebih cekap daripada menggunakan innerHTML dan tidak akan memecahkan pendengar acara atau membentuk nilai input.

2. Pertanyaan DOM Tersuai

Perlu mencari elemen yang sepadan dengan keadaan kompleks? TreeWalker telah membantu anda. Mari bina sesuatu yang lebih kompleks — katakan anda perlu mencari semua elemen yang mengandungi teks tertentu, tetapi hanya jika ia berada di dalam

elemen dengan kelas tertentu dan abaikan mana-mana yang berada di dalam elemen:

function findElementsByComplexCondition(root, config) {
    const results = [];
    const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
        {
            acceptNode: function(node) {
                // Skip nodes we don't care about early
                if (node.nodeType === Node.ELEMENT_NODE &&
                    node.tagName === 'BUTTON') {
                    return NodeFilter.FILTER_REJECT; // Skip button and its contents
                }

                // Check for matching span elements
                if (node.nodeType === Node.ELEMENT_NODE &&
                    node.tagName === 'SPAN') {
                    // Check if parent is a div with required class
                    const parent = node.parentElement;
                    if (!parent ||
                        parent.tagName !== 'DIV' ||
                        !parent.classList.contains(config.parentClass)) {
                        return NodeFilter.FILTER_SKIP;
                    }

                    // Check if span contains the required text
                    const text = node.textContent?.toLowerCase() || '';
                    if (!text.includes(config.searchText.toLowerCase())) {
                        return NodeFilter.FILTER_SKIP;
                    }

                    return NodeFilter.FILTER_ACCEPT;
                }

                return NodeFilter.FILTER_SKIP;
            }
        }
    );

    let node;
    while (node = walker.nextNode()) {
        results.push(node);
    }
    return results;
}

Ini akan sepadan dengan:

✅ Akan sepadan dengan:

<div>



<p>❌ Won't match all of the following:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>[Rest of code examples...]</p>

<h2>
  
  
  The Swiss Army Knife of DOM Traversal
</h2>

<p>TreeWalker isn't limited to forward traversal. You can move in any direction:<br>
</p>

<pre class="brush:php;toolbar:false">// Move to next node
walker.nextNode();

// Move to previous node
walker.previousNode();

// Move to first child
walker.firstChild();

// Move to last child
walker.lastChild();

// Move to parent
walker.parentNode();

Bilakah Anda Harus Menggunakan TreeWalker?

TreeWalker bersinar apabila:

1. Anda perlu mencari nod teks (querySelector tidak boleh melakukan ini)
2. Anda mempunyai keperluan penapisan yang kompleks
3. Anda perlu merentasi DOM dalam susunan tertentu
4. Perkara prestasi (TreeWalker biasanya lebih pantas daripada rekursif DOM traversal)

Sokongan TypeScript

Berita baik untuk pengguna TypeScript — jenis dibina terus dalam:

const walker = document.createTreeWalker(
    document.body, // Root node to start traversal
    NodeFilter.SHOW_TEXT, // Only show text nodes
    {
        acceptNode: function(node) {
            // Only accept text nodes that aren't empty
            return node.textContent.trim().length > 0
                ? NodeFilter.FILTER_ACCEPT
                : NodeFilter.FILTER_REJECT;
        }
    }
);

Fikiran Akhir

TreeWalker ialah salah satu API yang, apabila anda mengetahui tentangnya, anda akan mendapati diri anda mencapai lebih kerap daripada yang anda jangkakan. Ia amat berguna untuk membina alat kebolehaksesan, sistem pengurusan kandungan atau sebarang aplikasi yang perlu menganalisis atau mengubah suai kandungan DOM secara pemprograman.

Walaupun ia mungkin kelihatan rumit pada mulanya, kuasa dan fleksibiliti TreeWalker menjadikannya berbaloi untuk ditambahkan pada kit alat anda. Lain kali anda mendapati diri anda menulis fungsi rekursif DOM traversal, pertimbangkan sama ada TreeWalker mungkin lebih sesuai.

P.S. Jika anda telah berjaya sejauh ini, berikut ialah petua pro: Gabungkan TreeWalker dengan MutationObserver untuk mencipta alat pemantauan DOM yang berkuasa. Tetapi itu topik untuk artikel lain... ?

---

Jika anda mendapati artikel ini membantu, sila suka dan ikuti untuk mendapatkan lebih banyak petua dan helah JavaScript.

Foto muka depan oleh Branko Stancevic di Unsplash

Foto muka depan oleh Branko Stancevic di Unsplash
Foto kucing oleh Jan Gustavsson di Unsplash