dom树的遍历

HTML代码


<html lang="zh-cmn-Hans">
  <head>
  	<meta name="keywords" content="扫描dom树" />
  	<meta key="description" content="简单的小demo" />
  	<meta key="author" content="comely-fox" />
    <title>treetitle>
  head>
  <body>
  <header>header <我也是个节点, 叫文本节点>header>
  <main>
    <h1>
    	主要内容<我与b是兄弟关系>
    	<b>DOMb>
    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. 再递归完成重复的遍历

总结递归

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

你可能感兴趣的:(DOM)