如何优雅的迭代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见附件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值