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

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

itomcoil 2025-02-28 16:08 15 浏览

上一节我们说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标准化。

相关推荐

selenium(WEB自动化工具)

定义解释Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中,就像真正的用户在操作一样。支持的浏览器包括IE(7,8,9,10,11),MozillaF...

开发利器丨如何使用ELK设计微服务中的日志收集方案?

【摘要】微服务各个组件的相关实践会涉及到工具,本文将会介绍微服务日常开发的一些利器,这些工具帮助我们构建更加健壮的微服务系统,并帮助排查解决微服务系统中的问题与性能瓶颈等。我们将重点介绍微服务架构中...

高并发系统设计:应对每秒数万QPS的架构策略

当面试官问及"如何应对每秒几万QPS(QueriesPerSecond)"时,大概率是想知道你对高并发系统设计的理解有多少。本文将深入探讨从基础设施到应用层面的解决方案。01、理解...

2025 年每个 JavaScript 开发者都应该了解的功能

大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发。1.Iteratorhelpers开发者...

JavaScript Array 对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0,第二个索引值为1,以此类推。更多有...

Gemini 2.5编程全球霸榜,谷歌重回AI王座,神秘模型曝光,奥特曼迎战

刚刚,Gemini2.5Pro编程登顶,6美元性价比碾压Claude3.7Sonnet。不仅如此,谷歌还暗藏着更强的编程模型Dragontail,这次是要彻底翻盘了。谷歌,彻底打了一场漂亮的翻...

动力节点最新JavaScript教程(高级篇),深入学习JavaScript

JavaScript是一种运行在浏览器中的解释型编程语言,它的解释器被称为JavaScript引擎,是浏览器的一部分,JavaScript广泛用于浏览器客户端编程,通常JavaScript脚本是通过嵌...

一文看懂Kiro,其 Spec工作流秒杀Cursor,可移植至Claude Code

当Cursor的“即兴编程”开始拖累项目质量,AWS新晋IDEKiro以Spec工作流打出“先规范后编码”的系统工程思维:需求-设计-任务三件套一次生成,文档与代码同步落地,复杂项目不...

「晚安·好梦」努力只能及格,拼命才能优秀

欢迎光临,浏览之前点击上面的音乐放松一下心情吧!喜欢的话给小编一个关注呀!Effortscanonlypass,anddesperatelycanbeexcellent.努力只能及格...

JavaScript 中 some 与 every 方法的区别是什么?

大家好,很高兴又见面了,我是姜茶的编程笔记,我们一起学习前端相关领域技术,共同进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力在JavaScript中,Array.protot...

10个高效的Python爬虫框架,你用过几个?

小型爬虫需求,requests库+bs4库就能解决;大型爬虫数据,尤其涉及异步抓取、内容管理及后续扩展等功能时,就需要用到爬虫框架了。下面介绍了10个爬虫框架,大家可以学习使用!1.Scrapysc...

12个高效的Python爬虫框架,你用过几个?

实现爬虫技术的编程环境有很多种,Java、Python、C++等都可以用来爬虫。但很多人选择Python来写爬虫,为什么呢?因为Python确实很适合做爬虫,丰富的第三方库十分强大,简单几行代码便可实...

pip3 install pyspider报错问题解决

运行如下命令报错:>>>pip3installpyspider观察上面的报错问题,需要安装pycurl。是到这个网址:http://www.lfd.uci.edu/~gohlke...

PySpider框架的使用

PysiderPysider是一个国人用Python编写的、带有强大的WebUI的网络爬虫系统,它支持多种数据库、任务监控、项目管理、结果查看、URL去重等强大的功能。安装pip3inst...

「机器学习」神经网络的激活函数、并通过python实现激活函数

神经网络的激活函数、并通过python实现whatis激活函数感知机的网络结构如下:左图中,偏置b没有被画出来,如果要表示出b,可以像右图那样做。用数学式来表示感知机:上面这个数学式子可以被改写:...