JavaScript HTML DOM 文檔

HTML DOM 文檔對象是您的網頁中所有其他對象的擁有者。

HTML DOM Document 對象

文檔對象代表您的網頁。

如果您希望訪問 HTML 頁面中的任何元素，那么您總是從訪問 document 對象開始。

下面是一些如何使用 document 對象來訪問和操作 HTML 的實例。

查找 HTML 元素

方法 描述
document.getElementById(id) 通過元素 id 來查找元素
document.getElementsByTagName(name) 通過標簽名來查找元素
document.getElementsByClassName(name) 通過類名來查找元素

改變 HTML 元素

方法 描述
element.innerHTML = new html content 改變元素的 inner HTML
element.attribute = new value 改變 HTML 元素的屬性值
element.setAttribute(attribute, value) 改變 HTML 元素的屬性值
element.style.property = new style 改變 HTML 元素的樣式

添加和刪除元素

方法 描述
document.createElement(element) 創建 HTML 元素
document.removeChild(element) 刪除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替換 HTML 元素
document.write(text) 寫入 HTML 輸出流

添加事件處理程序

方法 描述
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件處理程序

查找 HTML 對象

首個 HTML DOM Level 1 (1998)，定義了 11 個 HTML 對象、對象集合和屬性。它們在 HTML5 中仍然有效。

后來，在 HTML DOM Level 3，加入了更多對象、集合和屬性。

屬性 描述 DOM
document.anchors 返回擁有 name 屬性的所有 <a> 元素。 1
document.applets 返回所有 <applet> 元素（HTML5 不建議使用） 1
document.baseURI 返回文檔的絕對基準 URI 3
document.body 返回 <body> 元素 1
document.cookie 返回文檔的 cookie 1
document.doctype 返回文檔的 doctype 3
document.documentElement 返回 <html> 元素 3
document.documentMode 返回瀏覽器使用的模式 3
document.documentURI 返回文檔的 URI 3
document.domain 返回文檔服務器的域名 1
document.domConfig 廢棄。返回 DOM 配置 3
document.embeds 返回所有 <embed> 元素 3
document.forms 返回所有 <form> 元素 1
document.head 返回 <head> 元素 3
document.images 返回所有 <img> 元素 1
document.implementation 返回 DOM 實現 3
document.inputEncoding 返回文檔的編碼（字符集） 3
document.lastModified 返回文檔更新的日期和時間 3
document.links 返回擁有 href 屬性的所有 <area> 和 <a> 元素 1
document.readyState 返回文檔的（加載）狀態 3
document.referrer 返回引用的 URI（鏈接文檔） 1
document.scripts 返回所有 <script> 元素 3
document.strictErrorChecking 返回是否強制執行錯誤檢查 3
document.title 返回 <title> 元素 1
document.URL 返回文檔的完整 URL 1