JavaScript之DOM编程

敲代码敲到头发茂密

已于 2024-03-12 23:59:51 修改

阅读量387

点赞数 2

分类专栏：前端学习之路 # JavaScript 文章标签： javascript 前端开发语言

于 2022-01-21 07:00:00 首次发布

本文链接：https://blog.csdn.net/YZL40514131/article/details/122550502

版权

前端学习之路同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

在这里插入图片描述

这里写目录标题

一、什么是DOM编程
二、什么是document
三、document对象如何获取
四、DOM节点分类node
五、DOM操作的内容
六、实例代码分析

一、什么是DOM编程

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

二、什么是document

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

三、document对象如何获取

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

在这里插入图片描述

四、DOM节点分类node

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

元素节点 Element 如:我的链接

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

在这里插入图片描述

敲代码敲到头发茂密

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript之DOM编程

什么是DOM编程简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.什么是documentdocument对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。document对象如何获取document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点,documen
复制链接

扫一扫