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 |
