Latest web development tutorials

HTML DOM 方法

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


編程接口

可通過JavaScript (以及其他編程語言)對HTML DOM 進行訪問。

所有HTML 元素被定義為對象,而編程接口則是對象方法和對象屬性。

方法是您能夠執行的動作(比如添加或修改元素)。

屬性是您能夠獲取或設置的值(比如節點的名稱或內容)。


getElementById() 方法

getElementById() 方法返回帶有指定ID 的元素:

實例

var element=document.getElementById("intro");

嘗試一下»


HTML DOM 對象- 方法和屬性

一些常用的HTML DOM 方法:

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

一些常用的HTML DOM 屬性:

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

您將在本教程的下一章中學到更多有關屬性的知識。


現實生活中的對象

某個人是一個對象。

人的方法可能是eat(), sleep(), work(), play() 等等。

所有人都有這些方法,但會在不同時間執行它們。

一個人的屬性包括姓名、身高、體重、年齡、性別等等。

所有人都有這些屬性,但它們的值因人而異。


一些DOM 對象方法

這裡提供一些您將在本教程中學到的常用方法:

方法 描述
getElementById() 返回帶有指定ID 的元素。
getElementsByTagName() 返回包含帶有指定標籤名稱的所有元素的節點列表(集合/節點數組)。
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。
appendChild() 把新的子節點添加到指定節點。
removeChild() 刪除子節點。
replaceChild() 替換子節點。
insertBefore() 在指定的子節點前面插入新的子節點。
createAttribute() 創建屬性節點。
createElement() 創建元素節點。
createTextNode() 創建文本節點。
getAttribute() 返回指定的屬性值。
setAttribute() 把指定屬性設置或修改為指定的值。