遍历
"DOM2 级遍历和范围" 定义了两个用于辅助完成顺序遍历的 DOM 结构类型
NodeIterator 和 TreeWalk
上述两种类型可以基于给定起点的 DOM 结构执行深度优先的遍历操作
对于检测浏览器对于该功能的实现可以使用以下代码
- var supportTraversals = document.implementation.hasFeature("Traversal","2.0");
- var supportsNodeIterator = (typeof document.createNodeIterator === "function");
- var supportsTreeWalker = (typeof document.createTreeWalker === "function");
所谓深度优先, 也就是对于树的深度优先遍历, 即先一层一层往子节点深入, 深入到最深层次的子节点后才返回上一层进行相同的遍历操作
其遍历顺序如上所示
NodeIterator
NodeIterator 类型是两者中较为简单的那个
该类型可以使用 document.createNodeIterator() 方法创建
该方法接收以下四个参数
root: 作为搜索起点的节点
whatToShow: 要访问节点的数字代码
这些值以常量的形式定义在 NodeFilter 类型
NodeFilter.SHOW_ALL: 显示所有类型的节点
NodeFilter.SHOW_ELEMENT: 显示元素节点
NodeFilter.SHOW_ATTRIBUTE: 显示特性节点(由于 DOM 结构的原因在实际使用时并不能使用该值)
NodeFilter.SHOW_TEXT: 显示文本节点
NodeFilter.SHOW_CDATA_SETCTION: 显示 CDATA 节点对 html 页面没有作用
NodeFilter.SHOW_ENTITY_REFERENCE: 显示实体引用节点, 对 HTML 页面不起作用
NodeFilter.SHOW_ENTITY: 显示实体节点, 对 HTML 页面不起作用
NodeFilter.SHOW_PROCESSING_INSTRUCTION: 显示指令处理节点对 HTML 页面不起作用
NodeFilter.SHOW_COMMENT: 显示注释节点
NodeFilter.SHOW_DOCUMENT: 显示文档节点
NodeFilter.SHOW_DOCUMENT_TYPE: 显示文档类型节点
NodeFilter.SHOW_DOCUMENT_FRAGMENT: 显示文档片段节点, 对 HTML 页面无效
NodeFilter.SHOW_NOTATION: 显示符号节点
以上常量可以使用位操作符来组合(除 SHOW_ALL 外), 如 NodeFilter.SHOW_TEXT | NodeFilter.SHOW_COMMENT
filter: 一个 Node Filter 对象, 或一个表示接受或拒绝节点的函数
NodeFilter 对象:
- var filter = {
- acceptNode:function(node){
- return node.tagName.toLowerCase() === "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
- }
- }
函数:
- var filter = function(node){
- return node.tagName.toLowerCase() === "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
- }
entityReferenceExpansion: 布尔值, 是否拓展实体引用, HTML 中不起作用, 因为其中的实体不能拓展
.
若希望使用该类型遍历文档中的元素最主要的两个方法就是 nextNode() 和 previousNode() 用于实现遍历的上一步和下一步, 返回一个指向当前遍历节点的指针, 若已经遍历完成回到起始节点则返回 null
- var div = document.getElementById("div1");
- var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
- var node = iterator.nextNode();
- while(node !=== null){
- alert(node.tagName);
- node = iterator.nextNode();
- }
可使用上方代码遍历下方的文档
- <div id ="div1">
- <p><b>hello</b>World!</p>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <ul>
- </div>
- TreeWalker
TreeWalker 是 NodeIterator 的高级版本
其创建方式和 NodeIterator 一致
除了 NodeIterator 所拥有的 nextNode,previousNode 之外
TreeWalker 还拥有以下方法
parent Node(): 得到当前节点的父节点
first Child(): 得到当前节点的第一个子节点
last Child(): 当前节点的最后一个子节点
nextSibling(): 当前节点的下一个同辈节点
previousSibling(): 当前节点的上一个同辈节点
其构建方法为: document.createTreeWalker()
还有一点不同在于 TreeWaler 可以使用 NodeFilter.FILTER_REJECT
其与 Node FIlter.FILTER_SKIP 的区别在于 SKIP 只会跳过当前节点, 而 REJECT 会跳过当前节点及其子树
除此而外 TreeWalk 还有一个 currentNode 属性可以修改起始节点
关于遍历部分需要注意的是 IE 似乎并没有类似的遍历节点的解决方案, 所以跨浏览器的遍历方法十分少见
来源: http://www.bubuko.com/infodetail-2944690.html