TreeWalker: DOM 탐색에 대한 실용 가이드

최근 여가 시간에 새로운 Chrome 확장 프로그램 작업을 시작했으며 일부 기능을 처리하는 방법을 연구하면서 JS가 DOM을 처리하는 데 있어 점점 더 많은 기능을 발견하기 시작했습니다. 페이지.

JS를 사용하는 압도적인 수의 사람들이 프레임워크를 통해서만 JS를 사용하고 있다는 점을 감안할 때, 이는 사람들이 자신이 의존하는 프레임워크의 기본 기술에 대해 좀 더 배울 수 있는 짧은 기사 시리즈의 흥미로운 주제가 될 것입니다. 실제로 사용하고 있습니다.

우리 모두 그런 경험이 있습니다. DOM에서 특정 요소를 찾아야 하는데 querySelector와 getElementsBy*가 제대로 작동하지 않습니다. 특정 문구가 포함된 모든 텍스트 노드를 찾아야 하거나 특정 조건과 일치하는 요소를 탐색하고 다른 요소는 건너뛰고 싶을 수도 있습니다. 강력하지만 종종 간과되는 DOM 탐색 API인 TreeWalker를 사용해 보세요.

트리워커란 무엇인가요?

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

세 가지 매개변수는 다음과 같습니다.

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 사용자를 위한 좋은 소식 - 유형이 바로 내장되어 있습니다.

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 중 하나입니다. 접근성 도구, 콘텐츠 관리 시스템 또는 프로그래밍 방식으로 DOM 콘텐츠를 분석하거나 수정해야 하는 모든 애플리케이션을 구축하는 데 특히 유용합니다.

처음에는 복잡해 보일 수도 있지만 TreeWalker의 강력함과 유연성 덕분에 툴킷에 추가할 가치가 있습니다. 다음에 재귀 DOM 순회 함수를 작성하게 되면 TreeWalker가 더 적합한지 생각해 보세요.

추신 여기까지 완료했다면 다음 전문가 팁을 참고하세요. TreeWalker와 MutationObserver를 결합하여 강력한 DOM 모니터링 도구를 만드세요. 하지만 그것은 다른 기사의 주제입니다... ?

---

이 기사가 도움이 되었다면 좋아요를 누르고 팔로우하여 더 많은 JavaScript 팁과 요령을 확인하세요.

Unsplash의 Branko Stancevic 표지 사진

Unsplash의 Branko Stancevic 표지 사진
Unsplash에 게시된 Jan Gustavsson의 고양이 사진

위 내용은 TreeWalker: DOM 탐색에 대한 실용 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.