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 탐색을 용이하게 하는 여러 인터페이스를 제공하므로 DOM을 더 쉽게 얻을 수 있습니다. a 노드의 요소 하위 노드입니다. "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 유형을 제공합니다. , "Third Edition"의 JavaScript 고급 프로그래밍 섹션 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 사용
TreeWalker 유형이라고 할 수 있습니다. NodeIterator 유형의 향상된 버전이 되도록 합니다. "JavaScript 고급 프로그래밍, 제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(); } }
위는 JavaScript 메서드입니다. DOM 트리를 순서대로 탐색하는 것이 모든 사람의 연구에 도움이 되기를 바랍니다.
JavaScript의 DOM 트리 선주문 탐색 방법과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!