如何用JS求DOM树的最大深度？

最新推荐文章于 2022-03-16 10:52:34 发布

野狼e族

最新推荐文章于 2022-03-16 10:52:34 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： JS 获取dom最大深度

本文链接：https://blog.csdn.net/qq_24505127/article/details/76890148

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

可解决的问题：获取某一个元素节点下的子元素的最大深度。

废话不多说，直接代码,兼容所有浏览器：

代码段

function getEleDeep($element) {	
			var map = function map(cb) {
				return function(arr) {
					return Array.prototype.map.call(arr, cb);
				};
			};
			var max = function max(arr) {
				return arr.reduce(function(acc, cur) {
					if (cur >= acc) return cur;
					else return acc;
				}, arr[0]);
			};
			// 递归函数 	
			var nextChildren = function nextChildren(node) {
				// 基准条件 		
				if (node.children.length === 0) return 1;
				else {
					// 求子节点们的长度 并取最大值 			
					var deeps = map(nextChildren)(node.children);
					return 1 + max(deeps);
				}
			};
			// 计算 			//var $ele = $element[0]; var $ele = $element;var deep = nextChildren($ele);return deep;}



具体用法：
<html lang="en">
<body>
<div id="root">
  <div >
	  <div>
		  <div>
			  <div>
				<div>
			  
				</div>
			</div>
		</div>
	</div>
   </div>
  
</div>
 <script>
		var domRoot=document.getElementById("root");
		alert(getEleDeep(domRoot))
	function getEleDeep($element) {
		// map(e => e + 1)([0, 1, 2]) 	
		// => 1, 2, 3 	
		// 类似于数组的map方法 不过这里颗粒化了 	
		var map = function map(cb) {
			return function(arr) {
				return Array.prototype.map.call(arr, cb);
			};
		};
		var max = function max(arr) {
			return arr.reduce(function(acc, cur) {
				if (cur >= acc) return cur;
				else return acc;
			}, arr[0]);
		};
		// 递归函数 	
		var nextChildren = function nextChildren(node) {
			// 基准条件 		
			if (node.children.length === 0) return 1;
			else {
				// 求子节点们的长度 并取最大值 			
				var deeps = map(nextChildren)(node.children);
				return 1 + max(deeps);
			}
		};
		// 计算 	
		var $ele = $element;
		var deep = nextChildren($ele);
		return deep;
	}
</script>
</body>

</html>



参考自https://segmentfault.com/q/1010000009620166?sort=created：

function getEleDeep($element){ 
			// map(e => e + 1)([0, 1, 2]) 
			// => 1, 2, 3 
			// 类似于数组的map方法 不过这里颗粒化了 
			var map = cb => arr => Array.prototype.map.call(arr, cb); 
			// 递归函数 
			var nextChildren = node => {
				// 基准条件 
				if (node.children.length === 0) return 1; 
				else {
					// 求子节点们的长度 并取最大值 
					var deeps = map(nextChildren)(node.children); 
					
					return 1 + max(deeps); 
				}
			}

			// 计算 
			var $ele =$element[0];
			var deep = nextChildren($ele); 
			return deep;
			
		}	


但是这种方式并不兼容IE.