DOM遍历是以深度优先遍历的，定义了两种遍历DOM的结构类型NodeIterator和 TreeWalker
- 深度优先遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom遍历</title>
</head>
<body>
<div>
<ul>
<li>1</li>
</ul>
</div>
</body>
</html>
顺序：document -> html -> head -> title -> Dom遍历 -> body -> div -> ul ->li -> 1
- NdeIterator
方法：document.createNodeIterator()
四个参数:
root:搜索起点的节点
whatToShow:节点数字代码
filter:过滤器
entityReferenceException:布尔值,表示是否要扩展实体引用。这个参数在HTML页面中没有用，因为其中的实体引用不能扩展。
在Firefox和Chrome中，createNodeIterator函数除了的一个参数外的其它参数都是可选的。但是在IE中四个参数必须齐全，所以使用时一般四个参数全传上。
whatToShow参数可以有下列这些常量或其组合的取值：
1、NodeFilter.SHOW_ALL：搜索所有节点；
2、NodeFilter.SHOW_ELEMENT：搜索元素节点；
3、NodeFilter.SHOW_ATRRIBUTE：搜索特性节点；
4、NodeFilter.SHOW_TEXT：搜索文本节点；
5、NodeFilter.SHOW_ENTITY_REFERENCE：搜索实体引用节点；
6、NodeFilter.SHOW_ENTITY：搜索实体节点；
7、NodeFilter.SHOW_PROCESSING_INSTRUCTION：搜索PI节；
8、NodeFilter.SHOW_COMMENT：搜索注释节点；
9、NodeFilter.SHOW_DOCUMENT：搜索文档节点；
10、NodeFilter.SHOW_DOCUMENT_TYPE：搜索文档类型节点；
11、NodeFilter.SHOW_DOCUMENT_FRAGMENT：搜索文档碎片节节；
12、NodeFilter.SHOW_NOTATION：搜索记号节点；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom遍历</title>
</head>
<body>
<div id="myDiv">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
let div = document.getElementById("myDiv");
let iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,
null,false);
let node = iterator.nextNode();
alert(node);
while(node!==null){
alert("node : "+ node.tagName);
node = iterator.nextNode();
}
</script>
alert("只想显示li标签");
let filter = function (node2) {
return node2.tagName.toLowerCase() === "li" ?
NodeFilter.FILTER_ACCEPT:
NodeFilter.FILTER_SKIP;
};
let iterator2 = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,
filter,false);
let node2 = iterator2.nextNode();
alert(node2);
while(node2!==null){
alert("node2 : "+ node2.tagName);
node2 = iterator2.nextNode();
}
- TreeWalker
建立和上面一样，但是它更加灵活：
parentNode():进入当前节点的父节点;
firstChild():进入当前节点的第一子节点;
lastChild():进入当前节点的最后一个子节点
nextSibling():进入当前节点的下一个兄弟节点
previousSibling():进入当前节点的前一个兄弟节点
可以任意方向查找 - filter值
TreeWalker除了上面出现的NodeFilter.FILTER_ACCEPT， NodeFilter.FILTER_SKIP;还有NodeFilter.FILTER_REJECT。
NodeFilter.FILTER_SKIP:跳过相应的节点继续到下一节点
NodeFilter.FILTER_REJECT:跳过相应节点以及整个子树
网友评论