搬运于：散修杂记

一、 什么是DOM？


1、DOM，文档对象模型（Document Object Model）。
2、DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。
W3C DOM由以下三部分组成：

  • 核心DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

简单的说，DOM是一种理念，一种思想，一个与系统平台和编程语言无关的接口，一种方法使 Web开发人员可以访问HTML元素！记住，它是一种理念，不是具体方法。


二、DOM作用


在W3C的标准中，DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。


三、 DOM树的结构


DOM和BOM是什么？有什么作用？ - 图1

DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，

在DOM中，HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档，树的每个子节点表示HTML文档中的不同内容。
每个载入浏览器的 HTML 文档都会成为 Document 对象,Document是探索DOM的入口,利用全局变量document可以访问Document对象

四、DOM的发展－DOM0、DOM1、DOM2、DOM3的区别


DOM0
JavaScript在早期版本中提供了查询和操作Web文档的内容API（如：图像和表单），在JavaScript中定义了定义了’images’、’forms’等，因此我们可以像下这样访问第一张图片或名为“user”的表单：

document.images[0] document.forms['user']

这实际上是未形成标准的试验性质的初级阶段的DOM，现在习惯上被称为DOM0，即：第0级DOM。由于DOM0在W3C进行标准备化之前出现，还处于未形成标准的初期阶段，这时Netscape和Microsoft各自推出自己的第四代浏览器，自此DOM遍开始出各种问题。
DOM0与DHTML
Netscape Navigator 4和IE4分别发布于1997年的6月和10月，这两种浏览器都大幅扩展了DOM，使JavaScript的功能大大增加，而此时也开始出现一个新名词：DHTML。
DHTML是Dynamic HTML（动态HTML）的简称。DHTML并不是一项新技术，而是将HTML、CSS、JavaScript技术组合的一种描述。即：

  • 利用HTML把网页标记为各种元素
  • 利用CSS设置元素样式及其显示位置
  • 利用JavaScript操控页面元素和样式

利用DHTML，看起来可以很容易的控制页面元素，并实现一此原本很复杂的效果（如：通过改变元素位置实现动画）。但事实并非如此，因为没有规范和标准，两种浏览器对相同功能的实现确完全不一样。为了保持程序的兼容性，程序员必须写一些探查代码以检测JavaScript是运行于哪种浏览器之下，并提供与之对应的脚本。JavaScript陷入了前所未有的混乱，DHTML也因此在人们心中留下了很差的印象。
DOM1的出现
在浏览器厂商进行浏览器大站的同时，W3C结合大家的优点推出了一个标准化的DOM，并于1998年10月完成了第一级 DOM，即：DOM1。W3C将DOM定义为一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。
DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中，DOM由两个模块组成：DOM Core（DOM核心）和DOM HTML。其中，DOM Core规定了基于XML的文档结构标准，通过这个标准简化了对文档中任意部分的访问和操作。DOM HTML则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法，如：JavaScript中的Document对象
DOM2与DOM3
在DOM1的基础上DOM2和DOM3引入了更多的交互能力，也支持了更高级的XML特性。DOM2和DOM3将DOM分为更多具有联系的模块。DOM2级在原来DOM的基础上又扩充了鼠标、用户界面事件、范围、遍历等细分模块，而且通过对象接口增加了对CSS的支持。DOM1级中的DOM核心模块也经过扩展开始支持XML命名空间。在DOM2中引入了下列模块，在模块包含了众多新类型和新接口：

  • DOM视图（DOM Views）：定义了跟踪不同文档视图的接口
  • DOM事件（DOM Events）：定义了事件和事件处理的接口
  • DOM样式（DOM Style）：定义了基于CSS为元素应用样式的接口
  • DOM遍历和范围（DOM Traversal and Range）：定义了遍历和操作文档树的接口

DOM3进一步扩展了DOM，在DOM3中引入了以下模块：

  • DOM加载和保存模块（DOM Load and Save）：引入了以统一方式加载和保存文档的方法
  • DOM验证模块（DOM Validation）：定义了验证文档的方法
  • DOM核心的扩展（DOM Style）：支持XML 1.0规范，涉及XML Infoset、XPath和XML Base


    五、什么是BOM？


    BOM 是 Browser Object Model，浏览器对象模型。
    DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。


    六、BOM的作用


    浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
    所以 BOM 就是为了解决这些事情出现的接口。


    七、BOM与DOM的结构层次图

DOM和BOM是什么？有什么作用？ - 图2

Window对象包含属性：document、location、navigator、screen、history、frames
Document根节点包含子节点：forms、location、anchors、images、links
从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。
区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口


八、BOM对象是什么

  • BOM：浏览器对象模型(Brower Object Model)，是用于操作浏览器而出现的API，BOM对象则是Javascript对BOM接口的实现。
  • BOM提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。通过BOM对象可以访问浏览器功能部件和属性。
  • BOM对象由多个对象构成，其中代表浏览器窗口的window对象是Javascript顶层对象，其他BOM对象均为window对象的子对象。被作为window对象的属性来引用。
  • 其他BOM对象都是在window对象中进行操作。
  • BOM对象 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

BOM对象最根本的是window。

九、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对象最根本的是document（实际上是window.document）。

十、DOM与javascript的关系

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

DOM对象（document），即是我们用javascript实现DOM接口获得的对象。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

dom是有W3C（万维网联盟）定义的一种规范，这种规范被很多浏览器厂商支持，但是要注意的是他并不是JavaScript语言，虽然他可以在JavaScript中可以被直接使用（主要是将其封装成了JavaScript支持的形式才导致的）。

因此有这样一个近似的等式：

web或XML页面 = DOM +JS(脚本语言)

十一、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是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作

DOM和BOM是什么？有什么作用？ - 图3

归DOM管的：

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

归BOM管的：

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

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

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

D区（滚动条scroll bar）

十三、BOM对象大小写的区别

DOM和BOM是什么？有什么作用？ - 图4

DOM和BOM是什么？有什么作用？ - 图5

DOM和BOM是什么？有什么作用？ - 图6

从上面图例中，可以很清楚的看到Window和Document其实是接口，而window、document和location这种才是真正的对象，这些BOM对象就是实现这些BOM接口的实例，而且是单例模式。所以我们不能自己随意创建BOM对象。

十四、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进行访问。

一些例子：

location.herf = ‘url地址’

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 （80 或 443）

location.portocol 返回页面使用的web协议。 http:或https:

DOM基本操作思维导图

DOM和BOM是什么？有什么作用？ - 图7

window对象思维导图

DOM和BOM是什么？有什么作用？ - 图8

总结：Bom对象的核心对象是window，window包含了documen对象