JavaScript实现DOM树的深度优先遍历和广度优先遍历(代码实例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于JavaScript实现DOM树的深度优先遍历和广度优先遍历(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

深度优先遍历

// 非递归,首次传入的node值为DOM树中的根元素点,即html // 调用:deep(document.documentElement) function deep (node) {   var res = []; // 存储访问过的节点   if (node != null) {     var nodeList = []; // 存储需要被访问的节点     nodeList.push(node);     while (nodeList.length > 0) {       var currentNode = nodeList.pop(); // 当前正在被访问的节点       res.push(currentNode);       var childrens = currentNode.children;       for (var i = childrens.length - 1; i >= 0; i--) {         nodeList.push(childrens[i]);       }     }   }   return res; }  // 使用递归 var res = []; // 存储已经访问过的节点 function deep (node) {   if (node != null) { // 该节点存在     res.push(node);     // 使用childrens变量存储node.children,提升性能,不使用node.children.length,从而不必在for循环遍历时每次都去获取子元素     for (var i = 0,  childrens = node.children; i < childrens.length; i++) {       deep(childrens[i]);     }   }   return res; }

广度优先遍历

// 递归 var res = []; function wide (node) {   if (res.indexOf(node) === -1) {     res.push(node); // 存入根节点   }   var childrens = node.children;   for (var i = 0; i < childrens.length; i++) {     if (childrens[i] != null) {       res.push(childrens[i]); // 存入当前节点的所有子元素     }   }   for (var j = 0; j < childrens.length; j++) {     wide(childrens[j]); // 对每个子元素递归   }   return res; }  // 非递归 function wide (node) {   var res = [];   var nodeList = []; // 存储需要被访问的节点   nodeList.push(node);   while (nodeList.length > 0) {     var currentNode = nodeList.shift(0);     res.push(currentNode);     for (var i = 0, childrens = currentNode.children; i < childrens.length; i++) {       nodeList.push(childrens[i]);     }      }   return res; }
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » JavaScript实现DOM树的深度优先遍历和广度优先遍历(代码实例)

发表评论

提供最优质的资源集合

立即查看 了解详情