DOM

一. DOM
1. 什么是DOM
Document Object Model(文档对象模型)
缩写：DOM
针对于HTML和XML文档提供的API(应用程序接口)
DOM描述的是层次化的节点树（倒置的树），开发人员使用DOM对节点进行增加、删除、修改、获取
2. DOM树
也叫节点树
DOM树中所有的节点可以通过JS访问，都可以被增加、删除、修改、查看
文档中的一切都是节点
3. 节点类型
html文档中的一切都是节点（node）
整个文档是一个文档节点 document
文档中可见的每一个HTML元素都是元素节点
文档中的所有文本都是文本节点（空格回车都是文本节点）
文档中的每一个HTML元素的属性都是属性节点 src id class
文档中的所有注释都是注释节点 <!-- -->
4. DOM节点关系
1）子节点
仅对儿子有效，不能获取孙子
childNodes获取所有的子节点，包括文本节点，注释节点
children 获取标签类型的子节点
2）父节点
parentNode：父亲节点，只有一个
3）兄弟节点
下一个兄弟
nextSibling
获取下一个任意类型的兄弟节点
nextElementSibling
获取下一个元素类型的兄弟节点
上一个兄弟
previousSibling
获取上一个任意类型的兄弟节点
previousElementSibling
获取上一个元素类型的兄弟节点
4）第一个最后一个儿子节点
第一个子节点
firstChild: 获取第一个任意类型的子节点
firstElementChild: 获取第一个元素类型的子节点。
最后一个子节点
lastChild: 获取最后一个任意类型的子节点
lastElementChild: 获取最后一个元素类型的子节点。
5）属性节点
getAttributeNode: 从当前元素中获取某个属性节点
结构：
<div id="d1">
<div class="d2"></div>
</div>
<p></p>
<!-- 注释 -->
你好
js：
1）在控制台输出所有body子节点
2）在控制台输出body所有元素类型的子节点
结构：
<ul>
</ul>
<div>
<span>x</span>
<img src="">
</div>
js:
1) 获取ul的父节点，输出到控制台
2）获取第一个li的父节点，输出到控制台
3）点击‘x’按钮，隐藏父元素
结构：
<ul id="">
<li class="">123</li>
<!--comment-->
hello
<li>你好</li>
<li>456<span>span标签</span></li>
<li>hello</li>
</ul>
js：
1）获取第一个li的下一个兄弟节点，输出到控制台
2）获取第一个li的下一个兄弟节点（元素），输出到控制台
3）获取第二个li的上一个兄弟节点，输出到控制台
4）获取第二个li的上一个兄弟节点（元素），输出到控制台。
案例：（04.第一个和最后一个节点.html）
结构：
<ul id="">
<li class="">123</li>
<!--comment-->
hello
<li>你好</li>
<li>456<span>span标签</span></li>
<li>hello</li>
</ul>
js：
1）获取ul的第一个子节点，输出到控制台
2）获取ul的第一个子节点（元素），输出到控制台
3）获取ul的最后一个子节点，输出到控制台
4）获取ul的最后一个子节点（元素），输出到控制台
结构：
<div class="d1" id="hello" abc="t"
b = "bbb">hello</div>
js:
1)控制台输出div的class属性节点
2）控制台输出div的id属性节点
3）控制台输出div的abc属性节点
4）控制台输出div的b属性节点
5）控制台输出div的a属性节点