往期回顾

在上一期的《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. Mysql数据库优化之SQL及索引优化

    1. 如何发现有问题的SQL?  使用mysql慢查询日志对有效率问题的Sql进行监视 (1) show  variables like 'slow_query_log';     查看慢查询日志是否 ...

  2. websocket 二合一

    server from flask import Flask, request, render_template from geventwebsocket.handler import WebSock ...

  3. web服务器集群（多台web服务器）后session如何同步和共享

    在访问量上去以后,很多人会采用web集群的方式在满足逐渐增长的用户量.这时候就不得不面对一个问题,那就是在多个服务器下,每次请求都会因为负载均衡而分配到不同的服务器上.用户在登录服务器后,下一次请求被 ...

  4. Dart - Isolate 并发

    在Dart中实现并发可以用Isolate,它是类似于线程(thread)但不共享内存的独立运行的worker,是一个独立的Dart程序执行环境.其实默认环境就是一个main isolate. 在Dar ...

  5. java基础hashmap

    Iterator中hasNext(), next() 在Iterator类中,我们经常用到两个方法: hasNext(), next(),具体含义: next(),  是返回当前元素, 并指向下一个元 ...

  6. 学习requests_html

    一.获取页面上的所有链接. from requests_html import HTMLSession session=HTMLSession() r=session.get('https://new ...

  7. 【Core】.NET Core中读取App.config配置文件

    1.项目中添加App.config文件 因为.NET Core的项目本质是控制台应用,所以ConfigurationManager的API会去默认读取app.config配置文件,而不是web.con ...

  8. EF Core

    一个事务中    先在数据库查出一条数据进行修改      然后在进行查询  他会直接在内存中找到这条数据  不会再数据库查询了 EF Core的 linq语句中可以使用C#方法或函数   在EF6或 ...

  9. SSH 远程登陆

    2019-03-10 20:41:39 一.什么是SSH 简单说,SSH是一种网络协议,用于计算机之间的加密登录. 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登 ...

  10. 亲自打造Deferred对象

    经过对比之后,决心学习jQuery,自己打造一个Deferred对象.var util = require('./util.js');function Callbacks() { var list = ...