JavaScript HTML DOM Document
HTML DOM document 物件是您網頁中所有其他物件的擁有者。
HTML DOM Document 物件
document 物件代表您的網頁。
如果您想訪問網頁中的任何元素，您總是從訪問 document 物件開始。
以下是一些關於如何使用 document 物件訪問和操作 HTML 的示例。
查詢 HTML 元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 透過元素 id 查詢元素 |
| document.getElementsByTagName(name) | 透過標籤名查詢元素 |
| document.getElementsByClassName(name) | 透過類名查詢元素 |
更改 HTML 元素
| 屬性 | 描述 |
|---|---|
| element.innerHTML = new html content | 更改元素的內部 HTML |
| element.attribute = new value | 更改 HTML 元素的屬性值 |
| element.style.property = new style | 更改 HTML 元素的樣式 |
| 方法 | 描述 |
| element.setAttribute(attribute, value) | 更改 HTML 元素的屬性值 |
新增和刪除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 建立 HTML 元素 |
| document.removeChild(element) | 刪除 HTML 元素 |
| document.appendChild(element) | 新增 HTML 元素 |
| document.replaceChild(new, old) | 替換 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 | 已棄用 | 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 | 已廢棄。 | 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 |
