Dom-Dom树-Dom节点

最新推荐文章于 2025-05-19 00:15:00 发布

JikelZhang

最新推荐文章于 2025-05-19 00:15:00 发布

阅读量934

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/weixin_54902466/article/details/117884450

JavaScript 专栏收录该内容

55 篇文章

订阅专栏

Dom

概念

是浏览器提供的一套专门用来操作网页内容的功能

核心思想

把网页内容当做对象来处理

作用

开发网页特效和实现用户交互

全称

Document Object Model 文档对象模型

2.DOM树

概念

HTML 文档以树状结构直观的表现出来，我们称为文档树或 DOM 树
在这里插入图片描述

实质

描述网页内容关系的名词

作用

文档树直观的体现了标签与标签之间的关系
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 将HTML文档以---树状结构---直观的表现出来 -- 文档树 / Dom树(描述网页内容关系)
        // 用来描述网页内容,当做对象处理
        // 用来描述网页内容,用来描述网页内容
        // dom树:描述网页内容关系,将document以树状结构展示,当做对象处理
        // HTML文档就是H5标签
        // 元素(标签)节点 :html标签
        // ---属相节点 : 所有的属性 src / href
        // ---文本节点 : 所有文字
    </script>
</body>
</html>

3.Dom节点

概念

DOM树里每一个内容都称之为节点

节点类型

1.元素节点:

所有的标签比如 body、 div
html 是根节点

2.属性节点

所有的属性比如 href

3.文本节点

所有的文本

4.其他

在这里插入图片描述

4.document

概念

是 DOM 里提供的一个对象

作用

它提供的属性和方法都是用来访问和操作网页内容的

本质

例：document.write()

代表浏览器显示网页内容的区域

网页所有内容都在document里面

document 是学习 DOM 的核心

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Dom中的一个对象,用来访问和操作网页内容,代表浏览器显示内容的区域
        // 显示网页内容的区域 显示网页内容的区域 是Dom里的一个对象,用来访问和操作网页内容
        // 网页中所有的内容都在document里边
        // 是学习Dom的核心

        // dom:document object model -文档对象模型,是浏览器专门用来操作网页内容的一套功能
        // 核心思想就是:将网页内容当做对象进行处理
    </script>
</body>
</html>