七DOM编程学习-概念引入

左手的ㄟ右手 2023-09-30 18:37 15阅读 0赞

**什么是DOM编程**

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

**什么是document**

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

**document对象如何获取**

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

![6267dbfa9f9b45a33e0081c603361536.png][]

![b9dbbec5647dd52c8d22978519224cc0.png][]

**DOM节点分类node**

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

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

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

文本节点 Text 如:我的链接

**DOM操作的内容**

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

2.操作文本

3.操作属性

4.操作元素

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

实例代码分析

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title>页面分析</title>
            </head>
            <body>
                   x
                    <div id="d1" style="width: 100px;height: 100px; border: 1px solid red;">
                            1a
                            <span>hello</span>
                            2b
                            <span>thank you</span>
                            3c
                            <span>thank you very much</span>
                            4d
                    </div>
                   y
            </body>
    </html>

![aace1ed5932daa3654ef0f4e7e446bef.gif][]

![dddb9dff85801a89654a85d8ff3d08c2.gif][]

![a131fa82beff963b5eba60af4f723aa1.png][]

Node节点常用的属性和方法

![9ed0abf59f42893757014fa6b8aff538.png][]

![3ef7f47616d9aed82c177dc2ee09b48d.png][]

[6267dbfa9f9b45a33e0081c603361536.png]: https://img-blog.csdnimg.cn/img_convert/6267dbfa9f9b45a33e0081c603361536.png
[b9dbbec5647dd52c8d22978519224cc0.png]: https://img-blog.csdnimg.cn/img_convert/b9dbbec5647dd52c8d22978519224cc0.png
[aace1ed5932daa3654ef0f4e7e446bef.gif]: https://img-blog.csdnimg.cn/img_convert/aace1ed5932daa3654ef0f4e7e446bef.gif
[dddb9dff85801a89654a85d8ff3d08c2.gif]: https://img-blog.csdnimg.cn/img_convert/dddb9dff85801a89654a85d8ff3d08c2.gif
[a131fa82beff963b5eba60af4f723aa1.png]: https://img-blog.csdnimg.cn/img_convert/a131fa82beff963b5eba60af4f723aa1.png
[9ed0abf59f42893757014fa6b8aff538.png]: https://img-blog.csdnimg.cn/img_convert/9ed0abf59f42893757014fa6b8aff538.png
[3ef7f47616d9aed82c177dc2ee09b48d.png]: https://img-blog.csdnimg.cn/img_convert/3ef7f47616d9aed82c177dc2ee09b48d.png