javascript_javascript 스킬로 DOM 트리를 순서대로 순회하는 방법

DOM 트리는 문서의 모든 노드(요소 노드, 텍스트 노드, 주석 노드 등)로 구성된 트리 구조입니다. DOM 트리의 구문 분석 및 구성은 브라우저에서 구현하는 핵심 기능입니다. DOM 트리는 트리 구조이므로 트리 구조를 순회하는 관련 방법을 사용하여 DOM 트리를 순회할 수 있습니다. 동시에 DOM2의 "Traversal" 모듈은 두 가지 새로운 유형을 제공하므로 DOM을 쉽게 사용할 수 있습니다. 트리의 선주문 순회가 구현되었습니다.

참고: 이 문서의 5가지 방법은 모두 DOM(깊이 우선 순회)의 선주문 순회 방법이며 요소 유형에만 중점을 둡니다.

1. DOM1의 기본 인터페이스를 사용하여 DOM 트리를 재귀적으로 탐색합니다.

DOM1은 일부 기본 DOM 작업을 완료할 수 있는 기본 유형 Node에 대한 일부 API를 제공합니다. DOM 트리를 재귀적으로 순회하는 코드는 비교적 간단합니다. 핵심 아이디어는 현재 노드를 먼저 처리한 다음 왼쪽에서 오른쪽으로 하위 노드를 재귀적으로 순회하는 것입니다.

/**
  * 使用递归的方式先序遍历DOM树
  * @param node 根节点
  */
 function traversal(node){
   //对node的处理
   if(node && node.nodeType === 1){
     console.log(node.tagName);
   }
   var i = 0, childNodes = node.childNodes,item;
   for(; i < childNodes.length ; i++){
     item = childNodes[i];
     if(item.nodeType === 1){
       //递归先序遍历子节点
       traversal(item);
     }
   }
 }

2. DOM1의 기본 인터페이스를 사용하여 DOM 트리를 반복적으로 탐색합니다.

첫 번째 방법과 달리 이번에는 DOM 트리를 순회하는 반복 방법을 사용합니다. 반복을 사용하여 DOM 트리를 탐색하는 것은 상대적으로 복잡합니다. 핵심은 스택을 사용하여 노드의 액세스 경로를 유지하는 것입니다. 노드의 첫 번째 요소 하위 노드가 먼저 루트 노드로 사용됩니다. 다음 주기의 현재 노드의 다른 하위 요소 노드를 오른쪽에서 왼쪽 순서로 스택에 푸시합니다. 현재 노드에 Element 하위 노드가 없으면 루트 노드를 얻을 수 없을 때까지 스택에서 Element 노드를 다음 주기의 루트 노드로 팝합니다. 코드는 다음과 같습니다.

/**
 * 使用迭代的方式先序遍历DOM树
 * @param node 根节点
 */
function traversalIteration(node){
  var array = [], i = 0,k = 0,elementCount = 0, len = 0, childNodes,item;
  while(node != null){
    console.log(node.tagName);
    childNodes = node.childNodes;
    len = node.childNodes.length;
    elementCount = 0;
    if(len > 0){
      for(i = 0; i < len; i++){
        item = childNodes[i];
        if(item.nodeType === 1){
          elementCount++;
          node = item;
          break;
        }
      }
      for(k = len -1 ; k > i; k--){
        item = childNodes[k];
        if(item.nodeType == 1){
          elementCount++;
          array.push(item);
        }
      }
      if(elementCount < 1){
        node = array.pop();
      }
    }else{
      node = array.pop();
    }
  }
}

3. DOM 확장의 Element Traversal API를 사용하여 DOM 트리를 재귀적으로 순회합니다

DOMElement Traversal API는 DOM 탐색을 용이하게 하는 여러 인터페이스를 제공하여 노드의 Element 하위 노드를 더 쉽게 얻을 수 있도록 합니다. "DOM 확장: DOM API 추가 개선 [요약 - 1부]"의 2절에서는 DOM 확장의 요소 탐색 API를 소개합니다. 코드는 다음과 같습니다.

/**
 * 使用DOM扩展的Traversal API提供的新的接口先序遍历DOM树
 * @param node 根节点
 */
function traversalUsingTraversalAPI(node){
  if(node && node.nodeType === 1){
    console.log(node.tagName);
  }
  var i = 0,len = node.childElementCount, child = node.firstElementChild;
  for(; i < len ; i++){
    traversalUsingTraversalAPI(child);
    child = child.nextElementSibling;
  }
}

4. NodeIterator를 사용하세요

DOM2의 "Traversal" 모듈은 DOM 트리의 선주문 순회를 쉽게 구현하는 데 사용할 수 있는 NodeIterator 유형을 제공합니다. 여기서는 "JavaScript 고급 프로그래밍, 제3판"의 섹션 12.3.1에 대해 설명합니다. 직접 코드는 다음과 같습니다:

/**
 * 使用DOM2的"Traversal"模块提供的NodeIterator先序遍历DOM树
 * @param node 根节点
 */
function traversalUsingNodeIterator(node){
  var iterator = document.createNodeIterator(node, NodeFilter.SHOW_ELEMENT,null,false);
  var node = iterator.nextNode();
  while(node != null){
    console.log(node.tagName);
    node = iterator.nextNode();
  }
}

5. 트리워커를 사용하세요

TreeWalker 유형은 NodeIterator 유형의 향상된 버전이라고 할 수 있습니다. "JavaScript Advanced 프로그래밍, 제3판"의 섹션 12.3.2에서는 다음과 같이 코드를 직접 제공합니다.

/**
 * 使用DOM2的"Traversal"模块提供的TreeWalker先序遍历DOM树
 * @param node 根节点
 */
function traversalUsingTreeWalker(node){
  var treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT,null,false);
  if(node && node.nodeType === 1){
    console.log(node.tagName);
  }
  var node = treeWalker.nextNode();
  while(node != null){
    console.log(node.tagName);
    node = treeWalker.nextNode();
  }
}

위 내용은 여러분과 공유하기 위해 DOM 트리를 순회하는 자바스크립트 방법입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.