DOM遍历

元素的遍历。

DOM2级遍历和范围 定义了俩个用于辅助完成顺序遍历DOM结构的类型NodeIterator和TreeWalker.这俩个类型能够基于给定的起点节点对DOM结构执行深度优先遍历操作。

var div = document.getElementById("div");
var it = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node = it.nextNode();
while(node != null){
alert(node.tagName)
node = it.nextNode()
}

TreeWalker实例 同样具有NextNode()previousNode()方法，还有nextSilbling()previousSilbling firstChild()lastChild()

DOM中的范围：

方便控制页面，DOM2级在Document类型中定义了createRange()方法。在兼容Dom浏览器中这个方法属于Document对象。

利用DOM范围实现简单的选择

var range = document.createRange();
var div = document.getElementById("div");
range.selectNode(div);

在使用selectNode 时候startContainer endContainer commonAncestorContainer 都是传入节点的父节点。在使用selectNodeContents();startContainer endContainer commonAncestorContainer 都是传入节点。

用Dom实现复杂选择

setStart(refNode,offset)

setEnd(refNode,offset)

其实可以用上面的方法来表示selectNode()

var div = document.getElementById("div");
var range = document.createRange();
var len = div.parentNode.childNodes.length
index = -1;
for(var i = 0;i<len;i++){
if(div.parentNode.childNodes[i] == div){
index = i;
}
}
range.setStart(div.parentNode,index);
range.setEnd(div.parentNode,index+1);