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對象。