在许多脚本中都需要以某种方式来检查DOM元素。而其中最为频繁发生的,则是在文档树中递归地检查每个节点及其子节点。在理想的状态下是使用DOM2 Traversal和Range规范中的对象来完成文档树的迭代操作。但是,Traversal和Range规范在各种浏览器中只得到零散地实现。所以必须拿出自己的方案,即在自定义的ADS库中创建一个普通的函数,让它来完成遍历。
如果不关心节点在DOM树中的深度,那么可以使用document.getElementsByTagName(‘*’)方法取得指定节点中的所有Element对象,并循环遍历这些节点:
/**
* 遍历DOM树的函数(不考虑深度)
*/
function walkElementsLinear(func,node) {
var root = node || window.document;
var nodes = root.getElementsByTagName(“*”);
for(var i = 0 ; i < nodes.length ; i++) {
func.call(nodes[i]);
}
};
window['ADS']['walkElementsLinear'] = walkElementsLinear;
[/code]
上面的函数只是通过getElementsByTagName()方法取得一个包含Element对象的列表。
如果希望跟踪节点的深度,或者构建一个路径,那么可以通过递归的方式来遍历DOM树:
[code lang="js"]
/**
* 递归遍历DOM树的函数
*/
function walkTheDOMRecursive(func,node,depth,returnedFromParent) {
var root = node || window.document;
returnedFromParent = func.call(root,depth++,returnedFromParent);
node = root.firstChild;
while(node) {
walkTheDOMRecursive(func,node,depth,returnedFromParent);
node = node.nextSibling;
}
};
window['ADS']['walkTheDOMRecursive'] = walkTheDOMRecursive;
[/code]
可能还希望查找每个节点的属性:
[code lang="js"]
/**
* 递归遍历DOM树的函数,包括节点的属性
*/
function walkTheDOMWithAttributes(node,func,depth,returnedFromParent) {
var root = node || window.document;
returnedFromParent = func(root,depth++,returnedFromParent);
if (root.attributes) {
for(var i=0; i < root.attributes.length; i++) {
walkTheDOMWithAttributes(root.attributes[i],func,depth-1,returnedFromParent);
}
}
if(root.nodeType != ADS.node.ATTRIBUTE_NODE) {
node = root.firstChild;
while(node) {
walkTheDOMWithAttributes(node,func,depth,returnedFromParent);
node = node.nextSibling;
}
}
};
window['ADS']['walkTheDOMWithAttributes'] = walkTheDOMWithAttributes;
[/code]