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()方法可以在用戶的歷史記錄中任意跳轉，可以向後也可以向前。該方法接收一個參數：表示向前或者向後跳轉的頁面數的整數值。負數表示向後跳轉(類似單擊瀏覽器的後退按鈕)，正數表示向前跳轉(類似瀏覽器的前進按鈕)。
DOM BOM