一般我们在用原生js来遍历元素的时候,都会用childNodes来遍历,但是它必须要用递归来遍历,比较麻烦,我们先来看看下面的例子:

如果我们用childNodes来遍历,关键代码如下:

用childNodes当然是可以完美实现,不过现在有一个更加方便的方法,document.createNodeIterator(root, whatToShow, filter),第一个参数表示要遍历哪个DOM,whatToShow表示遍历的类型,filter表示需要过滤掉哪些。

其中的whatToShow可选参数如下:

1、NodeFilter.SHOW_ALL:搜索所有节点;

2、NodeFilter.SHOW_ELEMENT:搜索元素节点;

3、NodeFilter.SHOW_ATRRIBUTE:搜索特性节点;

4、NodeFilter.SHOW_TEXT:搜索文本节点;

5、NodeFilter.SHOW_ENTITY_REFERENCE:搜索实体引用节点;

6、NodeFilter.SHOW_ENTITY:搜索实体节点;

7、NodeFilter.SHOW_PROCESSING_INSTRUCTION:搜索PI节;

8、NodeFilter.SHOW_COMMENT:搜索注释节点;

9、NodeFilter.SHOW_DOCUMENT:搜索文档节点;

10、NodeFilter.SHOW_DOCUMENT_TYPE:搜索文档类型节点;

11、NodeFilter.SHOW_DOCUMENT_FRAGMENT:搜索文档碎片节节;

12、NodeFilter.SHOW_NOTATION:搜索记号节点;

这里的whatToShow可以用|或者~来组合,例如NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT。

createNodeIterator返回的对象可以使用nextNode()和previousNode()来前进或者后退。

filter的用法如下:

我们来看看createNodeIterator版本的遍历DOM,关键代码如下:

(注意,createNodeIterator遍历的时候包含自身元素,childNodes是不包含的)

这样的话,我们就主要关心我们需要哪些元素,不需要哪些,而不用去写递归,简单了不少。

还有一个类似的方法叫createTreeWalker,和createNodeIterator很类似。不过它返回的对象方法比createNodeIterator多一些。

parentNode():进入当前节点的父节点;

firstChild():进入当前节点的第一子节点;

lastChild():进入当前节点的最后一个子节点

nextSibling():进入当前节点的下一个兄弟节点

previousSibling():进入当前节点的前一个兄弟节点

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字