本篇主要介紹HTML DOM 對象：Document、Element、Attr、Event等4個對象。
目錄
1. Document 對象：表示文檔樹的根節點，大部分屬性和方法都是對元素進行操作。
2. Element 對象：表示文檔中的元素，可包含為元素節點、文本節點以及注釋節點。
3. Attr 屬性對象：表示一個Element節點的屬性。可獲取、添加、修改指定的屬性。
4. Event 對象：表示事件發生時的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態等等。
1. Document 對象
Document 對象是文檔樹的根節點。
獲取一個Document對象通常是通過窗口的document屬性。
擴展閱讀：https://developer.mozilla.org/en-US/docs/Web/API/document
1.1 靜態屬性
readonly [] document.all ：獲取一個包含HTML文檔內的所有元素的數組。
readonly [] document.anchors ：獲取一個包含HTML文檔內的所有anchor元素的數組。
readonly body document.body ：獲取HTML文檔內的 body 元素。
string document.charset ：設置或獲取文檔的字符編碼。
cookie document.cookie ：設置或獲取當前HTML文檔的cookie。
string document.designMode ：設置文檔是否可編輯。on：文檔可編輯；off(默認)：文檔不可編輯。
readonly string document.domain ：獲取當前HTML文檔的域名。
readonly [] document.forms ：獲取一個包含HTML文檔內的所有form元素的數組。
readonly [] document.images ：獲取一個包含HTML文檔內的所有image元素的數組。
readonly [] document.links ：獲取一個包含HTML文檔內的所有link元素的數組
readonly string document.referrer ：獲取載入本文檔的來源URL。
string document.title ：設置或獲取HTML文檔的標題。
readonly string document.URL ：獲取HTML文檔的URL。
1.2 靜態方法
Attribute document.createAttribute(attrName) ：創建一個屬性對象。eg：document.createAttribute('id'); // 創建一個id屬性
HTMLElement document.createElement(elementName) ：創建一個元素對象。eg：document.createElement('a'); // 創建一個a元素
HTMLElement document.createElementNS(namespaceURI,attrName) ：創建一個元素對象，並指定命名空間。eg：document.createElementNS("http://www.w3.org/1999/xhtml","a");
EventType document.createEvent(eventType) ：創建一個指定的事件類型。
參數： eventType {EventTyper} ：指定事件類型，如MouseEvent。 返回值： {EventType} 返回所創建的事件類型。 示例： var mouseEvent = document.createEvent('MouseEvent'); // 創建一個鼠標事件
HTMLElement document.getElementById(elementID) ：獲取指定ID的第一個元素。
參數： elementID {string} ：元素的ID。 返回值： {HTMLElment} 獲取指定ID的元素對象。若沒有找到，獲取null；若容器下含有多個相同ID的元素，獲取第一個匹配的元素。 示例： var btn = document.getElementById('btn_submit'); // 獲取一個ID為btn_submit的元素
HTMLElement[] document.getElementsByClassName(className) ：獲取一個class屬性含有指定值的元素數組 。
注意：若元素class屬性包含多個類，指定其中一個，就能獲取此元素。 參數： className {string} ：元素class屬性包含的字符。 返回值： {HTMLElement[]} 返回一個元素數組。 示例： var btnArray=document.getElementsByClassName('btn-hide'); // 獲取一個包含class屬性包含btn-hide的元素數組
HTMLElement[] document.getElementsByName(nameValue) ：獲取一個name屬性為指定值的元素數組。
參數： nameValue {string} ：元素name屬性指定的值。 返回值： {HTMLElement[]} 返回一個元素數組。 示例： var btnArray=document.getElementsByName('txt'); // 獲取一個name屬性為txt的元素數組
HTMLElement[] document.getElementsByTagName(elementName) ：獲取一個指定元素名稱的元素數組。
參數： elementName {string} ：元素的名稱。如：div、a等等。 返回值： {HTMLElement[]} 返回一個元素數組。 示例： var linkArray=document.getElementsByTagName('a'); // 獲取a元素數組
void document.write(string) ：向HTML文檔寫入內容。eg：document.write('<div>顯示div控件</div>');
void document.writeln(string) ：向HTML文檔寫入內容，並在結尾換行。
2. Element 對象
說明：Element 對象表示文檔中的元素，可包含為元素節點、文本節點以及注釋節點。
獲取方式：可通過document.getElementById(elementID)、document.getElementsByName(className)、document.getElementsByName(nameValue)、document.getElementsByTagName(elementName)等方式來獲取指定元素。
擴展閱讀：https://developer.mozilla.org/en-US/docs/Web/API/Attr
2.1 實例屬性
readonly NamedNodeMap attributes ：只讀，獲取此元素的所有屬性集合對象。
readonly HTMLElement[] children ：獲取此元素下子元素的數組。
readonly string[] classList ：只讀，獲取一個包含該元素class的數組。eg：<button class="btn-show btn-submit"></buttom> => ['btn-show','btn-submit']
string className ：設置或獲取元素的class屬性。eg：<button class="btn-show btn-submit"></buttom> => 'btn-show btn-submit'
string id ：設置或獲取元素的id。
string innerHTML ：以HTML代碼格式設置獲取元素內的內容。
示例： HTML：<div><span>內容</span></div> Js：document.getElementById('div').innerHTML; // => "<span>內容</span>"
string innerText ：設置或獲取元素內的文本內容。
示例： HTML：<div><span>內容</span></div> Js：document.getElementById('div').innerText; // => "內容
CSSStyleDeclaration style ：設置或獲取元素的樣式。eg：element.style.width='30px'; // 設置元素的width樣式
readonly string tagName ：獲取元素的元素名稱，以大寫格式返回。eg：<div></div> => element.tagName; // 返回 DIV
readonly string namespaceURI ：獲取元素的命名空間。默認返回為："http://www.w3.org/1999/xhtml"。
string title ：設置或獲取元素title屬性的值。
2.2 實例方法
void blur() ：該元素失去焦點。eg：document.getElementById('text').blur();
void click() ：該元素模擬點擊。eg：document.getElementById('text').click();
void focus() ：該元素獲取焦點。eg：document.getElementById('text').focus();
string getAttribute(attributeName) ：獲取指定屬性的值，若屬性不存返回null。eg：document.getElementById('div').getAttribute('name'); // 獲取元素的name屬性
boolean hasAttribute(attributeName) ：判斷當前元素是否含有某個屬性。eg：document.getElementById('div').hasAttribute('name'); // => true：含有name屬性
HTMLElement querySelector(CssSelector) ：獲取該元素下第一個符合CssSelector的匹配子元素。若沒有找到，返回null。
CssSelector 樣式選擇器，可根據Css匹配規則查找元素。如： 1) 根據ID查找 document.querySelector('#btn'); 2) 根據class查找 document.querySelector('.btn-show'); 3) 根據元素類型選擇 document.querySelector('button'); // 獲取button元素 4) 根據特定屬性查找 document.querySelector('[data-po="cool"]'); // 自定義屬性data-po的值為cool
HTMLElement[] querySelectorAll(CssSelector) ：獲取一個數組，包含該元素下所有符合CssSelector匹配的子元素。CssSelector規范參照上個方法的詳解。
void removeAttribute(attributeName) ：刪除元素的指定屬性。不管元素是否含有此屬性，都返回undefined。
void setAttribute(attributeName,value) ：設置該元素某個屬性的值。若此屬性不存在於該元素，進行添加屬性操作。eg：document.getElementById('div').setAttribute('name','logdiv'); // 設置name屬性
3. Attr 屬性對象
說明：Attr 對象表示一個Element節點的屬性。
獲取方式：element.attributes 屬性獲取Attr對象。
擴展閱讀：https://developer.mozilla.org/en-US/docs/Web/API/Attr
3.1 實例屬性
readonly string name ：只讀，獲取屬性名稱。eg：document.getElementById('div').attributes[0].name;// => id ：獲取第一個屬性的名稱
string value ：設置或獲取屬性的值。eg：document.getElementById('div').attributes[0].value;// => div ：獲取第一個屬性的值
3.2 方法
無
4. Event 對象
說明：Event 對象表示事件發生時的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態等等。
獲取方式：事件觸發時的第一個參數 或者 事件觸發時調用window.event對象。
document.getElementById('btn').addEventListener('click', function(e){
console.log(window.event==e); // => true ：觸發時兩者是一樣
冒泡事件：當子元素觸發某一事件時，父元素會觸發相同時間(事件為允許冒泡)。
阻止后續處理程序：通過addEventListener()方法可以給元素的同一事件注冊多個處理程序，在某個事件中調用了stopImmediatePropagation() 方法后，后面已經注冊的處理程序將不會執行。比如，某個元素在click事件上注冊了3個函數，在第2個函數上調用了stopImmediatePropagation()方法，第3個函數不會執行。
擴展閱讀：https://developer.mozilla.org/en-US/docs/Web/API/Event
4.1 實例屬性
readonly boolean bubbles ：只讀，獲取此事件是否冒泡。
readonly boolean cancelable ：只讀，獲取此事件是否可被撤銷。true：事件可撤銷。可調用preventDefault()取消后續的默認動作。flase：事件不可撤銷。
readonly Object currentTarget ：只讀，獲取正在處理此事件的對象，可以為Element、Document對象等等。
readonly boolean defaultPrevented ：只讀，表示是否已經調用過了preventDefault()。true：已經調用過了preventDefault()方法。
readonly int eventPhase ：只讀，表示事件的處理階段：0表示沒有正在處理，1表示捕獲階段，2表示目標階段，3表示冒泡階段。
readonly Object target ：只讀，獲取觸發此事件的對象。
readonly long timeStamp ：只讀，獲取事件創建的時間。eg：console.log(e.timeStamp); // => 1455034313689
readonly string type ：只讀，獲取事件名稱（不包含前綴on，如：click）
readonly boolean isTrusted ：只讀，表示此事件是否由瀏覽器生成。true：由瀏覽器生成。false：通過JS創建，如：dispatchEvent()。
4.2 實例方法
void preventDefault() ：終止事件的后續默認操作(事件要可撤銷，即cancelable屬性為true)。如：checkbox的click事件，執行這代碼，元素不會被勾選和取消勾選。
document.getElementById('ckbox').onclick=function(e){
e.preventDefault(); // checkbox不會被勾選和取消勾選
};
void stopImmediatePropagation() ：阻止當前事件的冒泡行為並且阻止此元素上相同類型事件的后續處理函數。
document.body.onclick=function(e){ console.log('body-click'); }; document.getElementById('btn').addEventListener('click', function(e){ console.log('btn-click-1'); }); document.getElementById('btn').addEventListener('click', function(e){ console.log('btn-click-2'); // stopImmediatePropagation()方法將阻止當前事件的冒泡行為並且阻止此元素上相同類型事件的后續處理函數; // 將會輸出：btn-click-1、btn-click-2 // 若取消stopImmediatePropagation()方法，將會輸出：btn-click-1、btn-click-2、btn-click-3、body-click e.stopImmediatePropagation(); }); document.getElementById('btn').addEventListener('click', function(e){ console.log('btn-click-3'); });
void stopPropagation() ：阻止當前事件的冒泡行為。
document.body.onclick = function (e) { console.log('body的click事件'); }; document.getElementById('btn').onclick = function (e) { console.log('btn的click事件'); e.stopPropagation(); // 阻止此事件后續的冒泡行為，原先點擊此事件，會觸發body的相同類型事件 };
4.3 currentTarget 與 target 屬性的區別
currentTarget ：獲取正在處理此事件的對象。
target ：獲取觸發此事件的對象。
冒泡階段時兩者的區別： 假設body和Button元素都注冊了click事件；當點擊Button元素時，body的click事件也會觸發，此時在body的click事件內，currentTarget指向body元素，target指向Button元素。
示例：點擊Button元素時的顯示結果
document.body.onclick = function (e) {
console.log(e.currentTarget); // 指向body元素
console.log(e.target); // 若是冒泡事件時，指向最開始觸發的元素。否則為元素自身。
};
document.getElementById('btn').onclick = function (e) {
console.log(e.currentTarget);
console.log(e.target);
};