查找
***查找:
1. 三个元素不用找，可直接获得:
<html> document.documentElement
<head> document.head
<body> document.body
2. 节点间关系: 2大类：
何时: 只要已经获得了一个节点，找周围节点时
节点树: 包含所有节点(元素,文本)的完整的树结构
1. 父子关系: elem.parentNode 返回一个父节点对象
elem.childNodes 返回子节点对象的集合
elem.firstChild 返回第一个子节点对象
elem.lastChild 返回最后一个子节点对象
2. 兄弟关系:
elem.previousSibling : 返回当前节点的前一个兄弟节点
elem.nextSibling : 返回当前节点的下一个兄弟节点:
问题: 不但包含有用的元素节点，还包含看不见的换行/空格干扰
解决: 今后只要仅关心元素节点时，就可用元素树
元素树: 仅包含元素节点的树结构
1. 父子关系: elem.parentElement 返回一个父元素对象
elem.children 返回子元素对象的集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素对象
2. 兄弟关系:
返回当前节点的前一个兄弟元素
elem.previousElementSibling :
返回当前节点的下一个兄弟元素:
elem.nextElementSibling :
***elem.childNodes和elem.children返回的都是动态集合:
动态集合(live collection): 不实际存储元素和属性值
每次访问集合都重新查找DOM树
遍历动态结合:
错误: for(var i=0;i<children.length;i++)
后果,循环了几次，就重复查找了几次DOM树
解决: for(var i=0,len=children.length; i<len; i++)
仅在循环开始时查找一次DOM树，将值另存为在len中
3. 递归遍历: 查找指定父节点下所有子代节点——鄙视题 手写
如何: 2步:
1. 先遍历所有直接子节点
2. 在遍历直接子节点时，对每个子节点调用和父节点完全相同的方法。
算法: 深度优先遍历: 每次都优先遍历子节点
所有子节点遍历完，才返回遍历兄弟节点
递归的效率: 极低。
解决: 绝大多数递归都可用循环代替
遍历API: 每次仅遍历下一个节点，可用循环反复执行(了解)
1. 节点迭代器:
如何: 2步:
1. 创建迭代器对象:
var iterator=document.createNodeIterator(
parent,NodeFilter.SHOW_ALL, null, false
.SHOW_ELEMENT
);
2. var 原先的节点对象=
iterator.nextNode(); 跳到下一个节点
如果返回null，说明到头了
内置的就是深度优先遍历算法。
html
<!DOCTYPE HTML>
<html>
<head>
<title>遍历节点树</title>
<meta charset="utf-8"/>
</head>
<body>
<span>Hello World !</span>
<ul id="nav">
<li>电影</li>
<li>综艺
<ul>
<li>跑男</li>
<li>爸爸</li>
<li>极限</li>
</ul>
</li>
<li>剧集</li>
</ul>
<script src="js/3_2.js"></script>
</body>
</html>
js
//定义函数：遍历给定父元素下的直接子节点
function getChildren1(parent){
//如果parent不是文本节点，就输出节点名，否则输出节点值
console.log(parent.nodeType!=3?parent.nodeName:parent.nodeValue);
//遍历parent下所有直接子节点
var children=parent.childNodes;
for(var i=0，i=children.length;i<len;i++){
//对父元素的每个子节点调用和父元素完全相同的函数
getChildren1(children[i]);
}
}
function getChildren2(parent){
//创建迭代器对象
var iterator=document.createNodeIterator(
parent,NodeFilter.SHOW_ALL,null,false
);
//用循环反复调用迭代器的nextnode()跳向下一个节点
var node;
while ((node=iterator.nextNode())!=null){
console.log(node.nodeType!=3?node.nodeName:node.nodeValue);
}
}
getChildren2(document.body);
