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

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

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

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

相关推荐

《Queendom》宣布冠军!女团MAMAMOO四人激动落泪

网易娱乐11月1日报道据台湾媒体报道,南韩女团竞争回归的生死斗《Queendom》昨(10/31)晚播出大决赛,并以直播方式进行,6组女团、女歌手皆演唱新歌,并加总前三轮的赛前赛、音源成绩与直播现场投...

正确复制、重写别人的代码,不算抄袭

我最近在一篇文章提到,工程师应该怎样避免使用大量的库、包以及其他依赖关系。我建议的另一种方案是,如果你没有达到重用第三方代码的阈值时,那么你就可以自己编写代码。在本文中,我将讨论一个在重用和从头开始编...

HTML DOM tr 对象_html event对象

tr对象tr对象代表了HTML表格的行。HTML文档中出现一个<tr>标签,就会创建一个tr对象。tr对象集合W3C:W3C标签。集合描述W3Ccells返回...

JS 打造动态表格_js如何动态改变表格内容

后台列表页最常见的需求:点击表头排序+一键全选。本文用原生js代码实现零依赖方案,涵盖DOM查询、排序算法、事件代理三大核心技能。效果速览一、核心思路事件入口:为每个<th>绑...

连肝7个晚上,总结了66条计算机网络的知识点

作者|哪吒来源|程序员小灰(ID:chengxuyuanxiaohui)计算机网络知识是面试常考的内容,在实际工作中经常涉及。最近,我总结了66条计算机网络相关的知识点。1、比较http0....

Vue 中 强制组件重新渲染的正确方法

作者:MichaelThiessen译者:前端小智来源:hackernoon有时候,依赖Vue响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据。或者,我们可能只想抛开当前的...

为什么100个前端只有1人能说清?浏览器重排/重绘深度解析

面试现场的"致命拷问""你的项目里做过哪些性能优化?能具体讲讲重排和重绘的区别吗?"作为面试官,我在秋招季连续面试过100多位前端候选人,这句提问几乎成了必考题。但令...

HTML DOM 介绍_dom4j html

HTMLDOM(文档对象模型)是一种基于文档的编程接口,它是HTML和XML文档的编程接口。它可以让开发人员通过JavaScript或其他脚本语言来访问和操作HTML和XML文档...

JavaScript 事件——“事件流和事件处理程序”的注意要点

事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而NetscapeCommunicator的事件流是事件捕获流。事件冒泡即事件开始时由最具体的元素接收,然后逐级向上传播到较为不...

探秘 Web 水印技术_水印制作网页

作者:fransli,腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用,对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印(盲水印)...

国外顶流网红为流量拍摄性侵女学生?仅被封杀三月,回归仍爆火

曾经的油管之王,顶流网红DavidDobrik复出了。一切似乎都跟他因和成员灌酒性侵女学生被骂到退网之前一样:住在950万美元的豪宅,开着20万美元的阿斯顿马丁,每条视频都有数百万观看...人们仿佛...

JavaScript 内存泄漏排查方法_js内存泄漏及解决方法

一、概述本文主要介绍了如何通过Devtools的Memory内存工具排查JavaScript内存泄漏问题。先介绍了一些相关概念,说明了Memory内存工具的使用方式,然后介绍了堆快照的...

外贸独立站,网站优化的具体内容_外贸独立站,网站优化的具体内容有哪些

Wordpress网站优化,是通过优化代码、数据库、缓存、CSS/JS等内容,提升网站加载速度、交互性和稳定性。网站加载速度,是Google搜索引擎的第一权重,也是SEO优化的前提。1.优化渲染阻塞。...

这8个CSS工具可以提升编程速度_css用什么编译器

下面为大家推荐的这8个CSS工具,有提供函数的,有提供类的,有提取代码的,还有收集CSS的统计数据的……请花费两分钟的时间看完这篇文章,或许你会找到意外的惊喜,并且为你的编程之路打开了一扇新的大门。1...

vue的理解-vue源码 历史 简介 核心特性 和jquery区别 和 react对比

一、从历史说起Web是WorldWideWeb的简称,中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页,可以欣...