在 Web 开发中，文档对象模型（DOM）是一种用于访问和操作 HTML 和 XML 文档的编程接口。DOM 的核心是 document 对象，它代表整个文档内容并提供了操作文档的方法和属性。本文将介绍 document 对象的一些重要功能，并展示相关的代码示例。
获取元素节点
document 对象提供了多种方法来获取 HTML 文档中的元素节点。以下是几个常用的方法示例：
javascript // 通过 ID 获取元素节点let elementById = document.getElementById("myElement"); // 通过标签名获取元素节点let elementsByTagName = document.getElementsByTagName("p"); // 通过类名获取元素节点let elementsByClassName = document.getElementsByClassName("myClass"); // 通过选择器获取元素节点let elementBySelector = document.querySelector("#myElement");let elementsBySelectorAll = document.querySelectorAll(".myClass");
在上述代码中，我们使用了 getElementById 方法通过元素的 ID 获取对应的元素节点。getElementsByTagName 方法通过标签名获取一组元素节点。getElementsByClassName 方法可以通过类名获取元素节点的集合。querySelector 方法通过选择器获取第一个匹配的元素节点，而 querySelectorAll 方法则返回所有匹配的元素节点列表。
操作元素节点
document 对象允许我们对元素节点进行各种操作。以下是几个示例：
javascript // 创建新的元素节点let newElement = document.createElement("div"); // 设置元素的属性 newElement.setAttribute("id", "newDiv"); newElement.setAttribute("class", "myDiv"); // 添加子节点document.body.appendChild(newElement); // 移除子节点document.body.removeChild(newElement); // 修改元素的样式 newElement.style.backgroundColor = "red"; newElement.style.width = "200px";
在上述代码中，我们使用 createElement 方法创建了一个新的 div 元素节点，并使用 setAttribute 方法设置了其 ID 和类名属性。通过 appendChild 方法，我们将新元素节点添加为 body 元素的子节点。使用 removeChild 方法可以将元素节点从文档中移除。通过修改 style 对象的属性，我们可以改变元素节点的样式。
操作文档内容
document 对象还提供了一些方法和属性，用于操作文档内容。以下是几个示例：
javascript // 获取和修改元素的文本内容let elementText = document.getElementById("myElement").textContent;document.getElementById("myElement").textContent = "New content"; // 获取和修改元素的 HTML 内容let elementHTML = document.getElementById("myElement").innerHTML;document.getElementById("myElement").innerHTML = "<strong>New content</strong>"; // 创建文本节点并插入到元素中let textNode = document.createTextNode("Some text");document.getElementById("myElement").appendChild(textNode);
在上述代码中，通过 textContent 属性我们可以获取或修改元素节点的文本内容。使用 innerHTML 属性可以获取或设置元素节点的 HTML 内容。通过 createTextNode 方法，我们可以创建一个文本节点，并通过 appendChild 方法将其插入到指定元素节点中。
通过上述示例代码，我们深入探讨了 document 对象的一些关键功能。document 对象是 DOM 的核心，提供了访问和操作文档内容的方法和属性。通过使用这些方法和属性，我们可以轻松地获取元素节点、操作元素内容以及修改文档的结构。这些功能使得我们能够构建动态和交互式的 Web 页面。
