说说JavaScript与DOM之间的关系

news2025/6/17 7:17:25

dom(文档对象模型)是JavaScript的一个组成部分,它为JavaScript提供处理网页内容的方法和接口;JavaScript对网页进行的所有操作都是通过DOM进行的。

完整的 JavaScript 是由以下三个部分组成:

  • 核心(ECMAScript):提供语言的语法和基本对象;

  • 文档对象模型(DOM):提供处理网页内容的方法和接口;

  • 浏览器对象模型(BOM):提供与浏览器进行交互的方法和接口。

 文档对象模型(DOM)

DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点(getElementById、childNodes、appendChild、 innerHTML)。

  DOM和JavaScript的关系

我们都知道JavaScript是一种编程语言,而.js文件是用JavaScript编写的代码,那么DOM在其中担任什么样的角色呢?

DOM不是一种编程语言,但如果没有DOM,JavaScript语言不会有任何网页操作。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

下面用一段代码更直观地显示JavaScript和DOM的区别,代码中被标为红色的部分就是DOM:

var Tags = document.getElementsByTagName("a");

for (var i = 0; i < Tags.length; i++) {
alert("Href of this a element is :" + Tags[i].href + "\n");
}

这样一来,哪些是核心JavaScript,哪些是DOM,各自起什么作用就可以一目了然。(此处不在对代码进行解释)。

因此,有这样一个近似的等式:

web或XML页面 = DOM +JS(脚本语言)

◼️ 小 结

js 即 JavaScript ,是一种网页脚本语言,可以在网页上实现一些动态效果。

DOM是Document Object Model的缩写,是文档对象模型的意思,是个模型,可以方便用javascript代码去操作;DOM这个模型具体说,就是把每个HTML文档都看作是由很多个对象组成树形结构,树根是document对象。

简单来说,DOM 是HTML文档结构,其实就是为了能让js操作html元素而制定的一个规范,dom 的根本就是 document 对象,改对象有很多属性和方法,例如创建节点、复制节点、移除节点、修改属性等。

◼️ 参考资料

DOM教程专栏 - DOM基础知识全解析

DOM 简介 | 深入了解DOM

JS和DOM之间的关系?_js和dom的关系

JS的DOM对象(JS的Document对象)----什么是DOM对象?


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

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

相关文章

elementui el-table在有summary-method时,table数据行将合计行遮挡住了

前端使用框架&#xff1a;elementUI 使用组件&#xff1a;el-table 在表格内添加合计了合计行&#xff0c;根据业务多次调用数据渲染画面后&#xff0c;偶然导致画面变成如下图所示&#xff0c;table的数据行将合计行遮挡住了&#xff0c;且这个现象有时候好用&#xff0c;有…

界面控件DevExpress .NET应用安全 Web API v23.1亮点:支持Swagger模式

DevExpress拥有.NET开发需要的所有平台控件&#xff0c;包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。 DevExpress 今年第一个重要版本v23.1日前已正式发布了&#xff0c;该版本拥有众多新产品和数十…

AI大模型的使用-深入使用LLMChain,给AI连上Google和计算器

今天涉及的内容如下&#xff0c;下面都会使用例子一一讲解使用&#xff0c; 1.1 utilities&#xff1a;langchain的python解析器 1.2 LLMMathChain&#xff1a;可以处理计算的链&#xff0c;内部用python解释器处理 1.3 LLMRequestsChain&#xff1a;通过一个 HTTP 请求来得…

Flink(java版)

watermark 时间语义和 watermark 注意:数据进入flink的时间&#xff1a;如果用这个作为时间语义就不存在问题&#xff0c;但是开发中往往会用处理时间 作为时间语义这里就需要考虑延时的问题。 如上图&#xff0c;数据从kafka中获取出来&#xff0c;从多个分区中获取&#xf…

DES和3DES等常见加解密的关键要素---安全行业基础篇3

DES和3DES DES和3DES是对称加密算法&#xff0c;其加密和解密的关键要素包括&#xff1a; 密钥&#xff1a;DES和3DES使用相同长度的密钥进行加密和解密。DES使用56位密钥&#xff0c;而3DES可以使用112位或168位密钥。密钥是保护数据安全的关键&#xff0c;必须保持机密并只…

港联证券:为什么人们买涨不买跌?

在股票市场中&#xff0c;有一个普遍的现象是人们倾向于买涨不买跌。即使在市场出现明显下跌趋势时&#xff0c;大部分投资者也会选择继续持有股票或者进行买入操作&#xff0c;而在股票呈现明显上涨趋势时&#xff0c;却有更多的人涌入市场追涨杀跌。究其原因&#xff0c;可能…

微信小程序+Springboot实现订阅消息推送 (demo)

1. 开通订阅消息 2. 选用模板 订阅消息 - 公共模板库 - 选用 3. 选择关键词 勾选关键词 - 最多勾选5个 - 显示例子 4. 我的模板 5. 订阅号开发者-文档: 发送订阅消息 | 微信开放文档 6. 依赖 <dependency><groupId>com.alibaba.fastjson2</groupId><art…

淘宝API接口解析,实现获得淘宝商品快递费用

要获取淘宝商品快递费用&#xff0c;需要使用淘宝的开放平台API接口。以下是一个基本的示例&#xff0c;解析并实现获取淘宝商品快递费用的API接口。 首先&#xff0c;你需要访问淘宝开放平台并注册一个开发者账号。注册完成后&#xff0c;你需要创建一个应用并获取到API的权限…

滑动窗口实例7(串联所有单词的子串)

题目&#xff1a; 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 words ["ab","cd","ef"]&#xff0c;…

iPhone勿扰模式如何设置?1分钟学会!

上班的时候手机信息一直“噔、噔、噔”的响&#xff0c;开了静音模式也没用&#xff0c;信息一来手机还是会一直震动&#xff0c;搞得我无法安心工作&#xff0c;还有什么方法可以将这些信息免打扰吗&#xff1f; iPhone手机有一个功能叫做【勿扰模式】&#xff0c;它能够帮助用…

多numa设备,如何看网卡插在哪个numa上

1.在Linux系统中&#xff0c;可以通过lstopo命令来查看系统的NUMA拓扑结构。这个命令通常随着hwloc包一起提供。 安装hwloc包&#xff1a;yum install hwloc 使用lstopo命令来显示系统的NUMA拓扑结构。 &#xff08;在bclinux安装后&#xff0c;只有lstopo-no-graphics命令&…

TSN协议解读系列 | (2) Qbv:车间里的求知路

时春季夜间&#xff0c;风清月朗&#xff0c;周期仿佛又轮转到了从前。一位不修篇幅的老头&#xff0c;牙还没刷&#xff0c;却已然歪头斜躺在床上&#xff0c;床边微亮的显示屏上隐约可见Victory的字样&#xff0c;不一会儿就熄了屏。 这正是我们今天的主人公&#xff0c;Qbv…

微服务-gateway跨域配置

文章目录 一、前言二、gateway跨域配置1、问题描述1.1、什么是跨域请求&#xff1f;1.1.1、同源策略1.1.2. 安全性考虑1.1.3. 跨域攻击 1.2、问题产生原因 2、解决方法2.1、修改配置文件2.2、配置类统一配置2.3、全局跨域拦截器 三、总结 一、前言 在SpringCloud项目中&#x…

C++ - 继承 一些 细节 - 组合 和 继承的区别

前言 本篇博客基于 C - 继承_chihiro1122的博客-CSDN博客 之上列出一些例子&#xff0c;如果有需要请看以上博客。 继承的例子 例1 上述例子应该选择 C。 首先不用说&#xff0c;p3肯定是指向 d 对象的开头的&#xff1b;p1 也是指向 d 对象的开头的&#xff1b;…

网站监控系统最佳实践之静态资源采样上报

作者 观测云 产品服务部门 深圳团队 朱端畅 背景说明 通过 RUM 采集前端数据时&#xff0c;若采集的数据过多&#xff0c;可能会导致占用过多的网络带宽以及其他资源。特别是刚进入首页加载数据时&#xff0c;可能会调用几十次甚至更多次 v1/write/rum?precisionms数据采集接…

spacy安装旧版本en_core_web_sm的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Navicat Premium 16.2.7 数据库管理教程

Navicat Premium 16.2.7是一款功能强大的数据库管理工具&#xff0c;支持多种数据库类型&#xff0c;包括MySQL、Oracle、SQL Server等。以下是使用Navicat Premium的基本步骤&#xff1a; 安装Navicat Premium软件。打开Navicat Premium&#xff0c;在主界面上选择“新建连接…

实现高效数据存储:OpenStack Swift与本地文件系统的完美对接

文章目录 Swift对接本地文件系统前言控制节点新增20G磁盘针对磁盘做分区&#xff08;2个&#xff09;针对磁盘格式化卸载原有的 Swift 虚拟设备创建两个目录并挂载更改权限创建builder创建ring再平衡测试配合glance对接swiftglance对接swift测试 Swift对接本地文件系统 前言 实…

OpenCV实战(31)——基于级联Haar特征的目标检测

OpenCV实战&#xff08;31&#xff09;——基于级联Haar特征的目标检测 0. 前言1. Haar 特征图像表示2. 基于级联 Haar 特征的二分类分类器3. 级联分类器算法流程4. 使用 Haar 级联检测器进行人脸检测5. 完整代码小结系列链接 0. 前言 在机器学习基础一节中&#xff0c;我们介…

【Linux】文件缓冲区

目录 一、缓冲区图解二、自定义实现文件操作函数三、强制刷新内核缓冲区&#xff08;fsync&#xff09; 提到文件缓冲区这个概念我们好像并不陌生&#xff0c;但是我们对于这个概念好像又是模糊的存在脑海中&#xff0c;之间我们在介绍c语言文件操作已经简单的提过这个概念&…