JavaScript DOM2和DOM3——“遍历”的注意要点

  • A+
所属分类:JavaScript

DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker;这两个类型能够基于给定的起点对DOM结构执行深度优先的遍历操作。

NodeIterator类型

使用document.createNodeIterator()方法创建新的实例。这个方法接收四个参数:

  1. root:想要作为搜索起点的树中的节点;
  2. whatToShow:表示要访问哪些节点的数字代码;
  3. filter:是一个NodeFilter对象,或者一个函数(表示应该接受还是拒绝某种特定节点的函数);
  4. entityReferenceExpansion:布尔值,表示是否扩展实体引用。在HTML页面中没用;

whatToShow:

  1. NodeFilter.SHOW_ALL:所有类型节点;
  2. NodeFilter.SHOW_ELEMENT:元素;
  3. NodeFilter.SHOW_ATTRIBUTE:特性;
  4. NodeFilter.SHOW_TEXT:文本;
  5. NodeFilter.SHOW_COMMENT;
  6. NodeFilter.SHOW_DOCUMENT;
  7. NodeFilter.SHOW_DOCUMENT_TYPE;

另外还有对HTML页面没用的几个:

  • NodeFilter.SHOW_CDATA_SECTION;
  • NodeFilter.SHOW_ENTITY_REFERENCE:实体引用节点;
  • NodeFilter.SHOW_ENTITY:实体节点;
  • NodeFilter.SHOW_PROCESSING_INSTRUCTION:处理指令节点;
  • NodeFilter.SHOW_DOCUMENT_FRAGMENT;
  • NodeFilter.SHOW_NOTATION:符号节点

可以用按位或操作符来组合多个选项如:

filter

可以使用createNodeIterator()方法的filter参数来指定自定义的NodeFilter对象,每个NodeFilter对象只有一个方法,应该访问的节点返回NodeFilter.FILTER_ACCEPT;不应该访问的节点返回NodeFilter.FILTER_SKIP;

可以创建包含acceptNode()方法的对象:

也可以创建一个与acceptNode()方法类似的函数:

如果不指定过滤器,那么应该传入null。

举例:

搜索document中所有的元素

搜索document中所有的p元素

搜索document中所有的h1元素

nextNode()方法与previousNode()方法

前者用于向前前进一步;后者用于向后后退一步。当遍历到DOM子树的最后一个节点时,nextNode()返回null;当遍历到DOM子树的最后一个节点,且previousNode()返回根节点以后,再次调用它就会返回null。

举例:

以下面的html代码为例:

遍历div元素中所有的节点

遍历div中所有的li元素中的文本

TreeWalker类型

这个类型比上面那个更高级,除了包括nextNode()和previousNode()在内的相同的功能之外,这个类型还提供了下列用于在不同方向上遍历DOM结构的方法。如:

  • parentNode():遍历到当前节点的父节点;
  • firstChild():...第一个子节点;
  • lastChild():...最后一个子节点;
  • nextSibling():...当前节点的下一个同辈节点;
  • previousSibling():...当前节点的上一个同辈节点;

createTreeWalker()方法

该方法用于创建TreeWalker对象,document.createTreeWalker()方法接收4个参数,与document.createNodeIterator()方法一致。其中的currentNode属性,表示任何遍历方法在上一次遍历中返回的接待你。通过设置这个属性也可以修改遍历继续进行的节点。如:

举例:

以下面的html代码为例:

遍历div元素中所有的节点

遍历div元素中所有的li元素中文本

由于IE中没有对应的类型和方法,所以使用遍历的夸浏览器解决方案非常少见。

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: