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

遍历节点数

深度优先算法，递归调用

节点树

包含所有节点对象的树

arguments.callee:指代当前函数对象

何时使用：多用于在递归调用内部取代当前函数名

只要递归调用，内部调用当前函数都要用callee

遍历元素树：仅包含元素节点的树结构

仅是节点树的子集。 有兼容性问题

DOM Tree的六种关系

名字	节点树	元素树
父节点	parentNode	parentElementNode
所有子节点	childNodes	children
第一个子节点	firstChild	firstElementChild
最后一个子节点	lastChild	lastElementChild
前一个兄弟	previousSibling	previousElementSibling
后一个兄弟	nextSibling	nextElementSibling

遍历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++)