JavaScript的组成 | DOM/BOM

时间 2019-11-06

标签 javascript 组成 dom bom 栏目 JavaScript 繁體版

原文原文链接

往期回顾html

在上一期的《JavaScript的组成 | 核心-ECMAScript前端

》☜里，咱们有说到JavaScript 是由三大部分组成，分别是：核心ECMAScript、文档对象模型-DOM、浏览器对象模型-BOM面试

那么本期就让咱们继续往下说说DOM、BOM这两大部分吧：浏览器

文档对象模型（DOM）cookie

面试官很喜欢问的：“你知道什么是文档对象模型吗？”，那今天咱们一个个来解释一下吧：框架

DOM：Document Object Model（文档对象模型）dom

Document学习

中文翻译：文档，这里的文档指的是XML和HTML的页面，当你建立一个页面而且加载到Web浏览器中，DOM就在幕后悄然而生，它会把你编写的网页文档转换成一个文档对象。spa

Object翻译

中文翻译：对象，学习js的同窗必定对“一切皆对象”这句话不会陌生；

在JavaScript语言的类型大体能够分为如下三种：

用户定义对象
自行建立的对象，例如：
```
var obj = {}
```
内置对象
内置在JavaScript中的对象，无需咱们建立，能够直接使用，例如：Array、Math和Data等
宿主对象
上期咱们知道了什么是宿主环境之后，应该对宿主对象是什么有了必定的了解，在这里咱们指的是浏览器提供的对象，例如:window、document。

DOM中主要关注的就是document，document对象的主要功能就是处理网页内容。

Model

中文翻译：模型，若是你把这个词从DOM中抽离出来，看下面的图片~是否是就很好理解。

打个比方，如图：是一套小区建筑模型，基本上任何售楼处都会有它的身影，买房的人只须要根据这套模型就能够了解建设完成后的小区长什么样子，有哪些公共设施，植被面积又有多少………

而DOM也像一个这样的模型，但它表明着加载到浏览器窗口的当前网页，咱们能够利用JavaScript对它进行读取。

有了模型以后，咱们一样须要能看懂模型（能够理解为我须要知道这个模型是干什么用的）；

若是没有看懂模型，那就像跟一个盲人说，太阳是会发光发热的，对于盲人来讲，他是没有这个概念的，由于他看不到太阳；

因此，虽然咱们能够经过JavaScript对DOM进行读取，可是咱们要必须先能看懂模型。

DOM把一份文档表示为一颗树，有一个主干支以及无数的分干支，其实我我的以为，更像是族谱。由于在描述标签之间关系的时候，咱们常常用“父级”、“子级”、“兄弟”这样的词来代表并列标签和嵌套标签。

例如如下图片：

具体代码以下：

<!DOCTYPE html> <html>

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>Hello World!</h1>

<p>欢迎观看本次文章，包含如下内容：</p>

<ul>

    <li>ECMAScript</li>

    <li>DOM</li>

    <li>BOM</li>

</ul>

</body>

</html>

咱们把上面的结构抽象成DOM树：

从上面的图，咱们能够清晰的看到根元素是html，下面有两个子元素，一个是head，另外一个是body，而head和body之间是兄弟关系，以此类推，用这样的方式咱们能够把页面中的全部元素都用模型抽象成一棵树。

因此，DOM简单来讲就是：一套对文档的内容进行抽象和概念化的方法，提供访问和操做网页内容的方法和接口。

DOM的级别

不要觉得只有ECMAScript有版本哦，DOM也是有不同级别的。

W3C官方网址：

https://www.w3.org/standards/...

DOM分为如下：

DOM0：没有归入标准，属于初级试验性质的，主要用途翻转图片、验证表单数据。
DOM1：1998年10月制定的标准，由两大部分组成：DOM核心和DOM HTML。
DOM2：扩展鼠标和用户界面事件、范围、遍历，增长了对 CSS支持。
DOM3：进一步扩展了DOM，新增了验证文档的方法，支持XML 1.0 规范。

Web 浏览器对 DOM 的支持

既然有级别，那么无可避免就要面对兼容问题，咱们来看一下各个版本浏览器支持状况：

图片来自《JavaScript高级程序设计》

其实DOM 并不仅是针对 JavaScript 的，不少别的语言也都实现了 DOM哦

浏览器对象模型（BOM）

BOM：Browser Object Model （浏览器对象模型）

提供与浏览器交互的方法和接口。

理解了DOM之后再来看BOM，就不须要这么细致的讲解啦。开发人员使用 BOM 能够控制浏览器显示的页面之外的部分，例如：获取当前浏览器版本这样的操做。

从根本上讲，BOM 只处理浏览器窗口和框架；但人们习惯上也把全部针对浏览器的 JavaScript 扩展算做 BOM 的一部分。下面就是一些这样的扩展：

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

BOM是没有标准的，所以每一个浏览器都有本身的实现。

可是又由于各大浏览器之间都有共同对象，因而这些对象就成了事实上的标准。

W3C把浏览器中 JavaScript 最基本的部分标准化，已经将 BOM 的主要方面归入了 HTML5 的规范中。

本期就到这里为止啦~你们先把概念了解清楚，学习起来会事半功倍哦~具体的DOM、BOM有哪些操做及方法，咱们后面再说哦~

下一期预告：使用JavaScript

若是你也在看红宝书，不妨在下方留言，一块儿交流讨论下学习心得哦

订阅号ID：Miaovclass

关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；