BOM与DOM

BOM 与 DOM

前言：我们都知道 javascript 有三部分组成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。BOM 和 DOM 都属于js的组成部分，那么，BOM 和 DOM 之间有什么区别呢？接下来本篇文章将给大家介绍js中 BOM 和 DOM 之间的区别。

本文在撰写前参考了B站黑马程序员和知乎@散修杂技

一、DOM

1、DOM 是什么

• DOM：文档对象模型（Document Object Model），是W3C定义的一套用于处理HTML和XML文档内容的标准编程接口API。javascript实现DOM接口的对象对应的是document对象，JS通过该对象来对HTML/XML文档进行增删改查。
• DOM定义了HTML和XML的逻辑结构，将整个页面划分成由层次节点构成的文档，以树的形式来展现。
• 在BOM和DOM结构层次图中，document对象属于window对象，所以DOM也可以看作是BOM的一部分。

总结：DOM 是浏览器提供的一套专门用来操作网页内容的功能。DOM 的作用是开发网页内容特效和实现用户交互

2、DOM 树

DOM树是什么

• 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
• 表述网页内容关系的名词
• 作用：文档树直观的体现了标签与标签之间的关系

​

3、DOM对象（重要）

DOM 对象：浏览器根据 HTML 标签生成的 JS 对象

• 所有的标签属性都可以在这个对象上找到
• 修改这个对象的属性会自动映射到标签身上

DOM 的核心思想

• 把网页内容当作对象来处理

document 对象

• 是 DOM 里提供的一个对象

• 所以它提供的属性和方法都是用来访问和操作网页内容的

  例：document.write()

• 网页所有内容都在 document 里面

4、 DOM 对象的操作

以后更新

二、BOM

• BOM：浏览器对象模型(Brower Object Model)，是用于操作浏览器而出现的API，BOM对象则是Javascript对BOM接口的实现。用白话文来说就是浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。所以 BOM 就是为了解决这些事情出现的接口。BOM提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。通过BOM对象可以访问浏览器功能部件和属性。

• BOM对象由多个对象构成，其中代表浏览器窗口的window对象是Javascript顶层对象，其他BOM对象均为window对象的子对象。被作为window对象的属性来引用。
• window 对象下包含了 navigator、location、document、history、screen 5个属性
• 注：依附于 window 对象的所有属性和方法，使用时可以省略 window

BOM对象最根本的是window。

三、BOM 和 DOM 的关系

1. DOM 与 JavaScript 的关系
   • HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用
   • DOM对象即是我们用javascript实现DOM接口获得的对象。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容
   • dom是有W3C（万维网联盟）定义的一种规范，这种规范被很多浏览器厂商支持，但是要注意的是他并不是JavaScript语言，虽然他可以在JavaScript中可以被直接使用（主要是将其封装成了JavaScript支持的形式才导致的）
   • 因此有这样一个近似的等式：web或XML页面 = DOM +JS(脚本语言)

2、 BOM 和 DOM 的关系

document是DOM的核心对象，window则是BOM的核心对象，而又有：

console.log(window.document === document); //true

因为document是DOM的根节点，而以上代码又表明：document在window对象中是作为其一个属性而存在的，因此从这个角度来说，BOM包含了DOM。

浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

与此类似，你还可以验证如下代码：

console.log(window.location === location); //true

console.log(window.navigator === navigator); //true

console.log(window.screen === screen); //true

console.log(window.history === history); //true

console.log(window.window === window); //true

location navigator screen history和window一样，都是BOM提供的对象，只不过它们和document对象一样，都同时以属性的形式存在于window中

四、BOM 和 DOM 的区别

• DOM 是为了操作文档出现的 API，DOM对象最根本的是document（实际上是window.document）
• BOM 是为了操作浏览器出现的 API，BOM对象最根本的是window
• BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作

下面用一幅图来作说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ftLlG1tH-1659857222892)(https://typora-ac999.oss-cn-shanghai.aliyuncs.com/v2-4680d272a59cd5d68bf44f2b2e2a1b26_r%20(1)].jpg)

归 DOM 管的：

E区（就是你说的document啦。由web开发人员呕心沥血写出来的一个文件夹，里面有index.html，CSS和JS什么鬼的，部署在服务器上，我们可以通过浏览器的地址栏输入URL然后回车将这个document加载到本地，浏览，右键查看源代码等

归 BOM 管的

A区（浏览器的标签页，地址栏，搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等等）

B区（浏览器的右键菜单）

C区（document加载时的状态栏，显示http状态码等）

D区（滚动条scroll bar）

五、BOM 和 DOM 对象的详细介绍

1. window对象 ——BOM核心

   • 是BOM对象的核心，JS的顶层对象，浏览器窗口只要打开一个HTML文档，浏览器就会为我们创建一个window对象。它表示整个浏览器窗口，主要用来操作浏览器窗口。

   • window对象是JS中的全局对象，可以在任何地方调用， 我们在页面上写的元素，js函数，全局变量都属于window对象，都可以 用window对象来调用.

   • 全局变量是 window 对象的属性。

   • 全局函数是 window 对象的方法。

   • 在使用window对象的属性和方法时，可以用window.属性、window.方法()或者直接属性、方法()的方式调用。就是可以省略window这个前缀。

   • 简写案例：window.alert() ，可以直接用alert()，它俩是一个意思. window.document.write(),可以简写成document.write()

2. document对象——DOM核心

   • document对象是window的一个属性（BOM包含了DOM）

   • **window.**document对象在编写时可以不使用 window 这个前缀.

   • 可以用来处理页面文档，方法很多

   • Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

   • 示例 ：document.getElementById()；

3. frame对象

   • frames对象是浏览器窗口中的框架对象数组 。
   • 除了status,defaultStatus,name属性外,它拥有window对象的全部属性.
   • 属性 frames.length存放数组 frames[] 中含有的元素个数。

4. screen对象

   • Screen对象是window对象的属性，**window.**Screen对象在编写时可不使用 window 这个前缀，
   • Screen 对象包含有关客户端显示屏幕的信息
   • 主要用来获取用户的屏幕信息，并作出优化

   height: 获取整个屏幕的高。

   width : 获取整个屏幕的宽。

   availHeight: 整个屏幕的高减去系统部件的高（ 可用的屏幕宽度 ）

   availWidth : 整个屏幕的宽减去系统部件的宽（可用的屏幕高度 ）

5. history对象

   • history对象是window对象的属性,window.history对象在编写时可不使用 window 这个前缀。
   • History 对象包含用户（在浏览器窗口中）访问过的 URL
   • 主要实现前进后退等功能

   back() 返回上一页。

   forward() 返回下一页。

   go(“参数”) -1表示上一页，1表示下一页。

6. navigator对象

   • navigator对象是window对象的属性,window.navigator 对象在编写时可不使用 window 这个前缀。
   • 包含了一系列浏览器信息的属性 userAgent是最常用的属性，用来完成浏览器判断。

7. location对象

   • location对象是window对象的属性，window.location 对象在编写时可不使用 window 这个前缀，
   • 用来分析和设置页面的URL地址
   • Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。
   • 常用于对URL进行访问。

下面放两张思维导图

1. DOM 基本操作思维导图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2EwOl0on-1659857222892)(https://typora-ac999.oss-cn-shanghai.aliyuncs.com/v2-517780104e7410b094f00ff577615ec7_1440w%20(1)].jpg)

2. window 对象思维导图

ion 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。

• 常用于对URL进行访问。

下面放两张思维导图

1. DOM 基本操作思维导图
   

2. window 对象思维导图