一. 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属性节点