TreeWalker: DOM 탐색에 대한 실용 가이드-JS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-11-23 01:02:11

원래의

643명이 탐색했습니다.

최근 여가 시간에 새로운 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. 텍스트 찾기 및 바꾸기

실제로 사용하게 될 기능은 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을 사용하는 것보다 훨씬 더 효율적이며 이벤트 리스너를 중단하거나 입력 값을 형성하지 않습니다.