遍历节点树、遍历元素树、遍历API、查找 API

墨蓝 2022-07-14 04:00 258阅读 0赞

### 遍历节点数 ###

> 深度优先算法，递归调用

--------------------

### 节点树 ###

> 包含所有节点对象的树  
> arguments.callee:指代当前函数对象  
> 何时使用：多用于在递归调用内部取代当前函数名  
> 只要递归调用，内部调用当前函数都要用callee  
> 遍历元素树：仅包含元素节点的树结构  
> 仅是节点树的子集。 *有兼容性问题*

--------------------

### DOM Tree的六种关系 ###

<table> 
 <thead> 
  <tr> 
   <th>名字</th> 
   <th>节点树</th> 
   <th>元素树</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>父节点</td> 
   <td>parentNode</td> 
   <td>parentElementNode</td> 
  </tr> 
  <tr> 
   <td>所有子节点</td> 
   <td>childNodes</td> 
   <td>children</td> 
  </tr> 
  <tr> 
   <td>第一个子节点</td> 
   <td>firstChild</td> 
   <td>firstElementChild</td> 
  </tr> 
  <tr> 
   <td>最后一个子节点</td> 
   <td>lastChild</td> 
   <td>lastElementChild</td> 
  </tr> 
  <tr> 
   <td>前一个兄弟</td> 
   <td>previousSibling</td> 
   <td>previousElementSibling</td> 
  </tr> 
  <tr> 
   <td>后一个兄弟</td> 
   <td>nextSibling</td> 
   <td>nextElementSibling</td> 
  </tr> 
 </tbody> 
</table>

--------------------

### 遍历API：NodeIterator&TreeWalker ###

> 内部同样使用深度优先算法

1. 创建迭代器对象：

var iterator=document.createNodeIterator(
        开始节点对象,
        显示何种节点,//NodeFilter.SHOW_ALL
                   //NodeFilter.SHOW_ELEMENT
        null,false
    );

*迭代器开始时，站在第一个节点的前一个位置！
         两个方法：var nextNode=iterator.nextNode();
                   让迭代器向下一个对象跳一步
                   同时返回跳到的对象
                   如果没有下一个节点了，则返回null
                   iterator.previousNode();
    
    2. 利用循环推动迭代器反复向下一个节点移动
      TreeWalker vs NodeIterator
      创建和深度遍历的方法，完全一样

> 区别1：  
> : TreeWalker一开始就站在开始节点上  
> : Iterator一开始站子开始节点之前的空位置  
> 区别2：  
> : 扩展了更灵活的跳转方法  
> : parentNode()，firstChild()，nextSibling()…

### 查找元素节点 ###

> 按HTML属性查找：

var elem=document.getElementById("id值");
        var elems=parent.getElementsByTagName("标签名");
            不仅查找直接子元素，且同时查找所有子代元素
        var elems=parent.getElementsByName("按name属性");
        *****以上没有兼容性问题*****
        *****下方API IE8不兼容*****
        var elems=parent.getElementsByClassName("按class名");
        getElementsxxx，返回HTMLCollection: 动态集合
             for(var i=0,len=elems.length;i<len;i++)

> Selector API: 专门利用css选择器查找任意元素的方法，jquery的核心

var elem=parent.querySelector("选择器");
            只返回第一个匹配的元素对象
            何时使用：只找一个元素时，使用！
        var elems=parent.querySelectorAll("选择器");
        ***elems，返回所有符合选择器的元素对象
                  是包含完整对象属性的集合！——非动态集合
        for(var i=0;i<elems.length;i++)