我們知道，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類型下有哪些屬性和方法
屬性(在某個特定的節點透過繼承的方式呼叫下列屬性)
nodeType
#方法(在某個特定的節點透過繼承的方式呼叫下列方法)
document.attributes (取得某個節點的屬性，傳回NamedNodeMap對象，與NodeList類似)
方法
#··· 尋找元素···
#document.getElementById(id) 傳回該元素
document.getElementsByTagName(classname) 傳回包含零個或多個元素的HTMLCollection對象，與NodeList物件相似
可在Document類型、Element類型上呼叫該方法)
Document類型, DocumentFragment類型, Element類型都可以呼叫此方法)
Document類型, DocumentFragment類型, Element類型都可以呼叫此方法)
#方法
getAttribute(ele) 取得某個屬性
setAttribute(name, value) 設定某個屬性
removeAttribute(ele) 移除某個屬性
getElementsByTagName(ele) 取得標籤名為ele的元素
屬性
#nodeValue | data (存取Text節點中的文字)
#使用：離線操作DOM元素，避免DOM節點大量的重排和重繪，造成效能問題
方法
document.createDocumentFragment() (表示建立文件片段)
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;
}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
};
}
}##確定元素大小
以上是關於DOM知識的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
