TreeWalker: DOM トラバーサルの実践ガイド

最近、私は自由時間に新しい Chrome 拡張機能の開発に取り組み始めました。いくつかの機能を処理する方法を研究する中で、JS が DOM を処理する際に持つ機能をますます発見し始めました。ページ。

JS を使用している圧倒的な数の人がフレームワークを通じてのみ JS を使用していることを考えると、これは、人々が依存しているフレームワークの基礎となるテクノロジーについてもう少し詳しく学ぶための一連の短い記事として興味深いトピックとなるでしょう。実際に使っています。

誰もが経験したことがあります。DOM 内の特定の要素を見つける必要がありますが、querySelector と getElementsBy* だけでは十分ではありません。特定の語句を含むすべてのテキスト ノードを検索する必要がある場合や、特定の条件に一致する要素を検索し、他の要素をスキップしたい場合があります。 TreeWalker をご紹介します。これは、強力だが見落とされがちな DOM トラバーサル API です。

ツリーウォーカーとは何ですか？

TreeWalker は、DOM ノードを効率的に走査してフィルタリングできるようにする DOM インターフェイスです。これは、querySelector のようなメソッドに代わる、より強力で柔軟な代替手段と考えてください。 querySelector では CSS セレクターに一致する要素が提供されますが、TreeWalker では次のことが可能です。

• DOM ツリーを任意の方向 (前方、後方、上、下) に移動します
• カスタム条件に基づいてノードをフィルタリングします
• ツリーの特定の部分を完全にスキップします
• テキスト ノードに直接アクセスします (querySelector では実行できない機能)

ツリーウォーカーの作成

基本的な例から始めましょう:

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

3 つのパラメータは次のとおりです:

1. ルートノード — トラバースを開始する場所
2. 表示するノードのタイプ (テキスト、要素、コメントなど)
3. どのノードを受け入れるか拒否するかを決定するフィルター関数

現実世界の例

1. テキストの検索と置換

ここでは実際に使用するものを示します。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');

これは innerHTML を使用するよりもはるかに効率的で、イベント リスナーやフォーム入力値を壊すことはありません。

2. カスタム DOM クエリ

複雑な条件に一致する要素を見つける必要がありますか? TreeWalker があなたをサポートします。もっと複雑なものを構築しましょう。すべての を見つける必要があるとします。特定のテキストを含む要素。ただし、それらが

内にある場合に限ります。 内の要素を無視します。要素:

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

これは次のように一致します:

✅ 一致するもの:

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

TreeWalker をいつ使用する必要がありますか?

TreeWalker は次の場合に輝きます:

1. テキスト ノードを見つける必要があります (querySelector ではこれができません)
2. 複雑なフィルタリング要件があります
3. 特定の順序で DOM をトラバースする必要があります
4. パフォーマンスが重要です (一般に、TreeWalker は再帰的 DOM トラバーサルよりも高速です)

TypeScript のサポート

TypeScript ユーザーにとって朗報です — 型は直接組み込まれています:

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

最終的な考え

TreeWalker は、一度知ってしまうと、予想以上に頻繁に利用することになる API の 1 つです。これは、アクセシビリティ ツール、コンテンツ管理システム、または DOM コンテンツをプログラムで分析または変更する必要があるアプリケーションを構築する場合に特に役立ちます。

最初は複雑に思えるかもしれませんが、TreeWalker のパワーと柔軟性により、ツールキットに追加する価値があります。次回、再帰的な DOM トラバーサル関数を作成するときは、TreeWalker の方が適しているかどうかを検討してください。

追伸ここまで進んだ場合は、プロのヒントを紹介します。TreeWalker と MutationObserver を組み合わせて、強力な DOM 監視ツールを作成します。しかし、それは別の記事で取り上げます... ?

---

この記事が役に立ったと思われた場合は、お気軽に「いいね!」を押してフォローして、JavaScript のヒントやテクニックをさらにご覧ください。

Unsplash の Branko Stancevic によるカバー写真

Unsplash の Branko Stancevic によるカバー写真
Unsplash の Jan Gustavsson による猫の写真