JavaScript 中 document 对象详解：DOM 操作的基石257

在 JavaScript 中，document 对象是与浏览器页面内容交互的桥梁。它代表了整个 HTML 文档，提供了一系列方法和属性，允许 JavaScript 代码访问、修改和操作页面的所有元素。理解 document 对象是掌握 DOM（文档对象模型）操作的关键，也是编写动态网页和 Web 应用的必备技能。本文将深入探讨 document 对象的核心功能和常用方法。

一、document 对象的本质

document 对象是 window 对象的一个属性，它是一个树状结构的表示，精确地反映了 HTML 页面的结构。每个 HTML 元素都对应着 document 对象中的一个节点。JavaScript 通过操纵这些节点来实现对页面内容的动态修改。你可以把它想象成一棵倒置的树，根节点是 document 对象，其子节点是 <html> 元素，然后是 <head> 和 <body> 元素，依次类推，直到最底层的元素。

二、访问和操作文档元素

document 对象提供多种方法来访问和操作页面元素：
getElementById(id): 通过元素的 ID 属性获取单个元素。这是最常用的方法之一，因为它提供快速、直接的元素访问。需要注意的是，ID 必须是唯一的。
getElementsByTagName(tagName): 获取所有指定标签名的元素，返回一个 HTMLCollection 对象。HTMLCollection 是一个动态集合，这意味着它会随着 DOM 的变化而更新。如果你只需要访问一个元素，使用 getElementById 更高效。
getElementsByClassName(className): 获取所有具有指定类名的元素，同样返回一个 HTMLCollection 对象。
querySelector(selectors): 使用 CSS 选择器来获取单个元素。这是最强大的方法，可以利用 CSS 选择器的全部功能来定位元素，包括 ID、类名、标签名、属性等等。它返回一个 Element 对象。
querySelectorAll(selectors): 使用 CSS 选择器来获取所有匹配的元素，返回一个 NodeList 对象。NodeList 是一个静态集合，在查询之后不会随着 DOM 的变化而更新。

三、修改文档内容

除了访问元素，document 对象也提供方法来修改页面内容：
(): 直接向文档中写入 HTML 内容。这通常在文档加载完成之前使用，因为在文档加载完成后调用 () 会覆盖整个页面。
innerHTML 属性: 获取或设置元素的 HTML 内容。这是一个非常常用的属性，可以用来动态地修改元素的内容。
textContent 属性: 获取或设置元素的文本内容。与 innerHTML 不同的是，它只处理文本内容，不会解析 HTML 标签。
createElement(): 创建新的 HTML 元素。这个方法非常重要，可以用来动态地创建元素并添加到页面中。
appendChild(), insertBefore(), removeChild(): 这些方法用于操作 DOM 树，可以用来添加、插入和删除元素。

四、事件处理

document 对象也可以用于处理页面级别的事件，例如：
onload 事件: 在文档完全加载后触发。
onreadystatechange 事件: 跟踪文档的加载状态。
onclick, onmouseover, onmouseout 等: 处理文档级别的鼠标事件。

五、其他重要属性和方法

document 对象还有许多其他重要的属性和方法，例如：
: 返回 <body> 元素。
: 返回 <html> 元素。
: 获取或设置文档标题。
: 访问和操作 cookies。
: 访问和修改当前 URL。

六、总结

document 对象是 JavaScript 中操作 DOM 的核心。通过掌握其提供的各种方法和属性，开发者可以创建动态的、交互式的网页，实现复杂的网页功能。理解 document 对象是学习 JavaScript 的关键一步，也是成为优秀前端开发者的必备技能。建议读者在实际项目中不断练习，熟练掌握各种方法的使用，并结合其他 JavaScript 技术，例如事件监听器和异步编程，构建更加强大的 Web 应用。

2025-03-15

上一篇：JavaScript添加图片的多种方法及最佳实践

下一篇：JavaScript动态执行代码详解：eval、Function构造函数及安全风险