一、介绍
这节课呢，我们来了解的是JavaScript 遍历HTML节点树，
在Dom文档查的结构中，实际上各级标签呈现树状排列。我们可以把整个html文档看成一个树形，可以通过遍历节点树的形式进行标签的选取。
Dom文档中，遍历节点的节点有，文本节点，注释节点和标签节点。
二、知识点介绍
1、节点类型
2、遍历节点树
3、基于元素节点数的遍历
4、parentElement ——> 返回当前元素的父元素节点（IE不兼容）
5、节点的一个方法
6、使用DOM方法递归遍历节点树——>小案例
三、上课对应视频的说明文档
1、节点类型
所以一般我们获取节点类型用 nodeType
2、遍历节点树
这种遍历可以遍历 文本类节点、注释节点、元素节点等。 任何浏览器都好使。
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以下不兼容
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节点的文本内容，可读写
4.3、nodeType
该节点类型，只读 （返回以上节点类型后面对应的值）
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.nodeType);
对应最上面表格 为元素节点
4.4、Attributes
Element节点的属性集合 ,属性值可以改，但属性名不可以改
attributes：获取一个属性作为对象
getAttribute：获取某一个属性的值
setAttribute：建立一个属性，并同时给属性捆绑一个值
createAttribute：仅建立一个属性
removeAttribute：删除一个属性
getAttributeNode：获取一个节点作为对象
setAttributeNode：建立一个节点
removeAttributeNode：删除一个节点
attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”，IE在这里可以使用“()”，考虑到兼容性的问题，要使用“[]”。关于attributes属性的使用方式上，IE和FF有巨大的分歧，在此不多介绍。
4.4.1、attributes的使用方法：（IE和FF通用）
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的使用方法：
4.4.3、setAttribute的使用方法：（你会发现多了一个名为good的属性hello）
4.4.4、createAttribute的使用方法：（多了一个名为good的空属性）
4.4.5、removeAttribute的使用方法：（少了一个）
getAttributeNode，setAttributeNode，removeAttributeNode三个方法的特点是都直接操作一个node（节点），removeAttributeNode在一开始的时候总会用错，但是充分理解了node的含义的时候，就能够应用自如了。
4.4.6、getAttributeNode的使用方法：
4.4.7、setAttributeNode的使用方法：
4.4.8、removeAttributeNode的使用方法：
5、节点的一个方法
Node.hasChildNodes(); 是否有孩子节点。有：true；没有：false
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes());
6、使用DOM方法递归遍历节点树——>小案例
需求：完成遍历并且带缩进
这里细节点：定义一个数组存放缩进“Tab”，何时压入一个缩进，何时退出一个缩进？
只要有子节点，加压入一个缩进，只要本级所有子节点输出完，就退一个\t
代码如下：
Hello World !
- 电影
- 综艺
- 跑男
- 爸爸
- 真男
- 剧集