JavaScript의 DOM 노드에 대한 깊이 우선 및 너비 우선 순회

이 글은 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

Breadth-까지 시작해야 한다는 점에 유의해야 합니다. 첫 번째 순회

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!