极智开发 | 讲讲 DOM 树

欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享

大家好，我是极智视界，本文讲一下 DOM 树。

搞前端的同学对于这个概念肯定是熟悉的不能再熟悉，DOM 即 Document Ojbect Model 文档对象模型，是 W3C 组织推荐的 处理可扩展标记语言 (HTML 或者 XML) 的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。而 DOM 树是以 HTML Document 为根节点，其余节点为子节点，组织成一个树状的数据结构表示。

上面的介绍可能还不够直观，举个例子，比如我们打开了淘宝首页，然后你 按 F12 或 右键 -> 检查，会得到如下截图：

右侧即为 DOM，其结构为 DOM 树，每个网页都会有它自身的一个 DOM 树，其中为根节点，、

这些都是子节点，其结构就像棵树，根只有一个、树枝可以肆意生成，如下：

若我们用 vscode 来编辑 HTML，则可以输入 html 以快速构建骨架：


DOCTYPE html>
<html lang="en">
<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>Documenttitle>
    
    <style>style>
head>
<body>
    
    <div>div>
    
    <span>span>
    
    
    <script>script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

看起来是不是像这样：

好了，以上分享了 DOM 树的概念。希望我的分享能对你的学习有一点帮助。

【公众号传送】

《极智开发 | 讲讲 DOM 树》

在这里插入图片描述

扫描下方二维码即可关注我的微信公众号【极智视界】，获取我的更多经验分享，让我们用极致+极客的心态来迎接AI ！

相关阅读:
Go 接口-契约介绍
windows下nginx基本指令
Java 的开发效率究竟比 C++ 高在哪里？
Spring Cloud Gateway 整合 sentinel 实现流控熔断
web网页设计期末课程大作业 HTML+CSS+JavaScript 美食餐饮文化主题网站设计学生DW静态网页设计
strimzi实战之三：prometheus+grafana监控（按官方文档搞不定监控？不妨看看本文，已经踩过坑了）
u盘里的文件损坏了怎么修复?
版本版本还是版本
一文读懂 Shiro 登录认证全流程
SpringBoot使用配置中心Apollo启动很慢两分钟解决

原文地址：https://blog.csdn.net/weixin_42405819/article/details/126077963