TreeWalker: Ein praktischer Leitfaden zum DOM-Traversal-js-Tutorial-php.cn

TreeWalker: Ein praktischer Leitfaden zum DOM-Traversal

Mary-Kate Olsen

Freigeben： 2024-11-23 01:02:11

Original

625 Leute haben es durchsucht

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

Nach dem Login kopieren

Die drei Parameter sind:

Wurzelknoten – wo mit der Traversierung begonnen werden soll
Welche Arten von Knoten werden angezeigt (Text, Elemente, Kommentare usw.)
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');

Nach dem Login kopieren

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