遍历API

1. 递归:
   元素树: 仅包含元素节点的树结构
   何时使用: 只希望访问元素节点时，就使用元素树
   如何使用: 
     1.父子: parentElementNode
    children 兼容IE8
    firstElementChild
    lastElementChild
     2.兄弟: previousElementSibling
    nextElementSibling


   遍历API:
   1. NodeIterator：按照深度优先的元素，依次遍历每个节点
如何使用: 2步:
1. 创建NodeIterator：
var iterator=document.createNodeIterator(
   parent,
  NodeFilter.SHOW_ALL/NodeFilter.SHOW_ELEMENT,
   null,false
);
        2. 调用iterator的前进和后退方法，获得前一个或后一个节点对象:
var node=iterator.nextNode(); //下一个
强调: 迭代器开始前，站在parent之前的位置
   第一次nextNode()后，才会站在parent上开始遍历
***如果nextNode返回null，说明遍历结束
var node=iterator.previousNode();//前一个
强调: previousNode()如果仅调用一次，就留在原地
     连续previousNode两次，才退一步



   2. TreeWalker: 基本用法和NodeIterator完全相同
2点差异: 
1. TreeWalker一开始就已经站在开始节点上
        2. 不但可前后移动，还可向任意方向移动
  parentNode()
  firstChild()
  lastChild()
  previousSibling()
  nextSibling()


2. 查找: 
   1. 按HTML查找: 4种:
     1. 按id查找
var elem=document.getElementById("id");
强调: 如果没找到，返回null
     2. 按标签名
       var elems=parent.getElementsByTagName("标签名");
强调: 1. 返回多个元素的集合
        即使返回1个，也要[0]
        动态集合: 遍历时，先存个数，再遍历
              2. 可用于查找任何元素下的子元素
              3. 不仅找直接子元素，而且查找所有子元素
     3. 按name属性查找: 逐渐被HTML DOM的form对象代替
var elems=parent.getElementsByName("name");
比如: 
<form id="f1">
  <input name="uname"/>
  <input type="password" name="pwd"/>
</form>
获得f1： var form=document.forms["f1"];
获得uname: var txtUname=form.uname;
     4. 按class属性查找: IE9+
     var elems=parent.getElementsByClassName("class");

     强调：如果没找到，返回空集合，length为0
        
  2. Selector API: 按css选择器查找元素——jQuery核心
     何时使用: 只要查找复杂时，最好用Selector API
     如何使用: 2个API:
      1. 确定只会找到一个元素时:
var elem=parent.querySelector("任意选择器");
万一选择器匹配多个，只返回第1个
强调: 如果没找到，返回null
      2. 希望查找多个选择器匹配的元素时
var elems=parent.querySelectorAll("... ...");
     强调：querySelectorAll返回非动态集合
保存了完整的元素属性，每次访问非动态集合，不会导致重新检索DOM树
如果没找到，返回空集合，length=0
缺: 返回的效率低！