Dom树，什么是dom树？

相信很多初学前端的小伙伴，学了html, css, js之后，欣喜之余还有一丝小傲娇，没有想到那些大佬们口中又 提到了DOM树。

你两眼一抹黑，年轻人总是要接受社会的爱(du)护(da)。

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

为了那些被dom支配的日子，为了祖国的大好河山，为了下半辈子的幸福....

所以我们来谈谈什么是dom.

举个例子

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

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

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

大佬们已经帮你想好了！

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

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

image

这个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有一个理解。

参考文档：
W3school DOM

文章会随时改动，要到博客园里看偶。一些网站会爬取本文章，但是可能会有出入。
https://www.cnblogs.com/asmurmur/

posted @   Dba_sys  阅读(10285)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示