一、介绍
这节课呢，我们来了解的是JavaScript 遍历HTML节点树，
在Dom文档查的结构中，实际上各级标签呈现树状排列。我们可以把整个html文档看成一个树形，可以通过遍历节点树的形式进行标签的选取。
Dom文档中，遍历节点的节点有，文本节点，注释节点和标签节点。
二、知识点介绍
1、节点类型
2、遍历节点树
3、基于元素节点数的遍历
4、parentElement ——> 返回当前元素的父元素节点（IE不兼容）
5、节点的一个方法
6、使用DOM方法递归遍历节点树——>小案例
三、上课对应视频的说明文档
1、节点类型
所以一般我们获取节点类型用 nodeType
2、遍历节点树
这种遍历可以遍历 文本类节点、注释节点、元素节点等。 任何浏览器都好使。
<div >
<strong></strong>
<span></span>
<em></em>
</div>
2.1、parentNodes ——>父节点（最顶端的parentNode为#document）;
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.parentNode);
//strong.parentNodes ————div
//strong.parentNode.parentNode ————body
//strong.parentNode.parentNode.parentNode ————html
//strong.parentNode.parentNode.parentNode .parentNode————document
2.2、childNodes ——> 子节点们
var div = document.getElementsByTagName('div')[0];
console.log(div.childNodes);
2.3、firstChild ——>第一个子节点
var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild);
2.4、lastChild ——> 最后一个子节点
var div = document.getElementsByTagName('div')[0];
console.log(div.lastChild);
2.5、nextSibling ————>后一个兄弟节点
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.nextSibling);
3、基于元素节点数的遍历
遍历元素节点。
除了children以外，其他遍历ie9以下不兼容
<div >
<strong></strong>
<span></span>
<em></em>
</div>
3.1、parentElement ——> 返回当前元素的父元素节点（IE不兼容）
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.parentElement);
3.2、children ——> 只返回当前元素的元素子节点
var div = document.getElementsByTagName('div')[0];
console.log(div.children);
3.3、node.childElementCount === node.children.length 当前元素节点的子元素节点个数（IE不兼容）
var div = document.getElementsByTagName('div')[0];
console.log(div.children.length);
3.4、firstElementChild ——> 返回的是第一个节点（IE不兼容）
var div = document.getElementsByTagName('div')[0];
console.log(div.firstElementChild);
3.5、lastELementChild ————>返回的是最后一个元素节点（IE不兼容）
var div = document.getElementsByTagName('div')[0];
console.log(div.lastElementChild);
3.6、nextElementSibling / previousElementSibling ——> 返回后一个/前一个兄弟元素节点（IE不兼容）
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.nextElementSibling);
console.log(strong.previousElementSibling);
4、节点的四个属性
4.1、nodeName
元素的标签名，返回字符串，以大写的形式表示，只读
var strong = document.getElementsByTagName('strong')[0];
console.log(typeof(strong.nodeName) + strong.nodeName);
4.2、nodeValue
text节点或Comment节点的文本内容，可读写
<div><!-- 我是注释节点内容 -->
<span></span>
<strong></strong>
<em></em>
</div>
4.3、nodeType
该节点类型，只读 （返回以上节点类型后面对应的值）
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.nodeType);
对应最上面表格 为元素节点
4.4、Attributes
Element节点的属性集合 ,属性值可以改，但属性名不可以改
<div class="demo"; id = "index">
<span></span>
<strong></strong>
<em></em>
</div>
attributes：获取一个属性作为对象
getAttribute：获取某一个属性的值
setAttribute：建立一个属性，并同时给属性捆绑一个值
createAttribute：仅建立一个属性
removeAttribute：删除一个属性
getAttributeNode：获取一个节点作为对象
setAttributeNode：建立一个节点
removeAttributeNode：删除一个节点
attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”，IE在这里可以使用“()”，考虑到兼容性的问题，要使用“[]”。关于attributes属性的使用方式上，IE和FF有巨大的分歧，在此不多介绍。
4.4.1、attributes的使用方法：（IE和FF通用）
<body>
<div id = "t">
<input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").attributes["value"];
document.write(d.name);
document.write(d.value);
//显示value aaa
</script>
getAttribute，setAttribute，createAttribute，removeAttribute四兄弟的概念比较容易理解，使用方法也比较简单，唯一需要注意这几点：
1、createAttribute在使用的时候不需要基于对象的，document.createAttribute()就可以。
2、setAttribute，createAttribute在使用的时候不要使用name，type，value等单词，IE和FF的反应都奇怪的难以理解。
3、createAttribute在使用的时候如果只定义了名字，没有d.nodeValue = "hello";语句定义值，FF会认为是一个空字符串，IE认为是undefined，注意到这点就可以了。
4.4.2、getAttribute的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttribute("value");
document.write(d);
//显示 aaa
</script>
4.4.3、setAttribute的使用方法：（你会发现多了一个名为good的属性hello）
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").setAttribute("good","hello");
alert(document.getElementById("t").innerHTML)
</script>
4.4.4、createAttribute的使用方法：（多了一个名为good的空属性）
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function (){
var oBox = document.getElementById('box');
alert( document.body.innerHTML );
oBox.setAttribute('value','name');
alert( document.body.innerHTML );
attr = document.createAttribute('hallo');
alert( document.body.innerHTML );/*同上*/
attr.nodeValue = 'world';/*对自定义属性进行编辑*/
alert( document.body.innerHTML );/*同上*/
oBox.setAttributeNode(attr);/*对标签插入自定义属性*/
alert( document.body.innerHTML );/*改变*/
};
</script>
</head>
<body>
<ul id="box">
</ul>
</body>
4.4.5、removeAttribute的使用方法：（少了一个）
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").removeAttribute("value");
alert(document.getElementById("t").innerHTML)
</script>
getAttributeNode，setAttributeNode，removeAttributeNode三个方法的特点是都直接操作一个node（节点），removeAttributeNode在一开始的时候总会用错，但是充分理解了node的含义的时候，就能够应用自如了。
4.4.6、getAttributeNode的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttributeNode("value");
document.write(d.name);
document.write(d.value);
//显示 value aaa
</script>
4.4.7、setAttributeNode的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.createAttribute("good");
document.getElementById("sss").setAttributeNode(d);
alert(document.getElementById("t").innerHTML);
</script>
4.4.8、removeAttributeNode的使用方法：
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.getElementById("sss").getAttributeNode("value")
document.getElementById("sss").removeAttributeNode(d);
alert(document.getElementById("t").innerHTML);
</script>
5、节点的一个方法
Node.hasChildNodes(); 是否有孩子节点。有：true；没有：false
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes());
6、使用DOM方法递归遍历节点树——>小案例
需求：完成遍历并且带缩进
这里细节点：定义一个数组存放缩进“Tab”，何时压入一个缩进，何时退出一个缩进？
只要有子节点，加压入一个缩进，只要本级所有子节点输出完，就退一个\t
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用DOM方法递归遍历节点树</title>
</head>
<body>
<span class="msg">Hello World !</span>
<ul>
<li>电影</li>
<li>综艺
<ul>
<li>跑男</li>
<li>爸爸</li>
<li>真男</li>
</ul>
</li>
<li>剧集</li>
</ul>
</body>
<script>
/*定义一个数组用于存放Tab*/
var arr = [];
function getChildren(parent){
/*如果parent是元素节点，就返回nodeName，否则，返回nodeValue*/
console.log(arr.join("")+"|-"+(parent.nodeType==1?parent.nodeName:parent.nodeValue));
if (parent.childNodes.length){
/*只要有子节点，加压入一个缩进*/
arr.push("\t")
for (var i= 0,len=parent.childNodes.length;i<len;i++){
getChildren(parent.childNodes[i]);
}
/*只要本级所有子节点输出完，就退一个\t*/
arr.pop();
}
}
getChildren(document.body.childNodes[3]);
</script>
</html>
网友评论