七DOM编程学习

Dear 丶 2023-09-27 13:44 107阅读 0赞

概念引入

什么是DOM编程

简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

什么是document

document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。

document对象如何获取

document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

![3d22d3498d6f0bb1419e29765c9ab4a2.png][]

DOM节点分类node

结点对象:Node,document对象中的每一个分支点都是一个node对象,它有三个子类

元素节点 Element 如:<a href="链接地址">我的链接</a>

属性节点 Attribute 如:href="链接地址"

文本节点 Text 如:我的链接

DOM操作的内容

1.查询元素（获取元素,进而操作元素,或者元素的属性,文本）

2.操作文本

3.操作属性

4.操作元素

5.操作CSS样式（一个特殊的属性style）

实例代码分析

DOM节点分类node
    
    结点对象:Node,document对象中的每一个分支点都是一个node对象,它有三个子类
    
    元素节点 Element   如:<a href="链接地址">我的链接</a>
    
    属性节点 Attribute  如:href="链接地址"
    
    文本节点 Text      如:我的链接
    
    DOM操作的内容
    
    1.查询元素（获取元素,进而操作元素,或者元素的属性,文本）
    
    2.操作文本
    
    3.操作属性
    
    4.操作元素
    
    5.操作CSS样式（一个特殊的属性style）
    
    实例代码分析

![a934e9ada0ac7b732f3f6567f8116aea.gif][]

![f1332a0b01d1620eee1cccd6a3847e96.gif][]

树形结构图

![b6200a9d5e6606b4cb949e35527fcb72.png][]

Node节点常用的属性和方法

![c1a710c959bedf88f2386c02edda4457.png][]

![797ccb5449c455c6d77185fcd5015e65.png][]

[3d22d3498d6f0bb1419e29765c9ab4a2.png]: https://img-blog.csdnimg.cn/img_convert/3d22d3498d6f0bb1419e29765c9ab4a2.png
[a934e9ada0ac7b732f3f6567f8116aea.gif]: https://img-blog.csdnimg.cn/img_convert/a934e9ada0ac7b732f3f6567f8116aea.gif
[f1332a0b01d1620eee1cccd6a3847e96.gif]: https://img-blog.csdnimg.cn/img_convert/f1332a0b01d1620eee1cccd6a3847e96.gif
[b6200a9d5e6606b4cb949e35527fcb72.png]: https://img-blog.csdnimg.cn/img_convert/b6200a9d5e6606b4cb949e35527fcb72.png
[c1a710c959bedf88f2386c02edda4457.png]: https://img-blog.csdnimg.cn/img_convert/c1a710c959bedf88f2386c02edda4457.png
[797ccb5449c455c6d77185fcd5015e65.png]: https://img-blog.csdnimg.cn/img_convert/797ccb5449c455c6d77185fcd5015e65.png