ADS3.11 DOM2核心和DOM2 HTML——遍历和迭代DOM树

前端技术 everyinch 2832℃ 0评论

在许多脚本中都需要以某种方式来检查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]



转载请注明:陈童的博客 » ADS3.11 DOM2核心和DOM2 HTML——遍历和迭代DOM树

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量