文章目录
JavaScript HTML DOM Document
HTML DOM 文档对象是网页中所有其他对象的所有者。
HTML DOM 文档对象
文档对象代表您的网页。
如果您想访问 HTML 页面中的任何元素，您总是从访问文档对象开始。
以下是一些如何使用文档对象访问和操作 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 输出stream |
添加事件处理程序
| 方法 | 描述 |
|---|---|
| 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 | ` |
总结
本文介绍了JavaScript HTML DOM Document对象的使用，如有问题欢迎私信和评论
标签：返回,JavaScript,DOM,必知,元素,HTML,文档,3document From： https://blog.csdn.net/qq_24018193/article/details/144300572