往期回顾

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

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

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

文档对象模型（DOM）

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

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

Document

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

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/techs/dom#w3c_all

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

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

JavaScript的组成 | DOM/BOM的更多相关文章

  1. 理清javascript的相关概念 DOM和BOM

    javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...

  2. JavaScript（核心、BOM、DOM）

    http://www.flyne.org/article/407 JavaScript(核心.BOM.DOM) JavaScript是基于对象和事件驱动的客户端脚本语言.有如下特点: 交互性 安全性( ...

  3. javaScript之DOM,BOM

    javaScript之BOM / DOM: BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ...

  4. 什么是BOM?,什么是DOM? BOM跟DOM之间的关系

    什么是BOM? BOM是browser object model的缩写,简称浏览器对象模型.是用来获取或设置浏览器的属性.行为,例如:新建窗口.获取屏幕分辨率.浏览器版本号等. 比如 alert(); ...

  5. JavaScript大杂烩9 - 理解BOM

    毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript ...

  6. js初级DOM&BOM知识点总结

    第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...

  7. Javascript学习，DOM对象，方法的使用

    JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...

  8. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  9. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

随机推荐

  1. SpringMvc HandlerMethodResolver 的 handlerMethods & ServletHandlerMethodResolver 的 mappings 在哪里初始化的 ？

    HandlerMethodResolver 的 handlerMethods & ServletHandlerMethodResolver 的 mappings 在哪里初始化的 ? 如下图:

  2. 事件冒泡以及onmouseenter 和 onmouseover 的不同

    1. onmouseenter onmouseenter 事件在鼠标指针移动到元素上时触发. 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发. onmouseent ...

  3. 5、Spring-Kafka3

    3. Introduction This first part of the reference documentation is a high-level overview of Spring fo ...

  4. P2053 [SCOI2007]修车（费用流）

    P2053 [SCOI2007]修车 顾客平均等待的最小时间$=$等待总时间$/n$ 考虑只有1个技术人员时,$n$辆车等待总时间 $A_1+(A_1+A_2)+(A_1+A_2+A_3)+...+\ ...

  5. Docker Weave 介绍 or 工作原理

    Docker Weave Network Weave Network:属于第三方网络项目. Weave在Docker主机之间实现Overlay网络,使用业界标准VXLAN封装,基于UDP传输,也可以加 ...

  6. Python Redis string

    String操作,redis中的String在在内存中按照一个name对应一个value来存储.如图: set(name, value, ex=None, px=None, nx=False, xx= ...

  7. 【题解】JSOIWC2019 Round 5

    题面: 题解: T1: 算法1: 枚举每个灯塔的方向,并分别判断是否有解.时间复杂度O(K*4^K). 预计得分:50-70分 算法2: 不难发现,当k≥4的时候一定有解,将最靠左的两个下面的朝右上. ...

  8. 大项目小细节---onbeforeunload增强用户体验

    微信公众平台编辑数据页面,点击浏览器回退按钮.刷新按钮(包括F5.Ctrl+R).关闭页面.点击其他超链接等操作的时候,会提示弹窗提示. 为增加用户体验,我们也增加类似功能. 代码如下: @if (R ...

  9. variable 'o' used without having been completely initialized Compiling Vertex program

    variable 'o' used without having been completely initialized Compiling Vertex program   v2f vert (ap ...

  10. Angular 学习笔记 (久久没有写 angular 常会忘记的小细节)

    由于经常跑去写后端, 而且一些就几个月...很多 ng 的东西就忘掉了. 写在这里方便复习呗. 1. async pipe 没有 resolve 前返回的值是 null 2 view componen ...