往期回顾

在上一期的《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. 使用quartz数据库锁实现定时任务的分布式部署

    ,1.根据项目引用的quartz依赖版本,确定下载的quartz-distribution安装包,我项目引用的信息如下图所示: 2.解压,在\quartz-2.2.3-distribution\qua ...

  2. SpringMvc HandlerMappings 何时初始化？

    SpringMvc 的转发控制器 DispatcherServlet 执行 initStrategies(),在什么时候初始化 HandlerMappings ? 在容器 AbstractApplic ...

  3. api测试工具

    在线接口测试 http://www.36nu.com/apiTest 使用Fiddler测试WebApi接口 https://www.cnblogs.com/weixing/p/5254836.htm ...

  4. 【题解】Luogu P3931 SAC E#1 - 一道难题 Tree

    原题传送门 题目几乎告诉你要用最大流 先进行搜索,将树的叶子节点都连到一个虚拟点T上,流量为inf(这样不会干扰到前面部分的最大流) 其他边按树的形态连边,以根节点为S,跑一变最大流即可求出答案 #i ...

  5. Windows server 2016安装Docker EE

    Windows server 2016安装Docker EE 下载 windows server 2016 180天评估版本. 地址:https://www.microsoft.com/en-us/e ...

  6. ES5的完美继承

    // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = functio ...

  7. 如何插入谷歌地图并获取javascript api 秘钥--Google Maps API error: MissingKeyMapError

    参考:https://blog.csdn.net/klsstt/article/details/51744866 Google Maps API error: MissingKeyMapError h ...

  8. kafka生产者

    1.kafka生产者是线程安全的,她允许多个线程共享一个kafka实例 2.kafka管理一个简单的后台线程,所有的IO操作以及与每个broker的tcp连接通信,如果没有正确的关闭生产者可能会造成资 ...

  9. windows10安装MongoDB服务启动不了 😀✅已解决！

    WIndows的服务中,有一个服务需要以NT  AUTHORITY\NetworkService用户启动,但怎么也启动不起来,使用本地系统帐户启动没有任何问题,但是换成NetworkService就启 ...

  10. JavaScript中的label语句，及应用

    label语句:可以在代码中添加标签,以便将来使用. 语法:label : statement 示例: start: for(var i=0;i<10;i++){ console.log(i); ...