7th week blog（BOM&DOM）

Posted 2021-01-14 shengbowen1004

关于DOM & BOM概念的起源（source），方法（methods），内容（contents），应用（application）

DOM（起源）：文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。DocumentObjectModel的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在javascript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的Dhtml格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM（方法）：DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。它实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。通过JavaScript，可以重构整个HTML文档。可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

使用选择器定位DOM元素：选择器API提供了一些方法，通过匹配一组选择器，快速可以轻松地从DOM中检索节点。这比过去的技术要快得多，例如，有必要在JavaScript的代码中使用循环来定位您需要查找的特定项目。Element.

1.NodeSelector接口：本规范增加了两个新的方法，以任何对象实现，或接口：DocumentDocumentFragmentElement

querySelector报道查看节点子树中的第一个匹配节点。如果未找到匹配的节点，则返回。Elementnull

querySelectorAll报道查看所有游戏节点子树中所有匹配节点的节点，如果未找到匹配项则报道查看空节点。NodeListElementNodeList

选择器API提供了一些方法，通过匹配一组选择器，快速可以轻松地从DOM中检索节点。这比过去的技术要快得多，例如，有必要在JavaScript的代码中使用循环来定位您需要查找的特定项目

2.选择：选择器方法接受一个或多个逗号分隔的选择器以确定应返回哪个或哪些元素。例如，选择所有段落（p），其CSS类或者是一个文档中的元素warning或者note.

DOM（内容）：DOM是W3C的标准。DOM定义了访问HTML和XML文档的标准："W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

分级：根据W3CDOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

1级DOM：1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOMHTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOMHTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

2级DOM：鉴于1级DOM仅以映射文档结构为目标，DOM2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件、范围、遍历和层叠样式表（CSS）的支持。同时也对DOM1的核心进行了扩展，从而可支持XML命名空间。

2级DOM引进了几个新DOM模块来处理新的接口类型：DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；DOM事件：描述事件接口；DOM样式：描述处理基于CSS样式的接口；DOM遍历与范围：描述遍历和操作文档树的接口；

3级DOM：3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包扩XMLInfoset、XPath、和XMLBase。

节点：根据DOM，HTML文档中的每个成分都是一个节点。DOM是这样规定的：整个文档是一个文档节点。每个HTML标签是一个元素节点。包含在HTML元素中的文本是文本节点。每一个HTML属性是一个属性节点。注释属于注释节点。

Node 层次：节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

DOM（应用）：注册事件监听器：有三种方法可以为DOM元素注册事件处理程序。

访问事件接口：事件处理程序可以附加到各种对象，包括DOM元素，文档，窗口显示对象等。当事件发生时，创建事件对象并将其顺序传递给事件侦听器。Event通过可以第作为一个参数传递的事件对象从处理函数中访问该接口。以下简单示例显示了如何将事件对象传递给事件处理函数，并且可以在一个此类函数中使用。

 

 

BOM（起源）：BOM(Browser Object Mode) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM（方法）：

1. 窗口操作：

moveBy(dx,dy)：把浏览器窗口相对当前位置水平移动x个像素，垂直移动y个像素。

moveTo(x,y)：移动浏览器窗口，使它们的左上角位于用户屏幕的（x，y）处。

resizeBy(dw,dh)：相对于浏览器窗口的当前大小，把它的宽度调整x个像素，高度调整y个像素。

resizeTo(w,h)：把窗口的宽度调整为x，高度调整为y。不能为负数。

★IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置。document.body.offsetWidth和document.body.offsetHeight属性可获取视口大小。

★Mozilla提供了window.screenX和window.screenY属性判断窗口的位置;windows.innerWidth和windows.innerHeight属性来判断视口的大小;window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

2. 导航和打开新窗口：

打开新窗口：window.open("新窗口的URL","名字","特性字符串");

各种设置：

Left：窗口的左坐标,不能为负数；

Top：窗口的上坐标,不能为负数；

Height：窗口的高度,不能小于100；

Width：窗口的宽度,不能小于100；

Resizable：判断窗体是否能拖动,默认为no；

Scrollable：判断窗体不要显示内容时是否滚动，默认为no；

Toolbar：判断是否显示工具栏，默认为no；

Status：判断是否显示状态栏，默认为no；

location：断是否显示地址栏，默认为no。

关闭自身窗体：window.close（）；

3. 系统对话框：

警告框：alert("XXX");  

确认框：confirm("XXX");    

输入框：prompt("‘XXX") 

4．状态栏

window.defaultStatus=”XXXXXX”

wingdow.status=”XXXXXX”

5. 时间间隔和暂停：

setTimeout();等待XX毫秒后执行.

clearTimeout();取消

setInterval(); 等待XX毫秒后执行

clearInterval();取消

6. 历史：

后退一页：window.history.go(-1);或history.back()

前进一页：window.history.go(1); 或history.forward()

二、document对象：

document对象的一些通用属性：

1. lastModified：最后修改的日期，是字符串；

2. referrer：浏览器历史中后退一个位置的URL；

3. title：标签中显示文本；

4.URL：当前载入的页面的URL。

改变框架标题：top.document.title=”新的页面标题”；

如把窗口导航到新页面：

document.URL = "http://www.baidu.com";

BOM（内容）：

在JavaScript中对象之间并不是独立存在的，对象与对象之间有着层次关系。如Document对象是Window对象的子对象，Window对象是Document对象，它表示整个浏览器窗口。

BOM并不是W3C中的标准，因此，不同的浏览器所支持的BOM中的对象、对象的属性和方法都有可能不同。Document对象下有很多子对象，因此Document对象是一个十分重要的对象。事实上，大多数浏览器都支持Document对象。在W3C正式定义DOM之前，BOM中的Document分支就已经被众多浏览器支持。DOM被正式定义之后，分为了三个层次，分别为1级DOM（DOM Level 1）、2级DOM（DOM Level 2）和3级DOM（DOM Level 3）。而BOM中的Document分支被称为0级DOM（DOM Level 0），因为该分支定义了文档功能的基本功能。

Document对象：该对象代表浏览器窗口中所加载的文档。使用Document对象可以操作文档中的内容。在整个BOM中，只有Document对象是与HTML文档的内容相关的。

Frames数组：该数组代表浏览器窗口中的框架。HTML中允许将一个浏览器窗口分为多个框架，每个框架中可以加载一个HTML文档。在这种框架页中，每一个框架都是Frames数组中的一个元素。而Frames数组中的每一个元素都是一个Window对象。

History对象：该对象代表当前浏览器窗口的浏览历史。通过该对象可以将当前浏览器窗口中的文档前进或后退到某一个已经访问过的URL（统一资源定位符）。

Location对象：该对象代表当前文档的URL。URL分为几个部分，如协议部分、主机部分、端口部分等。使用Location对象可以分别获得这些部分，并且可以通过修改这些部分的值来加载一个新文档。

Navigator对象：该对象是浏览器对象，代表了浏览器的信息。该对象与Window对象不同，Window对象可以用于控制浏览器窗口的一些属性，如浏览器窗口大小、位置等。而Navigator对象包含的是浏览器的信息，如浏览器的名称、版本号等。

Screen对象：该对象代表当前显示器的信息。使用Screen对象可以获得用户显示器的分辨率、可用颜色数量等信息。

Document对象代表HTML文档，而HTML文档中包括了有很多元素，BOM也将这些元素看成了不同的对象。

Anchors数组：该数组代表了文档中的所有锚。数组中的每一个元素都是一个锚对象。每一个锚对象都对应着HTML文档中的一个包含name属性的标签，通过锚对象可以获得锚的命名，以及超链接中的文字。

Applets数组：该数组代表了嵌在网页中的所有小程序。数组中的每一个元素都是一个Applet对象，通过Applet对象可以获得Java小程序的公有字段。

Embeds数组：与Applets类似，但建议使用Embeds数组。

BOM体系结构Forms数组：该数组代表文档中的所有表单。数组中的每一个元素都是一个Form对象。每一个Form对象都对应着HTML文档中的一个<form>标签。通过Form对象可以获得表单中的各种信息，也可以提交或重置表单。由于表单中还包括了很多表单元素，因此，Form对象的子对象还可以对这些表单元素进行引用，以完成更具体的应用。

Images数组：该数组代表文档中的所有图片。数组中的每一个元素都是一个Image对象。每一个Image对象都对应着HTML文档中的一个<img>标签。通过Image对象可以获得图片的各种信息。

Links数组：该数组代表文档中的所有超链接。数组中的每一个元素都是一个Link对象。每一个Link对象都对应着HTML文档中的一个包含href属性的<a>标签，通过Link对象可以获得超链接中URL的各部分信息。

Location对象：该对象与Window对象中的Location对象完全相同。由于该对象与HTML文档并没有太大关系，因此，该对象是反对使用的对象，建议使用Window对象的Location子对象。

 

BOM（应用）：BOM是browser object model的缩写，简称浏览器对象模型，它的作用有：

1. 弹出新的浏览器窗口、移动、关闭浏览器窗口及调整窗口大小；

2. 提供WEB浏览器详细信息的导航对象；

3. 提供装载到浏览器中页面的详细信息的定位对象；

4. 提供用户屏幕分辩率详细信息的屏幕对象；

5. 对cookie的支持