深度遍历和广度遍历html DOM

最新推荐文章于 2021-06-20 01:10:56 发布
最新推荐文章于 2021-06-20 01:10:56 发布
阅读量334 收藏
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/breakair/article/details/87697219
版权

深度优先和广度优先是两种很基础的算法，在对算法不是那么看重的前端中依然有着它们的身影。下面是两种算法在遍历html DOM时的应用。

<html>
<head>
	<title>深度遍历以及广度遍历测试算法</title>
</head>
<body>
	<div class="container">
		<div class="node_1">
			<div class="node_1_1"></div>
			<div class="node_1_2"></div>
			<div class="node_1_3"></div>
		</div>
		<div class="node_2">
			<div class="node_2_1"></div>
			<div class="node_2_2"></div>
		</div>
		<div class="node_3"></div>	
	</div>
	<script type="text/javascript">
		// 广度优先
		// const parentDOM = document.querySelector('.container');
		// function breathTravalSal(node){
		// 	const nodes = [];
		// 	const stack = [];
		// 	if(node){
		// 		stack.push(node);
		// 		while(stack.length){
		// 			const item = stack.shift();
		// 			nodes.push(item);
		// 			for(const v of item.children){
		// 				stack.push(v);
		// 			}
		// 		}
		// 	}
		// 	return nodes;
		// }
		// console.log(breathTravalSal(parentDOM));
		
		//深度优先
		// const parentDOM = document.querySelector('.container');
		// function  deepTravalSal(node){
		// 	const nodes = [];
		// 	const stack = [];
		// 	if(node){
		// 		stack.push(node);
		// 		while(stack.length){
		// 			const item = stack.pop();
		// 			const len = item.children.length;
		// 			nodes.push(item);
		// 			for(let i = len - 1; i >= 0; i--){
		// 				stack.push(item.children[i])
		// 			}
		// 		}
		// 	}
		// 	return nodes;
		// }
		// console.log(deepTravalSal(parentDOM));
	</script>
</body>
</html>
breakair
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript树的深度优先遍历和广度优先遍历算法示例
10-18
主要介绍了JavaScript树的深度优先遍历和广度优先遍历算法,结合实例形式分析了JavaScript树的深度优先遍历、广度优先遍历递归与非递归相关实现技巧,需要的朋友可以参考下
深度遍历--广度遍历
csstmg的博客
09-15 285
深度遍历（DFS） 遍历完父节点的所有子节点的子节点的子节点...再遍历其兄弟节点。 const DFS = { nodes: [], do (root) { for (let i = 0;i < root.length;i++) { var node = root[i]; // 过滤 text 节点、script 节点 if ((node.nodeType != 3) && (n
Leetcode 二叉树的最大深度与最小深度
the步履不停shy的博客
11-03 303
104. 二叉树的最大深度 题目 给定一个二叉树，找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 递归 class Solution: def maxDepth(self, root: TreeNode) -> int: if root is None: return 0 return 1+max(self.maxDepth(root.left), self.maxDep
JavaScript实现DOM树的深度优先遍历和广度优先遍历
落日夕霞的博客
09-27 1460
深度优先遍历 // 非递归,首次传入的node值为DOM树中的根元素点，即html // 调用：deep(document.documentElement) function deep (node) { var res = []; // 存储访问过的节点 if (node != null) { var nodeList = []; // 存储需要被访问的节点 nodeLis...
DOM中BFS（广度优先遍历）和DFS（深度优先遍历）的方法
WickedDogg的博客
05-15 2612
广度优先遍历，即父层遍历结束，才开始遍历子层，然后一直往下遍历，如果是下面这样一颗DOM树<div class="root"> <div class="container"> <section class="sidebar"> <ul class="menu"></ul> </section> <section clas
关于DOM节点的深度优先和广度优先遍历
大灰狼的小绵羊哥哥的博客
04-17 614
HTML的树形结构如上 深度优先遍历 对于树的深度优先遍历，执行结果应该如下： 采用递归方式 var arr=[]; //深度优先 function traversalDFSDOM (rootDom) { if(!rootDom)return; if(rootDom.children.length==0){ arr.p...
Python实现深度遍历和广度遍历的方法
12-25
深度遍历： 原则：从上到下，从左到右 逻辑（本质用递归）： 1）、找根节点 2）、找根节点的左边 3）、找根节点的右边 class Node(object): def __init__(self, item=None, left=None, right=None): self.item = ...
邻接表深度遍历和广度遍历.h
09-11
邻接表深度遍历和广度遍历 邻接表深度遍历和广度遍历 邻接表深度遍历和广度遍历 邻接表深度遍历和广度遍历
邻接矩阵表示法深度遍历和广度遍历.h
09-11
邻接矩阵表示法深度遍历和广度遍历 邻接矩阵表示法深度遍历和广度遍历 邻接矩阵表示法深度遍历和广度遍历 邻接矩阵表示法深度遍历和广度遍历
jsoup深度遍历html中所有的子链接
无名小卒菜的博客
07-10 1770
import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; import java.io.IOException; import java.util.*; public class testDOM { ...
JavaScript DOM深度遍历(2种方法)和广度遍历
MorningDuGe
06-24 2031
DOM深度优先遍历原理：递归执行 function deepFirstSearch (node) { console.log(node.tagName); if(node.children.length){ Array.from(node.children).forEach(function (el) { de
JavaScript 深度优先遍历 广度优先遍历 && DOM应用方法
weixin_40222803的博客
12-13 535
深度优先遍历的递归写法 function deepTraversal(node) { var nodes = []; if (node != null) { nodes.push(node); var children = node.children; for (var i = 0; i &lt; children.leng...
dom结点的深度优先遍历和广度优先搜索
初漾的博客
04-21 1533
/*深度优先递归实现*/
JavaScript深度优先遍历和广度优先遍历
foradmin的博客
04-14 1820
深度优先遍历DFS 假设初始状态是图中所有顶点均未被访问，则从某个顶点v出发，首先访问该顶点然后依次从它的各个未被访问的邻接点出发深度优先搜索遍历图，直至图中所有和v有路径相通的顶点都被访问到。若此时尚有其他顶点未被访问到，则另选一个未被访问的顶点作起始点，重复上述过程，直至图中所有顶点都被访问到为止。 // 用递归进行深度优先遍历 function deepFirstSearch(node...
爬虫系列7深度遍历网页
runnoob_1115的博客
11-13 788
# 所以我们要过滤掉相同的链接 seen = set() def link_crawler(seed_url, link_regex): ''' 给一个url种子，爬取能找到的所有链接 :param send_url: 第一个url种子 :param link_regex:匹配网页的正则表达式 :return: ''' crwal_queque = [seed_url] while crwal_qu
html递归遍历,图的深度遍历是一个递归过程
weixin_35613582的博客
06-20 1214
数据结构问题：图的深度优先遍历中有递归的应用，数据结构问题：图的深度优先遍历中有递归的应用，要用到栈，图中顶点是首先你得明白函数调用本身就是通过栈来实现的。 调用函数是入栈，而函数返回是出栈。 为什么是栈， 你要知道栈的特性是 “后进先出”或者是“先进后出”， 而对于函数调用来说， 一定会有最先调用的函数，最后才返回。 举个例子： 函数a,b,c,d的调用一个连通图采用邻接表作为储存结构，设计一个...
图论（五）深度优先搜索DFS
热门推荐
saltriver的专栏
01-14 2万+
深度优先搜索(DFS, Depth First Search)是一个针对图和树的遍历算法。早在19世纪就被用于解决迷宫问题。对于下面的树而言，DFS方法首先从根节点1开始，其搜索节点顺序是1,2,3,4,5,6,7,8（假定左分枝和右分枝中优先选择左分枝）。 DFS的实现方式相比于BFS应该说大同小异，只是把queue换成了stack而已，stack具有后进先出LIFO(Last Input
DOM元素遍历——红皮书上的API
Fancyzhe
05-23 270
childElement：返回子元素的个数 firstElement：指向第一个子元素 lastElement：指向最后一个子元素 previousElementSibling：指向前一个同辈元素 nextElementSibling：指向后一个同辈元素...
二叉树的深度遍历和广度遍历代码
最新发布
04-16
以下是二叉树的深度遍历和广度遍历的代码： 深度遍历（先序遍历） ``` void preOrder(TreeNode* root) { if(root == NULL) { return; } // 访问根节点 cout << root->val ; // 遍历左子树 preOrder(root->...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值