html學習筆記-DOM

標籤：

 

html學習筆記-DOMTable of Contents

• 1. 什麼是 DOM？
• 2. DOM 節點
• 3. DOM 方法
• 4. DOM 屬性
• 5. DOM 訪問
• 6. DOM 修改
• 7. DOM 事件

1 什麼是 DOM？

DOM 是 W3C （全球資訊網聯盟）的標準。
DOM 定義了訪問 HTML 和 XML 文檔的標準：
“W3C 文件物件模型 （ DOM ） 是中立於平台和語言的介面，它允許程式和指令碼動態地訪問和更新文檔的內容、結構和樣式。 ”
W3C DOM 標準被分為 3 個不同的部分：
• 核心 DOM - 針對任何結構化文檔的標準模型
• XML DOM - 針對 XML 文檔的標準模型
• HTML DOM - 針對 HTML 文檔的標準模型
編者註： DOM 是 Document Object Model （文件物件模型）的縮寫。

2 DOM 節點

在 HTML DOM 中，所有事物都是節點。DOM 是被視為節點樹的 HTML。

• 整個文檔是一個文檔節點
  
• 每個 HTML 元素是元素節點
  
• HTML 元素內的文本是文本節點
  
• 每個 HTML 屬性是屬性節點
  
• 注釋是注釋節點
  

節點父、子和同胞

DOM 處理中的常見錯誤是希望元素節點包含文本。

• 在本例中：<title>DOM 教程</title>，元素節點 <title>，包含值為 "DOM 教程" 的文本節點。
  
• 可通過節點的 innerHTML 屬性來訪問文本節點的值。
  

3 DOM 方法

方法是我們可以在節點（HTML 元素）上執行的動作。

編程介面

• 可通過 JavaScript （以及其他程式設計語言）對 HTML DOM 進行訪問。
  
• 所有 HTML 元素被定義為對象，而編程介面則是對象方法和對象屬性。
  
• 方法是您能夠執行的動作（比如添加或修改元素）。
  
• 屬性是您能夠擷取或設定的值（比如節點的名稱或內容）。
  

一些常用的 HTML DOM 方法：

• getElementById(id) - 擷取帶有指定 id 的節點（元素）
  
• appendChild(node) - 插入新的子節點（元素）
  
• removeChild(node) - 刪除子節點（元素）
  

一些常用的 HTML DOM 屬性：

• innerHTML - 節點（元素）的文本值
  
• parentNode - 節點（元素）的父節點
  
• childNodes - 節點（元素）的子節點
  
• attributes - 節點（元素）的屬性節點
  

4 DOM 屬性

屬性是節點（HTML 元素）的值，您能夠擷取或設定。

編程介面

• 可通過 JavaScript （以及其他程式設計語言）對 HTML DOM 進行訪問。
  
• 所有 HTML 元素被定義為對象，而編程介面則是對象方法和對象屬性。
  
• 方法是您能夠執行的動作（比如添加或修改元素）。
  
• 屬性是您能夠擷取或設定的值（比如節點的名稱或內容）。
  

innerHTML 屬性

• 擷取元素內容的最簡單方法是使用 innerHTML 屬性。
  
• innerHTML 屬性對於擷取或替換 HTML 元素的內容很有用。
  

nodeName 屬性

• nodeName 是唯讀
  
• 元素節點的 nodeName 與標籤名相同
  
• 屬性節點的 nodeName 與屬性名稱相同
  
• 文本節點的 nodeName 始終是 #text
  
• 文檔節點的 nodeName 始終是 #document
  

nodeValue 屬性

• 元素節點的 nodeValue 是 undefined 或 null
  
• 文本節點的 nodeValue 是文本本身
  
• 屬性節點的 nodeValue 是屬性值
  

nodeType 屬性
nodeType 屬性返回節點的類型。nodeType 是唯讀。

元素類型	NodeType
元素	1
屬性	2
文本	3
注釋	8
文檔	9

5 DOM 訪問

訪問 HTML DOM - 尋找 HTML 元素,訪問 HTML 元素等同於訪問節點

• 通過使用 getElementById() 方法
  
• 通過使用 getElementsByTagName() 方法
  
• 通過使用 getElementsByClassName() 方法
  

6 DOM 修改

修改 HTML = 改變元素、屬性、樣式和事件。
使用事件
………

7 DOM 事件

• 當使用者點擊滑鼠時
  
• 當網頁已載入時
  
• 當圖片已載入時
  
• 當滑鼠移動到元素上時
  
• 當輸入欄位被改變時
  
• 當 HTML 表單被提交時
  
• 當使用者觸發按鍵時
  

Author: galaxy

Created: 2015-09-23 Wed 15:17

Emacs 24.4.1 (Org mode 8.2.10)

Validate

 

html學習筆記-DOM