이 글은 DOM 노드의 깊이 우선 및 너비 우선 순회에 대해 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
HTML의 트리 구조는 위와 같습니다
트리의 깊이 우선 탐색의 경우 실행 결과는 다음과 같아야 합니다.
var arr=[]; //深度优先 function traversalDFSDOM (rootDom) { if(!rootDom)return; if(rootDom.children.length==0){ arr.push(rootDom)//没有孩子节点,表示是个叶子节点,将节点push到数组中 return; } arr.push(rootDom)//非孩子节点,在每次遍历它的孩子节点之前先把它push到数组中 for(var i=0;i<rootdom.children.length> <p>결과는 다음과 같습니다</p> <p style="text-align: center;"> <img src="https://img-blog.csdn.net/20180405023706585?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xYWTIyNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt=""></p> <p>(스크립트 태그는 body 외부에 작성하지만 실행하면 브라우저가 body에 넣어서 마지막 요소가 됩니다)<br></p> <h5>비재귀적 방식을 사용합니다</h5> <pre class="brush:php;toolbar:false"> //深度优先非递归 function traversalDFSDOM(rootDom) { if(!rootDom)return; var stack=[] var node = rootDom; while(node!=null){ arr.push(node); if(node.children.length>=0){ for(let i=node.children.length-1;i>=0;i--) stack.unshift(node.children[i]); } node = stack.shift() } } traversalDFSDOM(bodyDom)
비재귀적 방법은 주로 큐를 시뮬레이션하는 방법을 채택합니다:
그리고 i의 루프는 node.children.length-1에서 0
DOM 트리의 너비 우선 순회 결과는 다음과 같아야 합니다
var stack=[bodyDom];//bodyDom是遍历的根节点 function traversalBFSDOM (count) { count = count || 0; if (stack[count]) { var children = stack[count].children; for (let i = 0; i <pre class="brush:php;toolbar:false">traversalBFSDOM(0)
function traversalBFSDOM (rootDom) { if(!rootDom)return; arr.push(rootDom) var queue = [rootDom]; while(queue.length){ var node = queue.shift(); if(!node.children.length){ continue; } for(var i=0;i<node.children.length><p>선입선출 방식을 주로 사용하세요 각 노드 아래의 하위 노드를 차례로 탐색하는 아이디어입니다. </p> <p>실행 결과는 다음과 같습니다. </p> <p style="text-align: center;"><img src="https://img.php.cn//upload/image/297/941/277/1539247690616429.png" title="1539247690616429.png" alt="JavaScript의 DOM 노드에 대한 깊이 우선 및 너비 우선 순회" style="max-width:90%" style="max-width:90%"></p> <p>Learning is a process, learn to learn deep</p> <p>요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 <a href="http://www.php.cn/course/list/17.html" target="_blank">JavaScript 비디오 튜토리얼</a>을 방문하세요! </p> <p>관련 권장 사항: </p> <p class="art_xg"><a href="http://www.php.cn/" target="_blank">php 공공 복지 교육 비디오 튜토리얼</a></p> <p><a href="http://www.php.cn/js-tutorial.html" target="_blank">JavaScript 그래픽 튜토리얼 </a></p> <p><a href="http://www.php.cn/course/26.html" target="_blank">JavaScript 온라인 매뉴얼</a></p></node.children.length>
위 내용은 JavaScript의 DOM 노드에 대한 깊이 우선 및 너비 우선 순회의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!