TreeWalker: Ein praktischer Leitfaden zum DOM-Traversal

Vor kurzem habe ich in meiner Freizeit damit begonnen, an einer neuen Chrome-Erweiterung zu arbeiten, und bei der Recherche, wie man mit einigen der Funktionalitäten umgeht, habe ich begonnen, immer mehr Funktionalitäten zu entdecken, die JS im Umgang mit dem DOM von hat Seite.

Angesichts der Tatsache, dass eine überwältigende Anzahl von Menschen, die JS verwenden, es nur über ein Framework verwenden, wäre dies ein interessantes Thema für eine Reihe von kurzen Artikeln, damit die Leute etwas mehr über die zugrunde liegenden Technologien erfahren, auf die sich die Frameworks verlassen, auf die sie sich verlassen tatsächlich verwenden.

Das kennen wir alle: Sie müssen bestimmte Elemente im DOM finden, aber querySelector und getElementsBy* reichen nicht ganz aus. Möglicherweise müssen Sie alle Textknoten finden, die eine bestimmte Phrase enthalten, oder Sie möchten Elemente durchlaufen, die bestimmte Bedingungen erfüllen, während andere übersprungen werden. Hier kommt TreeWalker ins Spiel – eine leistungsstarke, aber oft übersehene DOM-Traversal-API.

Was ist TreeWalker?

TreeWalker ist eine DOM-Schnittstelle, mit der Sie DOM-Knoten effizient durchlaufen und filtern können. Betrachten Sie es als eine leistungsfähigere und flexiblere Alternative zu Methoden wie querySelector. Während querySelector Ihnen Elemente bereitstellt, die einem CSS-Selektor entsprechen, können Sie mit TreeWalker Folgendes tun:

• Navigieren Sie durch den DOM-Baum in jede Richtung (vorwärts, rückwärts, oben, unten)
• Knoten basierend auf benutzerdefinierten Bedingungen filtern
• Überspringen Sie bestimmte Teile des Baums vollständig
• Direkt auf Textknoten zugreifen (was querySelector nicht kann)

Einen TreeWalker erstellen

Beginnen wir mit einem einfachen Beispiel:

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

Die drei Parameter sind:

1. Wurzelknoten – wo mit der Traversierung begonnen werden soll
2. Welche Arten von Knoten werden angezeigt (Text, Elemente, Kommentare usw.)
3. Eine Filterfunktion, die entscheidet, welche Knoten akzeptiert oder abgelehnt werden

Beispiele aus der Praxis

1. Text suchen und ersetzen

Hier ist etwas, das Sie tatsächlich verwenden werden – Text suchen und ersetzen und dabei die HTML-Struktur beibehalten.

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

Dies ist viel effizienter als die Verwendung von innerHTML und beeinträchtigt weder Ereignis-Listener noch Formulareingabewerte.

2. Benutzerdefinierte DOM-Abfrage

Müssen Sie Elemente finden, die komplexen Bedingungen entsprechen? TreeWalker ist für Sie da. Lassen Sie uns etwas Komplexeres erstellen – sagen wir, Sie müssen alle Elemente, die bestimmten Text enthalten, aber nur, wenn sie sich innerhalb von

befinden. Elemente mit einer bestimmten Klasse und ignorieren Sie alle Elemente innerhalb von Elemente:

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

Das würde passen:

✅ Passt zu:

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

Wann sollten Sie TreeWalker verwenden?

TreeWalker leuchtet, wenn:

1. Sie müssen Textknoten finden (querySelector kann dies nicht)
2. Sie haben komplexe Filteranforderungen
3. Sie müssen das DOM in einer bestimmten Reihenfolge durchlaufen
4. Leistung ist wichtig (TreeWalker ist im Allgemeinen schneller als rekursive DOM-Durchquerung)

TypeScript-Unterstützung

Gute Nachrichten für TypeScript-Benutzer – die Typen sind direkt integriert:

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

Letzte Gedanken

TreeWalker ist eine dieser APIs, nach denen Sie, wenn Sie erst einmal davon erfahren, häufiger greifen werden, als Sie vielleicht erwarten. Es ist besonders nützlich für die Erstellung von Barrierefreiheitstools, Content-Management-Systemen oder anderen Anwendungen, die DOM-Inhalte programmgesteuert analysieren oder ändern müssen.

Obwohl es auf den ersten Blick komplex erscheinen mag, ist TreeWalker aufgrund seiner Leistungsfähigkeit und Flexibilität eine Ergänzung Ihres Toolkits wert. Wenn Sie das nächste Mal eine rekursive DOM-Traversal-Funktion schreiben, überlegen Sie, ob TreeWalker möglicherweise besser geeignet ist.

P.S. Wenn Sie es bis hierher geschafft haben, hier ein Profi-Tipp: Kombinieren Sie TreeWalker mit MutationObserver, um leistungsstarke DOM-Überwachungstools zu erstellen. Aber das ist ein Thema für einen anderen Artikel... ?

---

Wenn Sie diesen Artikel hilfreich fanden, können Sie ihn gerne liken und ihm folgen, um weitere Tipps und Tricks zu JavaScript zu erhalten.

Titelbild von Branko Stancevic auf Unsplash

Titelbild von Branko Stancevic auf Unsplash
Katzenfoto von Jan Gustavsson auf Unsplash

Das obige ist der detaillierte Inhalt vonTreeWalker: Ein praktischer Leitfaden zum DOM-Traversal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript typescript css chrome html if for while Filter break using class Interface Event JS number function dom this innerHTML input Access

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn