HTML代码
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta name="keywords" content="扫描dom树" />
<meta key="description" content="简单的小demo" />
<meta key="author" content="comely-fox" />
<title>tree</title>
</head>
<body>
<header>header <我也是个节点, 叫文本节点></header>
<main>
<h1>
主要内容<我与b是兄弟关系>
<b>DOM</b>
</h1>
<section>
<h1>区段标题</h1>
<div>
firtChild - nodeType: 3
<p>我是一段描述性的段落</p>
</div>
<div>
不知道该写点什么呢?
</dvi>
</section>
</main>
<footer>footer节点中的文本节点</footer>
</body>
</html>
js代码
var traversal= function _walk(node, func) {
var tree = {node, children: []},
i = 0,
n = node.firstChild,
returnNode = null
while(n) {
if (returnNode = func(n)) {
// 递归调用遍历所有子节点
tree.children.push(_walk(returnNode, func))
}
// 每个子节点都有兄弟节点, 需要移动下迭代位置, 防止死循环
n = n.nextSibling
}
return tree
}
// traversal的回调函数,可以处理一些逻辑
var step = function (node) {
// 过滤掉其它类型的节点, 只需要元素节点
return node.nodeType === 1 ? node : false
}
var tree = traversal(document, step)
总结:
- 首先明确目的
- 先完成一层的dom遍历
- 再递归完成重复的遍历
总结递归
递归就是把复杂的重复性问题, 找出相同的解法再重复调用自身的过程,把复杂的问题简单化。