DOM

DOM簡介:

文件檔物件模型DOM(Document Object Module) - 定義使用者操作文件檔物件的介面，最常與Javascript建立溝通的橋樑並擷取頁面元素及屬性。

DOM的節點:

元素節點(element node) - <html>、<body>、<meta>、<h2>、<p>、<li>等都是元素節點；元素節點可以包含其它元素，例:<ul>都包含了<li>，唯一沒有被包含的就只有根節點<html>。

文字節點(text node) - 展示的內容即為文字節點，例<h2>內容</h2>，被<h2>標記中的文字"內容", 此為文字節點。

屬性節點(attribute node) - title、alt、href、src、class、id、style等都是屬性節點。


DOM範例結構圖:
<html>
   <head>
       <title>HTML DOM</title>
   </head>
   <body>
       <h1>Document Object Module</h1>
       <a href="#">HTML</a>
   </body>
</html>

DOM節點樹


node常用的屬性和方法:

attributes - 如果該節點是一個Element，則以NamedNodeMap形式返回該元素的屬性
childNodes - 以Node[]的形式存放當前節點的子節點。如果沒有，返回空數組
firstChild - 以Node的形式返回當前節點的第一個子節點，如沒有返回null
lastChild - 以Node的形式返回當前節點的最後一個子節點，如沒有返回null
nextSibling - 以Node的形式返回當前節點的兄弟下一個節點，如沒有返回null
nodeName - 節點的名字，Element節點則代表Element的標記名稱
nodeType - 代表節點的類型
parentNode - 以Node的形式返回當前節點的父親節點，如沒有返回null
previousSibling - 以Node的形式返回緊挨當前節點，位於它之前的兄弟節點，如沒有返回null

appendChild() - 通過把一個節點增加到當前節點的childNodes[]組，給文檔樹增加節點
cloneNode() - 複製當前節點，或當前節點以及它的所有子節點
hasChildNodes() - 如果當前節點擁有子節點，則將返回true
insertBefore() - 給文檔樹插入一個節點，位置在當前節點的指定子節點之前，如果該節點已經存在，則刪除它在插入到它的位置
removeChild() - 從文檔樹中刪除並返回指定的子節點
replaceChild() - 從文檔樹中刪除並返回指定的子節點，用另一個節點替換它
訪問節點最常用的方式:
getElementById() - 獲取某個指定的值的元素。
getElementsByTagName() - 獲取包含某個相同標籤的元素的NodeList。

設定節點屬性方式:
getAttribute() - 查詢元素節點的屬性名稱，僅接受一個參數。
setAttribute() - 設定元素節點的屬性名稱，接受二個參數(屬性名稱，修改的值)。

建立和新增節點:
createElement() - 建立元素節點。
createTextNode() - 建立文字節點。

刪除節點:
removeChild() - 通常刪除節點是透過父節點來刪除子節點。

替換節點:
replaceChild() - 通常針對欲替換節點的父節點來操作。接受二個參數(新節點，目標節點)。

特定節點"前"插入節點:
insertBefore() - 通常針對欲插入節點的父節點來操作。接受二個參數(新節點，目標節點)。

建立文件檔碎片，以提高頁面效率:
createDocumentFragment() - 建立文件檔碎片，用意是提高頁面效率。

非標準DOM innerHTML屬性:
innerHTML - 該屬性可以讀取內容，同時還可以設置內容。

修改CSS類別
className - 可以修改替換一個節點的CSS類別。若採用追加CSS類別的話，前提是保證CSS類別中的各個屬性與原先的屬性不重複。

參考資料:


Comments