极智开发 | 讲讲 DOM 树
Posted 极智视界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了极智开发 | 讲讲 DOM 树相关的知识，希望对你有一定的参考价值。
欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享
大家好，我是极智视界，本文讲一下 DOM 树。
搞前端的同学对于这个概念肯定是熟悉的不能再熟悉，DOM 即 Document Ojbect Model 文档对象模型，是 W3C 组织推荐的 处理可扩展标记语言 (HTML 或者 XML) 的标准 编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。而 DOM 树 是以 HTML Document 为根节点，其余节点为子节点，组织成一个树状的数据结构表示。
上面的介绍可能还不够直观，举个例子，比如我们打开了 淘宝首页，然后你 按 F12 或 右键 -> 检查，会得到如下截图：
右侧即为 DOM，其结构为 DOM 树，每个网页都会有它自身的一个 DOM 树，其中 <html> 为根节点，<body> 、<div> 这些都是子节点，其结构就像棵树，根只有一个、树枝可以肆意生成，如下：
若我们用 vscode 来编辑 HTML，则可以输入 html 以快速构建骨架：
<!-- 快速构建骨架 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 生长meta节点 -->
<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节点 -->
<title>Document</title>
<!-- 生长CSS节点 -->
<style></style>
</head>
<body>
<!-- 生长div节点 -->
<div></div>
<!-- 生长span节点 -->
<span></span>
<!-- ... -->
<!-- 生长JS节点 -->
<script></script>
</body>
</html>
看起来是不是像这样：
好了，以上分享了 DOM 树的概念。希望我的分享能对你的学习有一点帮助。
【公众号传送】
扫描下方二维码即可关注我的微信公众号【极智视界】，获取我的更多经验分享，让我们用极致+极客的心态来迎接AI ！
以上是关于极智开发 | 讲讲 DOM 树的主要内容，如果未能解决你的问题，请参考以下文章
极智开发 | docker内安装jupyter notebook的正确姿势