dom树的遍历

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 &lt;我也是个节点, 叫文本节点&gt;</header>
  <main>
    <h1>
    	主要内容&lt;我与b是兄弟关系&gt;
    	<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)

代码地址

总结：

1. 首先明确目的
2. 先完成一层的dom遍历
3. 再递归完成重复的遍历

总结递归

递归就是把复杂的重复性问题， 找出相同的解法再重复调用自身的过程，把复杂的问题简单化。