DOM、BOM方法起源
1.Javascript組成
JavaScript的實現包括以下3個部分：
1）核心（ECMAScript）：描述了JS的語法和基本物件。
2）文件物件模型 （DOM）：處理網頁內容的方法和介面
3）瀏覽器物件模型（BOM）：與瀏覽器互動的方法和介面
ECMAScript擴充套件知識：
① ECMAScript是一個標準，JS只是它的一個實現，其他實現包括ActionScript。
② “ECMAScript可以為不同種類的宿主環境提供核心的指令碼程式設計能力……”，即ECMAScript不與具體的宿主環境相繫結，如JS的宿主環境是瀏覽器，AS的宿主環境是Flash。
③ECMAScript描述了以下內容：語法、型別、語句、關鍵字、保留字、運算子、物件。
javascript 有三部分構成，ECMAScript，DOM和BOM，根據宿主（瀏覽器）的不同，具體的表現形式也不盡相同，ie和其他的瀏覽器風格迥異。
1. DOM 是 W3C的標準；[所有瀏覽器公共遵守的標準]
2. BOM 是 各個瀏覽器廠商根據 DOM
在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同]
3. window 是 BOM物件，而非js物件；
DOM（文件物件模型）是 HTML 和 XML 的應用程式介面（API）。
BOM 主要處理瀏覽器視窗和框架，不過通常瀏覽器特定的 JavaScript 擴充套件都被看做 BOM 的一部分。這些擴充套件包括：
彈出新的瀏覽器視窗
移動、關閉瀏覽器視窗以及調整視窗大小
提供 Web 瀏覽器詳細資訊的定位物件
提供使用者螢幕解析度詳細資訊的螢幕物件
對 cookie 的支援
IE 擴充套件了 BOM，加入了ActiveXObject類，可以通過JavaScript例項化ActiveX物件
javacsript是通過訪問BOM（Browser Object Model）物件來訪問、控制、修改客戶端(瀏覽器)，由於BOM的window包含了document，window物件的屬性和方法是直接可以使用而且被感知的，因此可以直接使用window物件的document屬性，通過document屬性就可以訪問、檢索、修改XHTML文件內容與結構。因為document物件又是DOM（Document Object Model）模型的根節點。可以說，BOM包含了DOM(物件)，瀏覽器提供出來給予訪問的是BOM物件，從BOM物件再訪問到DOM物件，從而js可以操作瀏覽器以及瀏覽器讀取到的文件。其中
DOM包含：window
Window物件包含屬性：document、location、navigator、screen、history、frames
Document根節點包含子節點：forms、location、anchors、images、links
從window.document已然可以看出，DOM的最根本的物件是BOM的window物件的子物件。
區別：DOM描述了處理網頁內容的方法和介面，BOM描述了與瀏覽器進行互動的方法和介面
1.1 DOM, DOCUMENT, BOM, WINDOW 區別
DOM 全稱是 Document Object Model，也就是文件物件模型。是針對XML的基於樹的API。描述了處理網頁內容的方法和介面，是HTML和XML的API，DOM把整個頁面規劃成由節點層級構成的文件。針對XHTML和HTML的DOM。這個DOM定義了一個HTMLDocument和HTMLElement做為這種實現的基礎,就是說為了能以程式設計的方法操作這個 HTML 的內容（比如新增某些元素、修改元素的內容、刪除某些元素），我們把這個 HTML 看做一個物件樹（DOM樹），它本身和裡面的所有東西比如 <div></div> 這些標籤都看做一個物件，每個物件都叫做一個節點（node），節點可以理解為 DOM 中所有 Object 的父類。
DOM 有什麼用？就是為了操作 HTML 中的元素，比如說我們要通過 JS 把這個網頁的標題改了，直接這樣就可以了：
document.title = ‘how to make love‘;
這個 API 使得在網頁被下載到瀏覽器之後改變網頁的內容成為可能。
document
當瀏覽器下載到一個網頁，通常是 HTML，這個 HTML 就叫 document（當然，這也是 DOM 樹中的一個 node），從上圖可以看到，document 通常是整個 DOM 樹的根節點。這個 document 包含了標題（document.title）、URL（document.URL）等屬性，可以直接在 JS 中訪問到。
在一個瀏覽器視窗中可能有多個 document，例如，通過 iframe 載入的頁面，每一個都是一個 document。
在 JS 中，可以通過 document 訪問其子節點（其實任何節點都可以），如
document.body;document.getElementById(‘xxx‘);
BOM
BOM 是 Browser Object Model，瀏覽器物件模型。
剛才說過 DOM 是為了操作文件出現的介面，那 BOM 顧名思義其實就是為了控制瀏覽器的行為而出現的介面。
瀏覽器可以做什麼呢？比如跳轉到另一個頁面、前進、後退等等，程式還可能需要獲取螢幕的大小之類的引數。
所以 BOM 就是為了解決這些事情出現的介面。比如我們要讓瀏覽器跳轉到另一個頁面，只需要
location.href = "http://www.xxxx.com";
這個 location 就是 BOM 裡的一個物件。
詳解
2.文件物件模型(DOM)
DOM節點樹模型（以HTML DOM樹為例）
DOM模型將整個文件（XML文件和HTML文件）看成一個樹形結構，
在DOM中，HTML文件的層次結構被表示為一個樹形結構。並用document物件表示該文件，樹的每個子節點表示HTML文件中的不同內容。
每個載入瀏覽器的 HTML 文件都會成為Document物件,Document是探索DOM的入口,利用全域性變數document可以訪問Document物件
認識DOM
DOM的起源：
從DOM Level 1開始，DOM API 包含了一些介面，用於表示可從 XML 文件中找到的所有不同型別的資訊。它還包含使用這些物件所必需的方法和屬性。Level 1包括對XML 1.0和HTML的支援，每個 HTML 元素被表示為一個介面。它包括用於新增、編輯、移動和讀取節點中包含的資訊的方法，等等。然而，它沒有包括對 XML 名稱空間（XML Namespace）的支援，XML 名稱空間提供分割文件中的資訊的能力。DOM Level 2添加了名稱空間支援。Level 2擴充套件了 Level 1，允許開發人員檢測和使用可能適用於某個節點的名稱空間資訊。Level 2還增加了幾個新的模組，以支援級聯樣式表、事件和增強的樹操作。當前正處於定稿階段的 DOM Level 3包括對建立 Document 物件（以前的版本將這個任務留給實現，使得建立通用應用程式很困難）的更好支援、增強的名稱空間支援，以及用來處理文件載入和儲存、驗證以及 XPath 的新模組；XPath 是在XSL 轉換（XSL Transformation）以及其他 XML 技術中用來選擇節點的手段。DOM 的模組化意味著作為開發人員，您必須知道自己希望使用的特性是否受正在使用的 DOM 實現所支援。DOM的應用：
建立、插入和刪除DOM元素（this的使用）
建立：createElement() ，之後新增 oUl.appendChild(oLi); 格式：父級.appendChild(子節點)；
插入：父級.appendChild(子節點) ，父級.insertBefore(子節點，在誰之前插入)
IE 有相容性問題 ，聯合兩個插入方法用if判斷解決
刪除：removeChild(),
DOM通過建立樹來表示文件，描述了處理網頁內容的方法和介面，從而使開發者對文件的內容和結構具有空前的控制力，用DOM API可以輕鬆地刪除、新增和替換節點。
1）節點型別
DOM規定文件中的每個成分都是一個節點（Node）,HTML文件可以說由節點構成的集合，DOM節點有:
1. 元素節點（Element）：上圖中<html>、<body>、<p>等都是元素節點，即標籤。
2. 文字節點（Text）:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文字。
3. 屬性節點（Attr）:元素屬性，元素才有屬性,如<a>標籤的連結屬性href="http://www.baidu.com"。
1） DOM節點三大屬性（XML DOM）
1）nodeName：元素節點、屬性節點、文字節點分別返回元素的名稱、屬性的名稱和#text的字串。
2）nodeType：元素節點、屬性節點、文字節點的nodeType值分別為1、2、3.、
3）nodeValue：元素節點、屬性節點、文字節點的返回值分別為null、屬性值和文字節點內容。
DOM：Method
1.通過getElementById()方法訪問節點
document物件的getElementById()方法可以訪問頁面中的節點，該方法在使用時，必須指定一個目標一個元素的id作為引數。
基本語法：
例：var s=document.getElementById(id); //呼叫時引數需要加雙引號
2.通過getElementsByName()方法訪問節點
通過元素名字來進行訪問。
基本語法：
例：var s=document.getElementsByName(name); //呼叫時引數需要加雙引號
3.通過getElementsByTagName()方法訪問節點
通過標記名稱來獲取頁面上所有同類的元素。
基本語法：
例：var s=document.getElementsByName(tagname);
4.通過form元素方法訪問節點
如果要獲得頁面上中的form物件，除了getElementById()方法訪問、getElementsByName()方法訪問，還可以通過document物件的forms屬性來獲得這個form物件。
基本語法：
例：
var myfrm=document.forms; //6通過document的forms屬性物件獲得陣列物件
var mloginform=myfrm[0]; //獲得陣列中的第一個form物件
其他方法：getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。 appendChild() 把新的子節點新增到指定節點。 removeChild() 刪除子節點。 replaceChild() 替換子節點。 insertBefore() 在指定的子節點前面插入新的子節點。
createAttribute() 建立屬性節點。 createTextNode() 建立文字節點。getAttribute() 返回指定的屬性值。 setAttribute() 把指定屬性設定或修改為指定的值。
【在DOM中還有兩個很重要的屬性，分別是innerText和innerHTML】
innerHTML 屬性設定或返回表格行的開始和結束標籤之間的 HTML。
innerText 列印標籤之間的純文字資訊，會將標籤過濾掉。
BOM的介紹：
broswer object model（瀏覽器物件模型），由五個物件組成： Window:物件表示瀏覽器中開啟的視窗 最頂層物件. Navigator :瀏覽器物件.Screen: 螢幕物件 ，History:瀏覽器歷史物件，Location:地址物件.
BOM（Browser Object MOdel）也稱為瀏覽器物件模型。瀏覽器物件模型定義了JavaScript可以進行操作的瀏覽器的各個功能不能部件（如視窗本身、螢幕功能部件、瀏覽歷史記錄等）的途徑以及操作方法。
BOM的應用：
BOM，Bowser Object Model瀏覽器物件模型。提供了訪問和操作瀏覽器各元件的途徑或方法。
比如：Navigator物件：瀏覽器的名稱、版本號、客戶端作業系統、系統語言等
Window：彈出一個廣告視窗、視窗的尺寸；
History：獲取到你瀏覽器的歷史記錄；
BOM的方法：
Closed：判斷一個視窗是否關閉；
Name：獲取當前視窗的名稱；
innerWidth：指視窗的淨寬，不含：選單欄、位址列、狀態列、工具欄；
在IE中不支援 IE中可以使用body元素的clientWidth和clientHeight來代替。
innerHeight：指視窗的淨高，不含：選單欄、位址列、狀態列等；在IE中不支援
outerWidth：指視窗的總寬度，包含：選單欄、位址列、狀態列等。IE不支援
outerHeight：指視窗的總高度，同上。IE不支援
window物件的方法 ：
Window.alert(str)：彈出一個警告對話方塊；
Window.prompt()：彈出一個輸入對話方塊
Window.confirm()：彈出一個確認對話方塊
Window.close()：關閉視窗
Window.print()：列印視窗中的網頁
【所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。全域性變數是 window 物件的屬性。全域性函式是 window 物件的方法。甚至 HTML DOM 的 document 也是 window 物件的屬性之一】
location物件方法：
location物件是一個很特別的物件，因為它既是window物件的屬性，也是document物件的屬性。（轉自：https://blog.csdn.net/CC25802580/article/details/80727073）
window.location和document.location引用的是同一個物件。
location物件的屬性：
Navigation物件方法：（轉自：https://www.cnblogs.com/fengmingyue/p/5946116.html）
history物件
history物件儲存著使用者上網的歷史記錄，從視窗被開啟的那一刻算起。因為history是window物件的屬性，因此每個瀏覽器視窗、每個標籤頁以及每個框架，都有自己的history物件與特定的window物件關聯。處於安全方面的考慮，開發人員是無法知道使用者瀏覽過的URL，不過，藉助使用者訪問過的頁面列表，同樣可以在不知道實際URL的情況下實現後退和前進。使用go()方法可以在使用者的歷史記錄中任意跳轉，可以向後也可以向前。該方法接收一個引數：表示向前或者向後跳轉的頁面數的整數值。負數表示向後跳轉(類似單擊瀏覽器的後退按鈕)，正數表示向前跳轉(類似瀏覽器的前進按鈕)。
//後退一頁
history.go(-1);
//前進一頁
history.go(1);（轉自：https://blog.csdn.net/CC25802580/article/details/80727073 ）
