【面向JS--DOM 递归API】

最新推荐文章于 2022-09-06 18:27:36 发布

hfhan_872914334

最新推荐文章于 2022-09-06 18:27:36 发布

阅读量376

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/hf872914334/article/details/78484652

版权

javascript 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

1、NodeIterator

按照深度优先的顺序，依次遍历每个节点对象

深度优先: 优先遍历一个节点的下级节点，只有下级节点遍历完，才遍历兄弟节点

如何使用: 2步:

1、创建NodeIterator对象:

var iterator = document.createNodeIterator( 
    root, whatToShow, filter,entityReferenceExpansion);

iterator就站在开始父节点上

用到的四个参数意义如下：

1、root:从树中的哪个节点开始搜索；
2、whatToShow:一个数值代码，代表哪些节点需要搜索；
3、filter:NodeFilter对象，用来决定需要忽略哪些节点，不想使用它的话，可以留空（null）；
4、entityReferenceExpansion:布尔值，表示是否需要扩展实体引用；

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：搜索记号节点；

最简单的访问所有节点的NodeIterator对象，可以使用下面的代码：

var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, null, false);

2、循环调用iterator，遍历每个节点对象

返回当前节点,然后跳到下一个节点
    var currNode=iterator.nextNode()
倒退一步,返回当前节点
    var prevNode=iterator.previousNode()
循环条用
    while((node=iterator.nextNode())!=null){
        node//当前节点
    }

2、TreeWalker

可选择跳转方向的迭代器，基本功能和NodeIterator完全一样

相同: 开始时都站在开始父元素上
不同: 添加了下面一些遍历方法
     parentNode(): 跳到父节点
     firstChild(): 跳到第一个子节点
     lastChild(): 跳到最后一个子节点
     previousSibling(): 跳到前一个兄弟节点
     nextSibling(): 跳到后一个兄弟节点

<html>
<head>
<title>dom中的NodeIterator对象示例</title>
<script>
function makelist(){
   var divnode = document.getElementById("div1");
   var
   FILTER= new Object();
   FILTER.acceptNode = function(node){
      return (node.tagName == "P") ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
   }
   var iterator = document.createTreeWalker(divnode, NodeFilter.SHOW_ELEMENT, FILTER, false);
   var oput = document.getElementById("textarea1");
   var node = iterator.nextNode();
   while(node){
      oput.value += node.tagName +"\n";
      node = iterator.nextNode();
   }
}
</script>
</head>
<body>
<div id="div1">
   <p>你好<b>TreeWalker!</b></p>
   <ul>
      <li>列表项一</li>
      <li>列表项二</li>
      <li>列表项三</li>
      <li>列表项四</li>
   </ul>
</div>
<textarea id="textarea1" rows="10"></textarea><br />
<input type="button" value="生成列表" onclick="makelist()" />
</body>
</html>