什么是DOM?(JavaScript DOM是什么?)

1、DOM简洁

DOM是js中最重要的一部分,没有DOM就不会通过js实现和用户之间的交互。
window是最大的浏览器对象,在它的下面还有很多子对象,我们要学习的DOM就是window对象下面的document对象
DOM(Document Object Model)是由W3C指定的用于访问诸如XML和HTML等结构化文档的标准

W3C DOM标准被分为三个不同的部分:

  • 核心DOM:针对任何结构化文档的标准模型
  • XML DOM:针对XML文档的标准模型
  • HTML DOM:针对HTML文档的标准模型

    DOM的设计是以对象管理组织(OMG)的规约为基础的,可以用于任何编程语言,DOM以基于对象的方式来描述整个文档,让我们可以很方便的操作整个文档,包括:文档内容的添加、修改、隐藏、显示,对HTML央视的添加和替换等。
// 例子
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<button onclick="createImg()">点击生成图片</button>
<script>function createImg(){var img = document.createElement('img'); // 创建图片标签img.src = 'https://www.zhishunet.com/static/zhishuindex/picture/weixin.jpg'; // 设置src属性// 显示到页面上document.getElementsByTagName('body')[0].appendChild(img);}
</script>
</script>
</body>
</html>

2、DOM中的D是什么

DOM中的D指的是document(文档),在我们进行的web开发中指的就是HTML文档。我们向服务器请求页面,服务器返回的就是一个HTML文档,在浏览器收到HTML文档后会把这个文档处理成一个document对象,然后显示在浏览器中,如果其中有js代码则会被一一顺序执行显示出相应的动态效果

3、DOM中的O是什么

DOM中的O指的是object对象,服务器返回HTML文档之后欧浏览器会把HTML文档解析成DOMN对象,放入到内存中,再从内存中取出这个document对象显示在浏览器中。
正是由于浏览器把服务器返回的HTML文档转换成document对象并存储与内存中,js才可以操作这些标签元素,呈现出不同的动态效果。

4、DOM中的M是什么

DOM中的M指的是Model,就是模型的意思,就是浏览器在把HTML文档处理成document对象时所使用的组织形式,也可以说documeng对象是一种表现形式。
DOM在组织HTML文档的时候以树状形式实现的。在收到服务器返回的HTML文档之后,DOM会把这个HTML文档以家谱树的形式组织起来并存储到内存中,在显示到浏览器中供用户查看。
家谱树本身就是一种模型,==使用父(parent)、子(child)、兄弟(sibling)==等记号表示之间的关系,最大的优点就是可以把复杂的方式简单化

像这样大家一看就明白<html>标签是树的根,代表整个HTML文档,在它下面<head>和<body>标签是并列的兄弟关系,在<head>标签中有<meta>和<title>标签。像这样再复杂的文档也能一层层的表示出来,而且标签元素所在的位置也非常容易描述,这就是树状结构模型所带来的好处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/416648.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity导出Android项目踩坑记录

1、buildSetting-> 设置ExportProject 2、buildsetting ->playerSetting ->设置IL2CPP 3、设置ndk edit->preferences->external tools->ndk 如果unity的ndk版本和android项目里的ndk版本不一致会报错&#xff0c;让人很崩溃的 4、支持64位配置 buildsetti…

【Java】JDBC的使用

JDBC package jdbc_demo;import java.sql.Connection; import java.sql.DriverManager; import java.sql.Statement;public class jdbc {public static void main(String[] args)throws Exception {//1.注册驱动Class.forName("com.mysql.cj.jdbc.Driver");//2.获取…

c JPEG 1D DCT 优化二(AAN)

这两个图可能就是AAN 的数学模型 优化DCT就是用代码实现矩阵9,10 9和10已经把64个系数缩小到一半32个了。光从这两图可看出&#xff0c;优化后乘法少了64-32436个&#xff0c;加法少了64-32-824。估计优化时间可少百分之40左右。 实际编码640480 的图片&#xff0c;程序执行时…

FlinkSQL【分组聚合-多维分析-性能调优】应用实例分析

FlinkSQL处理如下实时数据需求&#xff1a; 实时聚合不同 类型/账号/发布时间 的各个指标数据&#xff0c;比如&#xff1a;初始化/初始化后删除/初始化后取消/推送/成功/失败 的指标数据。要求实时产出指标数据&#xff0c;数据源是mysql cdc binlog数据。 代码实例 --SET t…

解决系统开发中的跨域问题:CORS、JSONP、Nginx

文章目录 一、概述1.问题场景2.浏览器的同源策略3.解决思路 二、一点准备工作1.创建前端工程12.创建后端工程3.创建前端工程24.跨域问题 三、方法1&#xff1a;使用CORS四、方法2&#xff1a;JSONP五、方法3&#xff1a;Nginx1.安装和启动&#xff08;windows&#xff09;2.使用…

TestNG注释

目录 TestNG注释列表 BeforeXXX和AfterXXX注释放在超类上时如何工作&#xff1f; 使用BeforeXXX和AfterXXX TestNG注释 TestNG是一个测试框架&#xff0c;旨在简化广泛的测试需求&#xff0c;从单元测试&#xff08;隔离测试一个类&#xff09;到集成测试&#xff08;测试由…

【LGR-172-Div.4】洛谷入门赛 #19(A—H,c++详解!)

文章目录 【LGR-172-Div.4】洛谷入门赛 #19A.分饼干 I题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示样例解释 1样例解释 2数据范围与约定思路: 代码 B.分饼干 II题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样…

书生·浦语大模型实战营第四次课堂笔记

先来看看参考作业 哈哈到这才想起来写笔记 倒回去看发现要求将不要葱姜蒜换成自己的名字和昵称&#xff01; 好好好我就是不配玩&#xff08;换成管理员也不行&#xff01;&#xff09; 诶怎么能进这个环境&#xff1f;要进双系统ubuntu&#xff1f; 现在看视频发现原来是…

HarmonyOS 页面跳转控制整个界面的转场动画

好 本文 我们来说 页面间的转场动画 就是 第一个界面到另一个界面 第一个界面的退场和第二个界面的进场效果 首先 我这里 创建了两个页面文件 Index.ets和AppView.ets index组件 编写代码如下 import router from "ohos.router" Entry Component struct Index {b…

鉴源实验室|自动驾驶仿真测试技术分析

01 引言 随着科技的不断发展&#xff0c;自动驾驶技术逐渐成为汽车行业的热门话题。然而&#xff0c;要将自动驾驶车辆投放到真实道路上之前&#xff0c;必须进行广泛的测试&#xff0c;以确保其在各种情况下都能安全可靠地运行。自动驾驶车辆的测试是一个复杂而昂贵的过程。…

大数据开发之Hadoop(完整版+练习)

第 1 章&#xff1a;Hadoop概述 1.1 Hadoop是什么 1、Hadoop是一个由Apache基金会所开发的分布式系统基础架构。 2、主要解决&#xff0c;海量数据的存储和海量数据的分析计算问题。 3、Hadoop通常是指一个更广泛的概念-Hadoop生态圈 1.2 Hadoop优势&#xff08;4高&#xf…

2024年AMC8被强制提前交卷事件应该告一段落了,向前看吧孩子们

原以为到今天开考前一切和往年一样的2024年AMC8竞赛也会和往年一样&#xff08;真绕&#xff09;&#xff0c;没想到出了个大规模强制提前交卷时间&#xff0c;让很多家长和孩子不可理解、很难受&#xff0c;甚至有一些家长在收集证据&#xff0c;准备请相关部门去调查&#xf…