本篇文章： HTML DOM 對象

標籤：素數   不可編輯   node   3.2   預設   ado   window   asc   判斷   

HTML DOM 對象

　　本篇主要介紹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) ：建立一個指定的事件類型。

 方法詳解

 HTMLElement document.getElementById(elementID) ：擷取指定ID的第一個元素。

 方法詳解

 HTMLElement[] document.getElementsByClassName(className) ：擷取一個class屬性含有指定值的元素數組 。

 方法詳解

 HTMLElement[] document.getElementsByName(nameValue) ：擷取一個name屬性為指定值的元素數組。

 方法詳解

 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代碼格式設定擷取元素內的內容。

 方法詳解

 string 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。

 方法詳解

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

12	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事件，執行這代碼，元素不會被勾選和取消勾選。

 方法樣本

 void stopImmediatePropagation() ：阻止當前事件的冒泡行為並且阻止此元素上相同類型事件的後續處理函數。

 方法樣本

 void stopPropagation() ：阻止當前事件的冒泡行為。

 方法詳解

 

4.3 currentTarget 與 target 屬性的區別

currentTarget ：擷取正在處理此事件的對象。

target ：擷取觸發此事件的對象。

冒泡階段時兩者的區別： 假設body和Button元素都註冊了click事件；當點擊Button元素時，body的click事件也會觸發，此時在body的click事件內，currentTarget指向body元素，target指向Button元素。

樣本：點擊Button元素時的顯示結果

123456789

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);};

　　

 

==================================系列文章==========================================

 

 

轉載http://www.cnblogs.com/polk6/p/4957563.html

 

本篇文章： HTML DOM 對象