第一章-JavaScript简介

JavaScript实现

虽然JavaScript和ECMAScript通常都被人们用来表达相同的含义,但JavaScript的含义却比ECMA-262中规定的要多得多。

一个完整的JavaScript实现应该包含以下三个部分

  • ECMAScript(核心)
  • DOM(文档对象模型)
  • BOM(浏览器对象模型)

ECMAScript

由ECMA-262定义的ECMAScript和Web浏览器没有任何依赖关系。实际上,这门语言本身并不包含输入和输出的定义。

常见的web浏览器只是ECMAScript实现可能的宿主环境之一。

宿主环境不仅仅提供基本的ECMAScript实现,同时还提供该语言的扩展,以便于语言与环境之间的对接和交互。而这些扩展,包括DOM,则利用ECMAScript的核心类型和语法提供更多更具体的功能,以便实现针对环境的操作。其他宿主环境包括Node和Adobe Flash。

ECMA-262规定了语言的组成部分包括语法、类型、语句、关键字、保留字、操作符、对象。

ECMAScript就是对实现该标准规定的各个方面内容的语言的描述。

DOM(文档对象模型)

DOM是针对与XML但经过扩展用于HTML的应用程序编程接口(Application Programming Interface)

DOM把整个页面映射成一个多层节点结构,DOM树

HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。

html 复制代码
        <html>
            <head>
                <title>Sample Page</title>
            </head>
            <body>
                <p>Hello World! </p>
            </body>
        </html>

这就是DOM中的一个分层节点图

通过DOM创建的这个树形图,开发者就获得了控制页面内容和结构的主动权。借助DOM提供的API,可以进行一系列的操作。

为什么用DOM?

由于历史原因,Netscape和微软开发方面各持己见,对于开发人员来说,无法做到只编写一个HTML页面来实现跨平台。

DOM级别

DOM1级由:DOM核心和DOM HTML组成

DOM核心(DOM CORE)规定的是如何映射 基于XML的文档结构,以便简化对文档中任意部分的访问和操作

DOM HTML模块则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法。

如果说DOM1级的目标主要是映射文档的结构,那么DOM2级的目标就要宽泛多了。DOM2级在原来DOM的基础上又扩充了(DHTML一直都支持的)鼠标和用户界面事件、范围、遍历(迭代DOM文档的方法)等细分模块,而且通过对象接口增加了对CSS(Cascading Style Sheets,层叠样式表)的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。

DOM2级引入新的模块,给出了众多类型和接口的定义

DOM视图(DOM Views):定义了跟踪不同文档

DOM事件(DOM Events):定义了事件和事件处理的接口

DOM样式(DOM Style):定义了基于CSS为元素应用样式的接口

DOM遍历和范围(DOM Traversal and Range):定义了遍历操作文档树的接口

DOM3级别进一步拓展了DOM,引入以统计方式加载和保存文档的方法,在DOM中加载和保存(DOM Load and Save)模块中定义:新增了验证文档的方法,在DOM验证(DOM Validation)模块中定义。DOM3级对象DOM CORE 进行了拓展,开始支持XML1.0规范

其他DOM标准

除了DOM核心和DOM HTML接口之外,另外几种语言还发布了只针对自己的DOM标准

WEB浏览器对于DOM的支持

在DOM标准出现了一段时间之后,Web浏览器才开始实现它。微软在IE5中首次尝试实现DOM,但直到IE5.5才算是真正支持DOM1级。在随后的IE6和IE7中,微软都没有引入新的DOM功能,而到了IE8才对以前DOM实现中的bug进行了修复。

BOM(浏览器对象模型)

Internet Explorer 3和Netscape Navigator 3有一个共同的特色,那就是支持可以访问和操作浏览器窗口的浏览器对象模型(BOM, Browser Object Model)。开发人员使用BOM可以控制浏览器显示的页面以外的部分

而BOM真正与众不同的地方(也是经常会导致问题的地方),还是它作为JavaScript实现的一部分但却没有相关的标准。这个问题在HTML5中得到了解决,HTML5致力于把很多BOM功能写入正式规范

从根本上来说,BOM只处理**浏览器窗口和框架。**但是人们习惯把所有针对浏览器的JavaScript扩展当作是BOM的一部分。

扩展:

  • 弹出新浏览器窗口的功能
  • 移动、缩放和关闭浏览器窗口的功能
  • 提供浏览器详细信息的navigator对象
  • 提供浏览器所加载页面的详细信息的location对象
  • 提供用户显示器分辨率详细信息的screen对象
  • 对cookies的支持
  • 像XMLHttpRequest和IE的ActiveXObject这样的自定义对象

由于没有BOM标准可以遵循,因此每个浏览器都有自己的实现。虽然也存在一些事实标准,例如要有window对象和navigator对象等,但每个浏览器都会为这两个对象乃至其他对象定义自己的属性和方法。

小结

JavaScript是一种专门为与网页交互而设计的脚本语言,由三个部分组成:

  • ECMAScript,由ECMA-262定义,提供核心语言功能
  • 文档对象模型(DOM),提供访问和操作网页内容的方法和接口
  • 浏览器对象模型(BOM),提供与浏览器交互的方法和接口
相关推荐
Ajiang282473530422 分钟前
对于C++中stack和queue的认识以及priority_queue的模拟实现
开发语言·c++
ggdpzhk23 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
幽兰的天空27 分钟前
Python 中的模式匹配:深入了解 match 语句
开发语言·python
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10223 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js