什么是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.mzph.cn/news/634772.shtml

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

相关文章

【数学建模美赛论文word模板更新】数学建模美赛O/F奖论文word写作模板——研赛国赛国一、美赛F/O奖学长联合制作

参加美赛不知道论文如何写、如何排版&#xff1f;快来领取免费模板哦~ 我们的word模板由研赛国赛国一、美赛F/O奖学长联合制作。 论文模板是论文的一部分&#xff0c;它代表着你的论文从构思到完成的全过程&#xff0c;是论文的雏形。 论文模板能够节省你的写作时间&#xf…

当MySql有字段为null,索引是否会失效

sql执行过程中,使用is null 或者is not null 理论上都会走索引,由于优化器的原因导致索引失效变成全表扫描,或者说是否使用索引和NULL值本身没有直接关系,和执行成本有关系。 数据行记录如何存储NULL值的&#xff1f; InnoDB 提供了 4 种行格式 Redundant:非紧凑格式,5.0 版…

01.CheckStyle代码检查工具

CheckStyle代码检查工具 1.介绍 Checkstyle 是一种开发工具&#xff0c;可帮助程序员编写符合编码标准的 Java 代码。它使检查 Java 代码的过程自动化&#xff0c;从而使开发者免于完成这项无聊&#xff08;但重要&#xff09;的任务。这使得它非常适合想要强制执行编码标准的…

高级架构师是如何设计一个系统的?

架构师如何设计系统&#xff1f; 系统拆分 通过DDD领域模型&#xff0c;对服务进行拆分&#xff0c;将一个系统拆分为多个子系统&#xff0c;做成SpringCloud的微服务。微服务设计时要尽可能做到少扇出&#xff0c;多扇入&#xff0c;根据服务器的承载&#xff0c;进行客户端负…

微信这个费用,终于降低了

大家好&#xff0c;我是小悟 这个费用降低了&#xff0c;这对于广大小程序开发者来说无疑是一个好消息。这一举措不仅可以降低开发者的成本&#xff0c;还有助于激发更多的创新和创业激情。 对于广大小程序开发者来说&#xff0c;这也是一个福音&#xff0c;因为他们可以降低开…

DMA技术在STM32中优化UART、SPI和I2C通信性能的研究与实现

DMA&#xff08;Direct Memory Access&#xff0c;直接存储器访问&#xff09;技术可以在STM32微控制器上优化UART、SPI和I2C等通信性能。DMA可以实现数据的高速传输&#xff0c;减轻CPU的负担&#xff0c;提高系统性能。在本篇文章中&#xff0c;我将探讨DMA技术在STM32中优化…

【计算机组成原理】

【第一章】计算机系统概述 【第二章】进程管理

RDMA编程实践-SEND-RECEICVE原语应用

RDMA编程实践 本文描述了RDMA编程过程中的SEND-RECEIVE双边原语的代码实现。包含多个版本&#xff0c;1、client向server发送消息&#xff0c;server回复client收到消息(ACK)&#xff0c;然后两边断开连接。2、server端循环等待客户端建立连接&#xff0c;client发送一次消息后…

Javaweb之SpringBootWeb案例员工管理之删除员工的详细解析

3.3 删除员工 查询员完成之后&#xff0c;我们继续开发新的功能&#xff1a;删除员工。 3.3.1 需求 当我们勾选列表前面的复选框&#xff0c;然后点击 "批量删除" 按钮&#xff0c;就可以将这一批次的员工信息删除掉了。也可以只勾选一个复选框&#xff0c;仅删除一…

超详细的 pytest 钩子函数 —— 之初始钩子和引导钩子来啦!

前几篇文章介绍了 pytest 点的基本使用&#xff0c;学完前面几篇的内容基本上就可以满足工作中编写用例和进行自动化测试的需求。从这篇文章开始会陆续给大家介绍 pytest 中的钩子函数&#xff0c;插件开发等等。 仔细去看过 pytest 文档的小伙伴&#xff0c;应该都有发现 pyt…

PSP - 提取 UniRef 数据库搜索的 MSA 序列物种 (Species) 信息

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/135702185 UniRef库&#xff1a;UniProt参考聚类&#xff08;UniRef&#xff09;的简称&#xff0c;提供了从UniProt知识库&#xff08;包括异构体…

[力扣 Hot100]Day7 接雨水

题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 出处 思路 就是寻找“凹”形区间&#xff0c;找使得左右两端点为最大的两个值的最长区间。这里我分了两种情况&#xff0c;右边大于等于左边…

MySQL深度分页优化问题

☆* o(≧▽≦)o *☆嗨~我是小奥&#x1f379; &#x1f4c4;&#x1f4c4;&#x1f4c4;个人博客&#xff1a;小奥的博客 &#x1f4c4;&#x1f4c4;&#x1f4c4;CSDN&#xff1a;个人CSDN &#x1f4d9;&#x1f4d9;&#x1f4d9;Github&#xff1a;传送门 &#x1f4c5;&a…

RenderDoc 增加 DXBC to HLSL 的 shader viewer

目的 便于后续抓帧出来的 DXBC 转为 HLSL&#xff0c;提高可读性 原因 编写的原因&#xff0c;因为按照网上的大佬的BLOG&#xff0c;发现某个 etnlGD/HLSLDecompiler 上的工具使用上是有问题的 &#xff08;有可能是以前的 render doc 版本没有问题&#xff0c;而我现在是在…

KubeSphere平台使用

KubeSphere官网地址&#xff1a;https://kubesphere.io/zh/ KubeKey一键部署K8S集群&#xff1a;https://kubesphere.io/zh/docs/v3.4/installing-on-linux/introduction/multioverview/ 一台master node&#xff08;初始化主节点&#xff09;、两台 work node&#xff08; joi…

SCI好看的配图-汇总

文章目录 图源&#xff1a;Sustainable Cities and Society【期刊】条形图2热力图-地图 图源&#xff1a;Sustainable Cities and Society【期刊】 引自&#xff1a;A machine learning-driven spatio-temporal vulnerability appraisal based on socio-economic data for COV…

如何编写一个好的测试用例?才能防止背黑锅

如何编写一个好的测试用例&#xff1f;才能防止背黑锅 什么是测试用例&#xff1f;一个好的测试用例包含什么&#xff1f;测试用例的编写思路总结 什么是测试用例&#xff1f; 在这之前&#xff0c;思考一个问题&#xff0c;下面这个简单的QQ登录页面&#xff0c;一共又多少条…

关于运维·关于Zabbix监控平台的面试点

目录 引言&#xff1a;明人不说暗话&#xff0c;今天分享几个在面试的时候常被问到关于Zabbix监控平台的面试点 1、zabbix的优点 2、zabbix的缺点 3、zabbix的监控模式 4、zabbix自定义监控怎么做 5、zabbix的自动发现功能 6、zabbix分布式监控有什么特点 引言&#xff1…

专业130+总分380+哈尔滨工程大学810信号与系统考研经验水声电子信息与通信

今年专业课810信号与系统130&#xff0c;总分380顺利考上哈尔滨工程大学&#xff0c;一年的努力终于换来最后的录取&#xff0c;期中复习有得有失&#xff0c;以下总结一下自己的复习经历&#xff0c;希望对大家有帮助&#xff0c;天道酬勤&#xff0c;加油&#xff01;专业课&…

入门设计者不容错过!5款网页原型设计工具推荐!

即时设计 即时设计是一种支持团队合作的原型设计工具&#xff0c;不限于设备和人群的使用&#xff0c;浏览器可以打开和使用。在即时设计中&#xff0c;您可以从0到1创建一个Web页面原型&#xff0c;具有钢笔、矩形、矢量编辑、轮廓、文本、色彩填充等设计功能&#xff0c;足以…