节点树遍历的,JS遍历DOM文书档案树的艺术实例详

作者: 韦德国际1946国际网址  发布:2019-05-28

正文实例讲述了JS遍历DOM文书档案树的方法。分享给大家供大家仿效,具体如下:

正文实例讲述了JavaScript完毕的DOM树遍历方法。分享给大家供大家参谋,具体如下:

在大家办事中大多DOM脚本的要紧职务正是在DOM文书档案中插入,删除和平运动动节点。W3C DOM 提供了4种艺术来修改文书档案树。常用的是appendChild()和insertBefore(),而removeChild() 和replaceChild()非常的少用到。

享受 DOM 节点树深度遍历、广度遍历代码。

一 介绍

2叉 DOM 树的遍历

一般用法

1旦小编仅遍历 body 且其组织如下:

遍历文书档案树通过采纳parentNode属性、firstChild属性、lastChild属性、previousSibling属性和nextSibling属性来贯彻。

function Tree() {
   var Node = function(key){
      this.key = key;
      this.left = null;
      this.right = null;
   }
   root =null;
}

修改文书档案提供的4个艺术,都以指向它们所服从的节点的引用。导航条实例:

<body>
    <section class="container">
        <div class="left">
            <div class="menu"></div>
        </div>
        <div class="right">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
    </section>
</body>

1、parentNode属性

前序遍历

<div id="menu">     <h1>我的导航条</h1>                <ul id="nav">        <li><a href="#">HOME</a></li>        <li><a href="#">(X)Html / Css</a></li>        <li><a href="#">Ajax / RIA</a></li>        <li><a href="#">GoF</a></li>        <li><a href="#">JavaScript</a></li>        <li><a href="#">JavaWeb</a></li>        <li><a href="#">jQuery</a></li>        <li><a href="#">MooTools</a></li>        <li><a href="#">Python</a></li>        <li><a href="#">Resources</a></li>     </ul> </div>  

节点树遍历的,JS遍历DOM文书档案树的艺术实例详解。纵深遍历(DFS)

遍历完父节点的全体子节点的子节点的子节点...再遍历其兄弟节点。

输出:[section.container, div.left, div.menu, div.right, div.box1, div.box2]

const DFS = {
    nodes: [],
    do (root) {
        for (let i = 0;i < root.childNodes.length;i  ) {
            var node = root.childNodes[i];
            // 过滤 text 节点、script 节点
            if ((node.nodeType != 3) && (node.nodeName != 'SCRIPT')) {
                this.nodes.push(node);
                this.do(node);
            }
        }
        return this.nodes;
    }
}
console.log(DFS.do(document.body));

该属性重临当前节点的父节点。

先是走访根结点,然后遍历左子树,最终遍历右子树

appendChild()

广度遍历(BFS)

遍历完父节点的具备兄弟节点再遍历其子节点。

输出:[section.container, div.left, div.right, div.menu, div.box1, div.box2]

const BFS = {
    nodes: [],
    do (roots) {
        var children = [];
        for (let i = 0;i < roots.length;i  ) {
            var root = roots[i];
            // 过滤 text 节点、script 节点
            if ((root.nodeType != 3) && (root.nodeName != 'SCRIPT')) {
                if (root.childNodes.length) children.push(...root.childNodes);
                this.nodes.push(root);
            }
        }
        if (children.length) {
            var tmp = this.do(children);
        } else {
            return this.nodes;
        }
        return tmp;
    }
}
console.log(BFS.do(document.body.childNodes));

非递归版:

const BFS = {
    nodes: [],
    do (roots) {
        var roots = new Array(...roots);
        for (let i = 0;i < roots.length;i  ) {
            var root = roots[i];
            // 过滤 text 节点、script 节点
            if ((root.nodeType != 3) && (root.nodeName != 'SCRIPT')) {
                if (root.childNodes.length) roots.push(...root.childNodes);
                this.nodes.push(root);
            }
        }
        return this.nodes;
    }
}
console.log(BFS.do(document.body.childNodes));

小编:呆恋小喵

小编的后花园:https://sunmengyuan.github.io/garden/

我的 github:https://github.com/sunmengyuan

初稿链接:https://sunmengyuan.github.io/garden/2018/03/02/dom-tree.html

[pNode=]obj.parentNode

Tree.prototype.preOrderTraverse = function(callback){
  preOrder(root, callback);
}
var preOrder = function(node,callback){
  if(node !== null){
    callback(node.key);
    preOrder(node.left, callback);
    preOrder(node.right, callback);
  }
}

appendChild()方法令你增加三个节点并使其改为有个别成分的尾声1个子节点。如若加上的该节点已经存在于文书档案中,它会从眼下岗位移除。该节点的子节点保持不改变,它们也被一同运动到新的岗位。

pNode:该参数用来储存父节点,借使不设有父节点将回到“null”。

修改为DOM二叉树:

<script type="text/javascript"> window.onload=function(){    /*为一个元素添加子元素*/    var nav=document.getElementById("nav");    //创建一个li新元素    var newChild=document.createElement('li');    //创建一个a 新元素    var newLink=document.createElement('a')    //创建一个 Text 节点    var newText=document.createTextNode('My Wiki');    //把Text添加到a元素节点中    newLink.appendChild(newText);    //给a元素节点设置属性href和内容    newLink.setAttribute('href',"#");    //把a元素节点添加到新的li元素节点中    newChild.appendChild(newLink);    //把新的li元素节点添加到 ul 元素节点里    nav.appendChild(newChild);       /*<li>从原始位置上被移除,成为ul的最后一个子节点。它的a 元素节点和文本节点HODE也被移了过来*/    navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素    nav.appendChild(nav_list[0]);  }  </script>  

2、firstChild属性

var preOrder = function(node,callback) {
  callback(node);
  if(node.firstElementChild) {//先判断子元素节点是否存在
     this.preOrder(node.firstElementChild,callback);
  }
  if(node.lastElementChild) {
    this.preOrder(node.lastElementChild,callback);
  }
};

开立异DOM成分的通用函数

该属性再次回到当前节点的首先个头节点。

中序遍历

<script type="text/javascript"> function create( elem ) {      return document.createElementNS ?          document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :          document.createElement( elem );  }     </script>  

[cNode=]obj.firstChild

先是遍历左子树,然后访问根结点,最后遍历右子树。

作者们见到结果:

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:节点树遍历的,JS遍历DOM文书档案树的艺术实例详

关键词: 让前端飞

上一篇:获得外网ip,linux获取外网ip
下一篇:没有了