相信很多初学前端的小伙伴，学了html,css,js之后，欣喜之余还有一丝小傲娇，没有想到那些大佬们口中又 提到了DOM树。你两眼一抹黑，年轻人总是要接受社会的爱(du)护(da)。

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

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

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

举个例子

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

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

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

大佬们已经帮你想好了！

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

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

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

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

  • 如有什么不妥的地方还请各路大家提点

Dom树，什么是dom树？的更多相关文章

  1. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  2. HTML DOM(一)：认识DOM

     分类: HTML/JavaScript/CSS(10)  版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/ghsau. 什么是DOM?       通过 Jav ...

  3. javascript中0级DOM和2级DOM事件模型浅析

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  4. js学习总结：DOM节点二（dom基本操作）

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

  5. python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  6. 全面理解虚拟DOM，实现虚拟DOM

    1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需 ...

  7. 通俗易懂的来讲讲DOM——科普性质的DOM入门教程

    DOM这个东西很重要,不过初学的时候很容易蒙,什么Document.Element.Node用官方语言来解释根本就不是人话,只能在实践中硬着头皮一点一点尝试.今天要推荐的是一篇关于DOM的博客.说是教 ...

  8. 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍

    昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...

  9. javascript中0级DOM和2级DOM事件模型浅析 分类： C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  10. 轻松学习JavaScript十八：DOM编程学习之DOM简单介绍

    一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...

随机推荐

  1. P1200_你的飞碟在这儿（JAVA语言）

    题目描述 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者. 不幸的是,他们的飞碟每次出行都只能带上一组支持者.因此,他们要用一种聪明的方案让这些小组提前知道谁会被彗星带 ...

  2. 【java框架】SpringBoot(5)--SpringBoot整合分布式Dubbo+Zookeeper

    1.理论概述 1.1.分布式 分布式系统是若干独立计算机的集合,这些计算机对于用户来讲就像单个系统. 由多个系统集成成一个整体,提供多个功能,组合成一个板块,用户在使用上看起来是一个服务.(比如淘宝网 ...

  3. 力扣 - 347. 前 K 个高频元素

    目录 题目 思路1(哈希表与排序) 代码 复杂度分析 思路2(建堆) 代码 复杂度分析 题目 347. 前 K 个高频元素 思路1(哈希表与排序) 先用哈希表记录所有的值出现的次数 然后将按照出现的次 ...

  4. 前端vue性能优化

    一:代码层次优化 1.1.v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建:也是惰性的:如果在初始渲染时 ...

  5. 无法打开“&#215;&#215;&#215;”，因为无法确认开发者的身份——解决办法

    当打开这些应用程序时,系统提示无法打开" XXX",因为它来自身份不明的开发者.我们可以按照下面的方法解决. 教程 1.打开应用程序,找到你要打开的软件.按住control键,点击 ...

  6. 解决“用PicGo-2.3.0-beta5 + GitHub做博客图床，github仓库图片文件不显示”的问题记录（备忘）

    解决"用PicGo-2.3.0-beta5 + GitHub做博客图床,github仓库图片文件不显示"的问题记录(备忘) 历时几个小时百度,终于靠自己理解解决了GitHub仓库图 ...

  7. Linux 查看GPU状态

    Linux 查看GPU状态 nvidia-smi nvidia-smi是NVIDIA自带的一个命令可以详细的展示显卡的运行状态. gpustat gpustat是github上开源的一个小工具,对于v ...

  8. Go 包管理与依赖查找顺序

    目录 1. 规则: 2. 编译时的依赖包查找机制 3.vendor vendor的层级搜索 4. modules 1. 规则: 同一目录下只能存在一个包 目录和目录下源文件的包命名可以不同 当包名与目 ...

  9. Salesforce学习之路（七）Visualforce结合Reports展示图表

    Salesforce作为一款CRM系统,个人觉得最重要的环境便是在于数据的展示和联动,而Salesforce也本身提供了相当强大的功能,Report在展示图表的方面十分强大,前段时间更是宣布以157亿 ...

  10. Throwing cards away I UVA - 10935

      Given is an ordered deck of n cards numbered 1 to n with card 1 at the top and card n at the botto ...