百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

2分钟理解JS与DOM、BOM、HTML5的关系

zhezhongyun 2025-02-06 17:06 16 浏览

上一节我们说JS主要由三部分组成:ES、DOM和BOM,接下来学生就给大家简单介绍一下他们。

ECMAScript

ECMAScript是什么

ES主要定义了基础的语法结构,以及一些内置对象。

语法就是进行沟通的规则,比如我们在代码中写“弹出提示框”,这样并不会弹出来,而写“alert()”就可以弹出来了,这就是因为ES的语法是那么规定的。对于一种编程语言来说通常都会规定定义变量、判断、循环、运算、语句集(比如函数)的定义及调用等规则,ES当然也不例外,也规定了这些内容。以前学生在单位的一次讲课中说:什么是程序,程序就是流程加顺序。虽然这种说法不够严谨,不过程序的核心应该还是流程。

ES是一种面向对象的语言,所以他的语法中还定义了很多对象相关的内容,比如最常见的this、prototype等,而且还定义了一些内置的对象,比如Number、String、Array、Math以及RegExp等。

ES的通用语法是很容易学习的,只要有点其他语言的基础,入手非常简单,这也就是一般都会觉得JS入门很容易的原因。不过ES中对象相关的语法就没那么容易了,这也是ES(或者JS)的重点和难点,学生会在后面重点进行讲解,让大家彻底掌握。

发展

ES所对应的ECMA-262标准从1997年发布的第一个版本一直到现在一共发布到了六个版本,第六版于今年(2015年)6月份刚刚发布,他的正式名称是ECMAScript 2015(简称ES2015),因为是第六版所以也有的地方叫他ECMAScript6,我们看到后知道他们是同一个东西就可以了。

ES2015中增加了很多新的特性,特别是启用了class关键字(不过并不是面向类的语言,学生会在ES2015相关章节中给大家详细分析),这样使用起来就更加方便了。不过ES的本质并没有发生变化,他依然是一种基于对象的语言,在理解了其本质之后无论哪个版本都可以非常容易地掌握,他们之间的区别无非就是一些具体语法和功能上的增强。学生后面将以现在最通用的ES5.1版为基础给大家进行讲解,最后再补充ES2015中新增的内容。

另外,我们要清楚ES只是一套标准,具体的实现还需要各个浏览器的支持,不同浏览器对ES的支持也不完全相同,而且在ES的基础上不同的浏览器也都进行了自己相应的扩充,这就造成了浏览器兼容性的问题。

DOM

我们前面说过,ES的标准化主要是为了解决各大浏览器厂商(特别是微软和网景公司)对脚本语言语法的实现不统一。不过他们在浏览器上的竞争并没有因为ES的出现而终止,微软为了占领更大的市场就在自己的Internet Explorer浏览器上加入了很多专有的属性,比如VBScript和ActiveX,而使用了这些技术的网页必须使用微软的平台和浏览器才可以正常显示,这就给开发者带来了麻烦,这时W3C的一些成员公司就提议创建一套标准将页面文档的结构暴露给脚本,从而使脚本可以统一操作页面的内容,这样最后就制定出了DOM标准。

DOM是Document Object Model的缩写,表示文档对象模型,他定义了文档对象的结构及其操作方法等内容。为什么叫对象模型呢?我们前面说过ES是一种面向对象的语言,他要操作的目标是对象,而DOM就是将html文档转换(或者对应)成ES可以操作的对象的一种模型。

DOM虽然是因为浏览器而制定的,但他现在不仅可以用在浏览器所用的Html文件中,而且还可以用到很多其他格式的文件中,比如服务端经常用来配置信息的XML文件、Flex的mxml文件以及表示矢量图的SVG格式文件等,这些都符合DOM标准。

另外,DOM主要是定义了文档(可以理解为符合相应格式的页面文件)和文档对象以及其操作方法的对应关系,而跟具体的语言无关,所以DOM不仅适用于ES,还适用于很多别的语言,比如Java中的dom4j也是DOM的一种实现。而且DOM中规定操作文档的方法都是通过接口定义的,这样不同的语言就可以按照自己的语法来进行实现了。

BOM

JS的功能并不仅限于对文档的操作,有时候还需要对浏览器直接进行操作,比如查看当前页面的url地址、控制浏览器前进、后退、以及HTML5中获取位置信息、WebSocket等都需要对浏览器进行操作,而且最简单的alert、setTimeout和setInterval也是需要浏览器来完成的。

ES对浏览器操作的处理方法和对文档操作的处理方法一样,依然是将浏览器转换为一个对象,这就是浏览器对象(Browser Object),他所对应的模型就叫浏览器对象模型(Browser Object Mode),简称BOM。

HTML5

Html5是近两年非常热的一个名词,到底什么是Html5呢?

从名字就可以看出来他是和网页相关的一个东西,而网页的三大组成部分依然是文档结构、展示和动作控制,他们所对应的技术分别是html、css和JS,前两者都属于DOM中的内容(CSS作为文档的一种特殊节点或者属性,也属于DOM的一部分,而且DOM中有专门的相关标准),JS可以对DOM进行操作。

Html5的主要贡献就是扩展了html的标签(同时也去掉了一些原先的标签),比如新增了section、article、header、footer、audio、video以及备受关注的canvas标签,当然也相应地扩展了DOM,另外Html5也对BOM进行了扩展,使得JS操作浏览器的功能更加强大,而且也促进了BOM标准化。

相关推荐

JPA实体类注解,看这篇就全会了

基本注解@Entity标注于实体类声明语句之前,指出该Java类为实体类,将映射到指定的数据库表。name(可选):实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

Dify教程02 - Dify+Deepseek零代码赋能,普通人也能开发AI应用

开始今天的教程之前,先解决昨天遇到的一个问题,docker安装Dify的时候有个报错,进入Dify面板的时候会出现“InternalServerError”的提示,log日志报错:S3_USE_A...

用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

在人体姿态估计领域,传统方法通常将关键点作为基本处理单元,这些关键点在人体骨架结构上代表关节位置(如肘部、膝盖和头部)的空间坐标。现有模型对这些关键点的预测主要采用两种范式:直接通过坐标回归或间接通过...

B 客户端流RPC (clientstream Client Stream)

客户端编写一系列消息并将其发送到服务器,同样使用提供的流。一旦客户端写完消息,它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中,客户端会发送多个请...

我的模型我做主02——训练自己的大模型:简易入门指南

模型训练往往需要较高的配置,为了满足友友们的好奇心,这里我们不要内存,不要gpu,用最简单的方式,让大家感受一下什么是模型训练。基于你的硬件配置,我们可以设计一个完全在CPU上运行的简易模型训练方案。...

开源项目MessageNest打造个性化消息推送平台多种通知方式

今天介绍一个开源项目,MessageNest-可以打造个性化消息推送平台,整合邮件、钉钉、企业微信等多种通知方式。定制你的消息,让通知方式更灵活多样。开源地址:https://github.c...

使用投机规则API加快页面加载速度

当今的网络用户要求快速导航,从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口(SpeculationRulesAPI)的出现改变了网络应用程序接口(WebAPI)领域的游戏规则。...

JSONP安全攻防技术

关于JSONPJSONP全称是JSONwithPadding,是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签,远程调用JSON文件来实现数据传递。如果...

大数据Doris(六):编译 Doris遇到的问题

编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

网页内嵌PDF获取的办法

最近女王大人为了通过某认证考试,交了2000RMB,官方居然没有给线下教材资料,直接给的是在线教材,教材是PDF的但是是内嵌在网页内,可惜却没有给具体的PDF地址,无法下载,看到女王大人一点点的截图保...

印度女孩被邻居家客人性骚扰,父亲上门警告,反被围殴致死

微信的规则进行了调整希望大家看完故事多点“在看”,喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人,应该...

下周重要财经数据日程一览 (1229-0103)

下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是,下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机(安卓,iPhone)同步日历功能的朋友请点击此链接,数据公布...

PyTorch 深度学习实战(38):注意力机制全面解析

在上一篇文章中,我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程,从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

聊聊Spring AI的EmbeddingModel

序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

前端分享-少年了解过iframe么

iframe就像是HTML的「内嵌画布」,允许在页面中加载独立网页,如同在画布上叠加另一幅动态画卷。核心特性包括:独立上下文:每个iframe都拥有独立的DOM/CSS/JS环境(类似浏...