操作 DOM（Document Object Model）是 JavaScript 中常见的任务之一，它允许您通过 JavaScript 动态地修改 HTML 页面的内容、结构和样式。以下是一些常见的操作 DOM 的方法：
1. 选择元素：
document.getElementById(id)：通过元素的 id 属性选择单个元素。document.getElementsByClassName(className)：通过元素的 class 属性选择一组元素。document.getElementsByTagName(tagName)：通过元素的标签名选择一组元素。document.querySelector(selector)：通过 CSS 选择器选择单个元素。document.querySelectorAll(selector)：通过 CSS 选择器选择一组元素。
2. 操作元素内容和属性：
element.innerHTML：获取或设置元素的 HTML 内容。element.textContent：获取或设置元素的文本内容。element.getAttribute(name)：获取元素的指定属性值。element.setAttribute(name, value)：设置或添加元素的属性值。element.style.property：获取或设置元素的 CSS 样式属性。
3. 创建、插入和删除元素：
document.createElement(tagName)：创建新的 HTML 元素。parentNode.appendChild(node)：将节点添加为父节点的最后一个子节点。parentNode.insertBefore(newNode, referenceNode)：在父节点的子节点列表中，将 new 节点插入到 reference 节点的前面。parentNode.removeChild(node)：从父节点中移除指定的子节点。
4. 添加事件监听器：
element.addEventListener(event, function)：向元素添加事件监听器。element.removeEventListener(event, function)：从元素移除事件监听器。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation</title>
</head>
<body>
<div id="container">
<h1>Hello, DOM!</h1>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script>
// 选择元素
let container = document.getElementById("container");
let listItems = document.querySelectorAll("#list li");
// 操作元素内容和属性
container.innerHTML += "<p>This is a paragraph.</p>";
listItems.forEach(item => {
item.textContent += " (updated)";
});
// 创建、插入和删除元素
let newListItem = document.createElement("li");
newListItem.textContent = "Item 4";
document.getElementById("list").appendChild(newListItem);
let firstListItem = document.querySelector("#list li:first-child");
let referenceListItem = document.querySelector("#list li:nth-child(2)");
let newListItem2 = document.createElement("li");
newListItem2.textContent = "Item 0";
document.getElementById("list").insertBefore(newListItem2, referenceListItem);
document.getElementById("list").removeChild(firstListItem);
// 添加事件监听器
container.addEventListener("click", () => {
console.log("Container clicked!");
});
listItems.forEach(item => {
item.addEventListener("click", () => {
console.log(item.textContent + " clicked!");
});
});
</script>
</body>
</html>
这个示例演示了如何使用 JavaScript 操作 DOM，包括选择元素、操作内容和属性、创建、插入和删除元素以及添加事件监听器。通过使用这些方法，您可以实现丰富且交互性强的网页应用程序。