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 = 新的 html 内容 | 更改元素的内部 HTML |
| element.attribute = 新值 | 更改 HTML 元素的属性值 |
| element.style.property = 新样式 | 更改 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 级别 1 (1998) 定义了 11 个 HTML 对象、对象集合和属性。这些在 HTML5 中仍然有效。
后来，在 HTML DOM 级别 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 |
