DOM树遍历

无意间看到以前写的遍历二叉树的C++程序，感觉都忘完了···还是太菜，于是改了改用在遍历DOM树上，借此加深记忆吧。

本文只涉及了层序遍历和前序遍历，层序就是从上到下一层一层往下遍历，每一层从左到右遍历，前序就是根节点->左子树->右子树，一直先把左子树遍历完，在返回右子树。本文的实现主要是通过操纵队列的更新来控制遍历顺序，具体可以看代码注释，代码结构很简单，应该很好理解。

/*层序遍历DOM树，从上到下按层次访问遍历，每一层从左到右遍历。*/
层序遍历DOM树，
从上到下按层次访问遍历，
每一层从左到右遍历。
*/
function levelOrderDT(obj) {
	var res = []; //存放元素的tagName
	var list = []; //遍历队列

	function updateList() { //更新队列
		for (var i = 0; i < children.length; i++) {
			list.push(children[i]); //层序遍历时，下一层的节点总是插入到队列尾部
		}
	}

	var children = obj.children(); //下一层级的元素
	updateList();

	var temp;

	while (list.length > 0) { //队列为空退出
		temp = list[0];
		res.push(temp.tagName); //保存当前DOM节点名
		list.shift(); //删除遍历过的节点

		if ($(temp).children().length > 0) {
			children = $(temp).children(); //插入下一层节点
			updateList();
		}
	}

	return res;
}

/*前序遍历DOM树，从左子树开始遍历，最后遍历右子树，在遍历左、右子树时，仍然先遍历左子树，最后遍历右子树。*/
前序遍历DOM树，
从左子树开始遍历，最后遍历右子树，
在遍历左、右子树时，仍然先遍历左子树，最后遍历右子树。
*/
function preOrderDT(obj) {
	var res = [];
	var wraper = [];

	function updateList() { //更新队列
		for (var i = children.length - 1; i >= 0; i--) {
			wraper.unshift(children[i]); //前序遍历需要在队列头部新增，并且需倒序
		}
	}

	var children = obj.children();
	for (var i = 0; i < children.length; i++) {
		wraper.push(children[i]);
	}

	var temp;

	while (wraper.length > 0) {
		temp = wraper[0];
		res.push(temp.tagName);
		wraper.shift();
		if ($(temp).children().length > 0) {
			children = $(temp).children();
			updateList();
		}
	}

	return res;
}

console.log(levelOrderDT($(document)));
console.log(preOrderDT($(document)));

此程序在在线编译器上可能会出现一些“不明”标签（在线编译器隐式增加的），建议在本地调试。