遍历某个页面的Dom对象。例如想知道某个DOM对象是否在获得焦点状态。遍历各个DOM节点判断document.activeElement.id == node.id。来确定对象是否获得焦点。
一般会使用各个node访问。类似下面的写法。并且这种写法IE FF都支持。
可是当Dom元素很多的情况下这种方法会很慢。
function IterateNode(node){
//do some thing here.
var childrens = node.childNodes;
if(childrens == null ||
typeof(childrens) == "undefined" ||
childrens.length == 0) return;
for(var i=0;i<childrens.length;i++){
IterateNode(childrens[i]);
}
}
在DOM Level 2标准中提供了两个比较好的方法:
document.createNodeIterator
document.createTreeWalker
createTreeWalker 的功能比 createNodeIterator 强大。支持在兄弟节点上交互(nextSibling previousSibling parentNode)。支持取得首个和最后一个Dom对象(firstChild lastChild)。但是只有FF支持了。用这种方法遍历Dom对象比较快。
function ShowAllDomsByTreeWalker(){
var result;
var walker = document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,false);
var node = walker.nextNode();
while(node){
result += node.tagName + "/t" + node.value + "/t" + node.href + "/n";
node = walker.nextNode();
}
//OutputAllDoms(result);
//walker.nextSibling();
//...
}
一般会使用各个node访问。类似下面的写法。并且这种写法IE FF都支持。
可是当Dom元素很多的情况下这种方法会很慢。
function IterateNode(node){
//do some thing here.
var childrens = node.childNodes;
if(childrens == null ||
typeof(childrens) == "undefined" ||
childrens.length == 0) return;
for(var i=0;i<childrens.length;i++){
IterateNode(childrens[i]);
}
}
在DOM Level 2标准中提供了两个比较好的方法:
document.createNodeIterator
document.createTreeWalker
createTreeWalker 的功能比 createNodeIterator 强大。支持在兄弟节点上交互(nextSibling previousSibling parentNode)。支持取得首个和最后一个Dom对象(firstChild lastChild)。但是只有FF支持了。用这种方法遍历Dom对象比较快。
function ShowAllDomsByTreeWalker(){
var result;
var walker = document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,false);
var node = walker.nextNode();
while(node){
result += node.tagName + "/t" + node.value + "/t" + node.href + "/n";
node = walker.nextNode();
}
//OutputAllDoms(result);
//walker.nextSibling();
//...
}