DOM&BOM

文档对象模型（Document Object Model）

1. 来源：文档对象模型（Document Object Model）的历史与20世纪90年代末Netscape Navigator和Microsoft Internet Explorer之间的“浏览器大战”的历史以及JavaScript和JScript的历史相互交织，JavaScript和JScript是第一个广泛实现用于Web浏览器的JavaScript引擎的脚本语言。
2. 方法：一些 DOM 对象方法

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

 

1. 内容：

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

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

W3C DOM 标准被分为 3 个不同的部分：

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

    DOM的分级：

 •DOM Level 1为整个HTML或XML文档提供了完整的模型，包括更改文档任何部分的方法。

 •DOM Level 2于2000年末发布。它引入了getElementById函数以及XML名称空间和CSS的事件模型和支持。

• •2004年4月发布的DOM Level 3增加了对XPath和键盘事件处理的支持，以及用于将文档序列化为XML的接口。

 •DOM Level 4于2015年发布。它是WHATWG现行标准的快照。

1. 应用：

Web browsers

为了呈现诸如HTML页面之类的文档，大多数Web浏览器使用类似于DOM的内部模型。每个文档的节点都以树结构组织，称为DOM树，最顶层的节点名为“Document object”。当在浏览器中呈现HTML页面时，浏览器将HTML下载到本地内存中并自动解析它以在屏幕上显示页面。

JavaScript

当加载网页时，浏览器创建页面的文档对象模型，该模型是HTML文档的面向对象表示，充当JavaScript和文档本身之间的接口，并允许创建动态网页：

•JavaScript可以添加，更改和删除页面中的所有HTML元素和属性。

•JavaScript可以更改页面中的所有CSS样式。

•JavaScript可以对页面中的所有现有事件做出反应。

•JavaScript可以在页面中创建新事件。

Web browsers[edit]

To render a document such as an HTML page, most web browsers use an internal model similar to the DOM. The nodes of every document are organized in a tree structure, called the DOM tree, with the topmost node named as "Document object". When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen.

JavaScript[edit]

When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages:^[8]

• JavaScript can add, change, and remove all of the HTML elements and attributes in the page.
• JavaScript can change all of the CSS styles in the page.
• JavaScript can react to all of the existing events in the page.
• JavaScript can create new events within the page.

 

 

BOM(Browser Object Model)

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

主要功能

1. 弹出新浏览器窗口的能力；

2. 移动、关闭和更改浏览器窗口大小的能力；

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

4.可提供浏览器载入页面详细信息的本地对象；

5 .可提供用户屏幕分辨率详细信息的屏幕对象；

6. 支持Cookies；

7. Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。