往期回顾

在上一期的《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. 使用fastdfs搭建文件服务器

    一:安装tracker 1. 拷贝安装目录下各个.gz文件到/usr/local/src下,解压各个install lib,例如tar zxvf xxx.tar.gz 2. 先安装libfastcom ...

  2. java输入输出流（I/O）总结

    io流的 四个基本类 java.io包中包含了流式I/O所需要的所有类.在java.io包中有四个基本类:InputStream.OutputStream及Reader.Writer类,它们分别处理字 ...

  3. Linux中安装Python2.7

    原文地址:http://www.jianshu.com/p/6425d18d3e47   安装依赖的库 yum -y install python-devel openssl openssl-deve ...

  4. js 比大小

    html部分 <input type="button" onclick="mymax(5,4,12)" value="按钮"/> ...

  5. Vue 组件&组件之间的通信 之组件的介绍

    什么是组件? 组件Component,可扩展HTML元素,封装可重用的代码.通俗的来说,组件将可重用的HTML元素封装成为标签方便复用: 组件的使用: 1.使用全局的方法Vue.extend创建构造器 ...

  6. 【题解】Luogu P2153 [SDOI2009]晨跑

    原题传送门 一眼应该就能看出是费用流 因为每个交叉路口只能通过一次,所以我们进行拆点,连一条流量为1费用为0的边 再按照题目给的边(是单向边)建图 跑一下MCMF就行了 拆点很套路的~ #includ ...

  7. 剑指offer（32）把数组排成最小的数

    题目描述 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 题目分析 主 ...

  8. Excel 表格查找重复数据，去重复统计

    找出表格是否有重复数据: =IF(AND(G20=G19,D20=D19),"是","否") 筛选移除[重复的数据]然后开始统计 =SUBTOTAL(9,E2: ...

  9. win8外包公司——技术分享：参数传递

    页面之间传递参数 windows phone 的参数传递和web 差不多.用“?”号传递 多个参数的时候用 “&”做分隔. 我接着昨天的项目继续添加一个FourPage.xaml 在昨天的Th ...

  10. python获取当前文件路径以及父文件路径

    #当前文件的路径 pwd = os.getcwd() #当前文件的父路径 father_path=os.path.abspath(os.path.dirname(pwd)+os.path.sep+&q ...