DOM Document 对象

JavaScript HTML DOM Document

HTML DOM (文档对象模型 Document Object Model) 将 HTML 或 XML 文档表示为一个由对象组成的树形结构。document 对象是这个结构的入口点，代表整个网页。

HTML DOM document 对象

在 HTML DOM 中，document 对象是文档树的根节点，代表你的网页。

它是页面中所有其他节点（nodes）（elements（元素）、text（文本）、comments（注释）等）的所有者。要使用 JavaScript 访问或操作 HTML 页面的任何部分，通常从与 document 对象交互开始。

以下是使用 document 对象查找和操作 HTML 元素的常见方法。

查找 HTML 元素

现代 JavaScript 提供了几种强大的方法来选择 HTML 元素：

方法	描述
document.getElementById(id)	通过元素的唯一 id 属性（attribute）查找元素。返回单个元素对象（element object）或 null。
document.querySelector(cssSelector)	查找第一个匹配指定 CSS 选择器（CSS selector）的元素。返回单个元素对象或 null。
document.querySelectorAll(cssSelector)	查找所有匹配指定 CSS 选择器的元素。返回一个静态 NodeList (类似数组的集合 array-like collection)。
document.getElementsByTagName(tagName)	查找所有具有给定标签名（tag name）的元素。返回一个实时的 HTMLCollection。
document.getElementsByClassName(className)	查找所有具有给定类名（class name）的元素。返回一个实时的 HTMLCollection。

querySelector 和 querySelectorAll 因其在 CSS 选择器方面的灵活性而常被优先使用。

改变 HTML 元素

选中一个元素后，你可以修改其内容、属性和样式：

属性/方法	描述
element.innerHTML = newHtmlContent	改变元素内部的 HTML 内容（标记 markup）。如果 newHtmlContent 来自不受信任的源，请谨慎使用，因为它存在 XSS 风险。
element.textContent = newTextContent	改变元素及其后代元素（descendants）的文本内容。对于设置纯文本更安全，因为它会自动转义 HTML。
element.setAttribute(attributeName, value)	设置指定元素上属性的值。如果属性已存在，则更新其值；否则添加一个新属性。
element.style.property = value	改变内联 CSS 样式属性（例如，element.style.color = "red"）。对于更复杂的样式，更推荐管理 CSS 类。
element.classList.add('className')	为元素添加一个 CSS 类。
element.classList.remove('className')	从元素移除一个 CSS 类。
element.classList.toggle('className')	切换元素上的 CSS 类（如果存在则移除，如果不存在则添加）。

添加和删除元素

你可以动态地创建、添加和移除 HTML 元素：

方法	描述
document.createElement(tagName)	创建一个指定标签类型的新 HTML 元素。
parentElement.appendChild(childElement)	将 childElement 作为 parentElement 的最后一个子元素添加。
parentElement.insertBefore(newElement, referenceElement)	将 newElement 插入到 parentElement 中 referenceElement 之前。
element.append(...nodesOrDOMStrings)	现代方法，在 element 的最后一个子元素后插入 nodes 或 DOMStrings。
element.prepend(...nodesOrDOMStrings)	现代方法，在 element 的第一个子元素前插入 nodes 或 DOMStrings。
element.before(...nodesOrDOMStrings)	现代方法，在 element 本身之前插入 nodes 或 DOMStrings (作为兄弟节点 sibling)。
element.after(...nodesOrDOMStrings)	现代方法，在 element 本身之后插入 nodes 或 DOMStrings (作为兄弟节点 sibling)。
parentElement.removeChild(childElement)	从 parentElement 移除 childElement。
element.remove()	现代方法，将 element 本身从 DOM 中移除。
parentElement.replaceChild(newChild, oldChild)	在 parentElement 中用 newChild 替换 oldChild。
document.write(text)	直接写入 HTML 输出流。在文档加载完成后强烈不推荐使用，因为它会覆盖整个页面。通常应避免使用。

添加事件处理程序

响应用户交互（如点击、鼠标移动、按键）的推荐方法是使用 addEventListener：

方法	描述
element.addEventListener(eventType, function, useCapture)	为元素附加一个事件处理函数（event handler function），用于处理指定的事件类型（例如，‘click’, ‘mouseover’）。useCapture 是一个可选的布尔值（默认为 false）。
element.removeEventListener(eventType, function, useCapture)	移除先前使用 addEventListener 附加的事件处理程序（event handler）。

Example: document.getElementById('myButton').addEventListener('click', function() { alert('Button clicked!'); });

虽然存在 element.onclick = function(){...} 等旧方法，但 addEventListener 更受欢迎，因为它允许为同一个事件附加多个处理程序，对事件传播阶段（event propagation phase）（捕获 capturing/冒泡 bubbling）提供了更多控制，并且与现代事件处理模式更一致。

常见的 document 属性

document 对象有许多属性提供有关文档的信息：

属性	描述
document.body	返回当前文档的 <body> 元素。
document.head	返回当前文档的 <head> 元素。
document.documentElement	返回文档的根元素（root element）（通常是 <html> 元素）。
document.title	获取或设置文档的标题（<title> 标签内的文本）。
document.URL	返回文档的完整 URL。
document.cookie	获取或设置与文档关联的 cookies。对于现代应用程序，建议考虑 Web Storage (localStorage, sessionStorage) 或更健壮的 cookie 管理技术。
document.forms	返回文档中所有 <form> 元素的 HTMLCollection。
document.images	返回文档中所有 <img> 元素的 HTMLCollection。
document.links	返回所有 <a> (带 href) 和 <area> 元素的 HTMLCollection。
document.scripts	返回所有 <script> 元素的 HTMLCollection。
document.readyState	返回文档的加载状态（例如，‘loading’, ‘interactive’, ‘complete’）。
document.characterSet	返回文档正在使用的字符集（character set）（编码 encoding）。
document.doctype	返回当前文档的文档类型定义（Document Type Definition (DTD)）。

像 document.applets 这样的属性已废弃（deprecated），不应使用。DOM 规范是一个持续更新的标准（living standard），因此请始终查阅最新的 MDN 文档获取最新信息。