Dom树，什么是dom树？

自xing且乐观~

已于 2023-05-10 15:37:54 修改

阅读量871

点赞数

分类专栏：前端文章标签：前端 javascript

于 2023-05-10 13:38:58 首次发布

本文链接：https://blog.csdn.net/weixin_45721753/article/details/130598805

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOM是DocumentObjectModel的缩写，是浏览器解析HTML生成的树形结构。通过DOM，开发者可以使用JavaScript动态修改页面内容，如getElementById方法可以找到指定ID的元素并更改其内容。DOM提供了增、删、改、查等操作，使得网页更具交互性。因此，理解DOM对于前端开发至关重要。

摘要由CSDN通过智能技术生成

相信很多初学前端的小伙伴，学了html, css, js之后，会遇到一个名词 DOM树。

首先说一下DOM是什么？

DOM 是 Document Object Model（文档对象模型）的缩写。

举个例子

我们日常生活中，经常会遇到一些写文档的工作，写一个论文 .docx 等等。我们可以改文本的字号，添加标题，增加内容，改变页眉页脚……

但在我们初期写html页面时，一旦代码确定，那么页面的整体显示就会确定下来！打开浏览器浏览你的页面，内心细腻的你，发现一处 <p>我喜欢吃肉！</p>，但你明明想写的是"我喜欢吃"。那我们怎么办呢？我们吭哧吭哧的回到你的html文件，改了那段文本标签。

你想，我要是能在浏览页面时像写.docx 那样随便改文档就好了。正在你冥思苦想之际......

大佬们已经帮你想好了！

当你的服务器把html网页发送给用户时，用户的浏览器会解析你的html代码，生成dom树，css则会生成css规则树。有了这两个树，你的浏览器就可以渲染(生成整个页面)了！所有最终呈现的页面都是由我们的浏览器渲染生成的，这也是为什么我们在检查页面时(f12),对内容的修改会直接反应到页面上。因为它来到咱们这里，长什么样已经不是它可以控制的了。

你为她画了晓妆，你为她添了晚妆。

这个dom树有一个根节点<html>标签，由这个根，你的每一个<meta>标签，<p>标签，<title>,<h1>等等，以及他们的文本内容，在上面生长，我们可以很轻松的在这颗树上定位到他们的位置！这是给门牌号啊。这是数据的结构啊。

可上面说的明明是文档对象！

程序员都知道。对象就是对象数据 ➕ 对象函数

dom对象，在树形结构中，我们可以轻松定位到对应的标签位置，文本位置！

同时给大家提供了对这个结构修改-内容修改的内置函数，这也是对象模型的核心！

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

由DOM提供其他编程语言对于底层数据控制的支持。

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

提供了哪些方法呢？无非就是，四大计算机古典名著《增》《删》《改》《查》。

getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
.etc

这就跟js联系到了一起吧！
我们先看一个简单的例子。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() { document.getElementById("p1").innerHTML = "我喜欢吃";
}
</script>
</head>
<body>
<p id="p1">我喜欢吃肉</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
</script>

<p>上面的段落被一段脚本改变了。</p>
</body>
</html>

有了dom给你的文本定位，你拿到了p1家的门钥匙，月黑风高，你偷走了p1的肉……

id的添加是为了更好的定位，正是有了dom对象，这段js可以利用dom对象的方法，对dom树的内容进行修改。

于是乎我们可以在页面上通过js修改任何东西了。包括文本内容，层叠样式。

基于dom，利用js编程，我们可以让用户"动态的修改页面内容"，这使得网页更加灵活。

所以建议学习的顺序是学完js再对底层的dom有一个理解。

参考资料