關於DOM知識的詳細介紹

DOM

我們知道，JavaScript是由ECMAScript + DOM + BOM組成的。 ECMAScript是JS中的一些語法，而BOM主要是瀏覽器物件（window）物件的一些相關知識的集合。而DOM，則是文檔物件相關的知識的集合。

我們知道，HTML和JS之間的互動是透過事件實現的。而DOM是針對HTML(XML)文件的一個API。因此，如果我們想要實現與使用者的交互，那麼就需要使用DOM提供的API，取得HTML元素，然後在該元素上綁定對應的事件，實現與使用者的交互。所以，對DOM的理解和掌握就顯得相當重要。

這篇文章主要基於《JavaScript高級程式涉及（三）》中的DOM相關章節，對DOM的主要知識作出一個梳理，並穿插我個人的一些理解。

節點層次

寫過HTML程式碼的地球人應該都知道，我們需要為每個元素新增縮進，然後在書寫相關的HTMl標籤和內容，最後顯示在網頁上。因此這種巢狀的HTML程式碼和內容就構成了節點層次。

對ECMAScript理解的地球人應該都知道，JS中的每一個物件都是基於一個引用類型創建的，而引用類型可以是JS原生提供的引用類型（Array、Function、RegExp、Object等等），也可以是自訂的參考類型（透過new關鍵字呼叫引用類型（也可以叫建構子））。而所有物件都是Object的實例對象，都可以繼承Object.prototype上的屬性和方法

而在DOM中，也同樣有這樣類似的機制。在DOM中，最頂層的類型是Node類型，其他所有節點都可以繼承Node類型下的屬性和方法。而Node型別其實相當於JS中的Object建構子。

既然如此，那就線看看Node類型下有哪些屬性和方法

Node型別

• 屬性(在某個特定的節點透過繼承的方式呼叫下列屬性)

• nodeType

• ##nodeName

• nodeValue

• ·············

• childNodes（指針，指向NodeList對象)

• parentNodes

• nextSibling

• previousSibling

• #firstChild

• lastChild

• #ownDocument(每個節點都只能屬於一個Document節點)

• #方法(在某個特定的節點透過繼承的方式呼叫下列方法)

• ··· 尋找節點···· ·

• 查找元素的方法位於Document類型中

• #························ ·······

• ··· 插入節點···

• appendChild(ele)

• insertBefore(ele, target)

• ························

• ··· 刪除節點···

• #removeChild(ele)

• ········ ···················

• #··· 取代節點···

• #···取代節點···

# #replaceChild(ele, target)
························

• ################################################################### # #####··· 複製節點···############cloneNode(boolean) true: 表示深複製， false: 表示淺複製########## ##························#############···· 處理文件節點··· 很少用~############normalize()################Node類型上的屬性和方法也就那麼多了，再囉嗦一次，所有的其他節點都可以繼承Node類型上的屬性和方法######Document類型######JS透過Document類型表示文件。 document物件是HTMLDocument的一個實例，表示整個HTML頁面。同時，document物件也是window物件下的屬性，因此可以將其作為全域物件來存取。 ############屬性###############document.documentElement (表示HTML元素)，同時可以透過document.childNodes[1]取得HTML元素# ###########document.body (表示body元素)############document.head (表示head元素)########### #document.compatMode (表示瀏覽器採用哪一種渲染方式，'CSS1Compat'表示標準模式, 'BackCompat'表示混雜模式)############document.charset (表示文件中實際使用的字元集，也可用來指定新字元集)############document.dataset (表示透過dataset存取自訂屬性，如document.dataset.myname)######### ####document.docType (表示元素), 存在瀏覽器相容性問題#############document.title (表示< title > 元素)######### ####··· 網頁請求···############document.URL (取得URL位址)############document.domain (取得URL中的域名，pathname)###

• document.attributes (取得某個節點的屬性，傳回NamedNodeMap對象，與NodeList類似)

• 方法

• #··· 尋找元素···

• #document.getElementById(id) 傳回該元素

• document.getElementsByTagName(classname) 傳回包含零個或多個元素的HTMLCollection對象，與NodeList物件相似

• ##document.getElementsByName(ele)傳回帶有給定name屬性的元素，同樣回傳HTMLCollection物件

• document.getElementsByClassName(className) 傳回所有符合的NodeList物件(

  可在Document類型、Element類型上呼叫該方法)

• document.querySelector(selector) selector表示CSS選擇子傳回與該模式相符的第一個元素，如果沒有找到，傳回null (

  Document類型, DocumentFragment類型, Element類型都可以呼叫此方法)

• document.querySelectorAll(selector) selector表示CSS選擇符傳回一個符合成功的NodeList物件(

  Document類型, DocumentFragment類型, Element類型都可以呼叫此方法)

• ··· 建立元素···

• document.createElement() (建立好的元素處於遊離狀態，需要透過appendChild插入)

• ··· 建立文字節點···

• document.createTextNode() (創建好的元素處於遊離狀態，需要透過appendChild插入)

• ··· 決定元素大小···

• document.getBoundingClientRect()

Element類型

• 屬性

##id
#title
lang
#className

• #方法

• getAttribute(ele) 取得某個屬性

• setAttribute(name, value) 設定某個屬性

• removeAttribute(ele) 移除某個屬性

• getElementsByTagName(ele) 取得標籤名為ele的元素

#Text類型

• 屬性

• #nodeValue | data (存取Text節點中的文字)

DocumentFragment類型

#使用：離線操作DOM元素，避免DOM節點大量的重排和重繪，造成效能問題

• 方法

• document.createDocumentFragment() (表示建立文件片段)

##NodeList物件

瞭解NodeList 及其「近親」NamedNodeMap 和HTMLCollection，是從整體上透徹理解DOM 的關鍵所在。這三個集合都是「動態的」；換句話說，每當文件結構發生變化時，它們都會得到更新。因此，它們總是會保存著最新、最準確的資訊。從本質上來說，所有NodeList 物件都是在存取 DOM 文件時即時執行的查詢。

元素大小

偏移量(offset dimension)

要想知道某個元素在頁面上的偏移量，將這個元素的offsetLeft 和offsetTop 與其offsetParent的相同屬性相加，如此循環直至根元素，就可以得到一個基本上準確的值。以下兩個函數就可以用來分別取得元素的左和上偏移。

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
}

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
}

客戶區大小(client dimension)

要確定瀏覽器視窗大小，可以使用 document.documentElement 或 document.body（在IE7 之前的版本中）的clientWidth 和 clientHeight。

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
}

捲動大小(scroll dimension)

·················

##確定元素大小

document.getBoundingClientRect()方法， 傳回一個矩形物件。包含4個屬性：left、top、right和bottom。這些屬性給出了元素在頁面中相對於視窗的位置。

以上是關於DOM知識的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！