如何优雅的迭代htmlElement元素


/**
 * 如何优雅的迭代htmlElement元素
 * 应用场景:
 * 查找element元素下符合条件的子元素、或者子元素的子元素
 * 用法:NodesIterator.traverse(ele, procss);
 * 	   返回结果保存在 NodesIterator.target
 */
var NodesIterator = (function() {
	var ths, target, callback = function(node, util) {
		if (util(node)) {
			ths.breakFlag = true;
			ths.target = node;
		}
	}, processElement = function(element, util) {
		if (element) {
			if (element.hasChildNodes()) {
				processElements(element.childNodes, util);
			}
			callback.call(this, element, util);
		}
	}, processElements = function(elements, util) {
		for (var i = 0, len = elements.length;i < len; i++) {
			if (ths.breakFlag)
				break;
			processElement(elements[i], util);
		}
	}, traverse = function(_root, util) {
		this.root = _root;
		this.breakFlag = false;
		this.target = null;
		ths = this;
		processElement(_root, util);
	}
	return {
		traverse : traverse,
		target : target
	}
}());


example:
var getX = function() {
	// 回调函数 默认传入一个node节点 当返回true的话说明该节点就是所有查找的节点
	var procss = function(node) {
		if (node.nodeName === "U")
			return true;
	};
	var pre = document.getElementsByTagName("pre")[0];
	NodesIterator.traverse(pre, procss);
	console.log(NodesIterator.target);
	return NodesIterator.target;
}



demo见附件

你可能感兴趣的:(element)