在 HTML DOM 中，你可以通过多种方式来修改文档的内容、结构和样式。以下是一些常见的 HTML DOM 修改操作：
- 修改元素内容：你可以通过修改元素的 innerHTML 属性来改变元素的内容。
var element = document.getElementById("myElement"); element.innerHTML = "New content"; - 修改元素属性：你可以通过修改元素的属性来改变元素的行为或样式。
var element = document.getElementById("myElement"); element.setAttribute("class", "newClass"); - 添加新元素：你可以通过 createElement() 和 appendChild() 方法来动态地创建和添加新元素。
var newElement = document.createElement("div"); newElement.innerHTML = "New element"; document.body.appendChild(newElement); - 移除元素：你可以通过 removeChild() 方法来移除文档中的元素。
var elementToRemove = document.getElementById("elementToRemove"); elementToRemove.parentNode.removeChild(elementToRemove); - 修改样式：你可以通过修改元素的 style 属性来改变元素的样式。
var element = document.getElementById("myElement"); element.style.color = "red"; element.style.fontSize = "20px"; - 事件处理：你可以通过添加事件监听器来响应用户操作，从而改变文档的行为。
var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Button clicked!"); });
这些是一些常见的 HTML DOM 修改操作，通过它们你可以动态地改变文档的内容、结构和行为，实现交互性和动态性的网页应用程序。
当然，请看下面的例子，它演示了如何通过 HTML DOM 修改文档的内容、结构和样式：
<!DOCTYPE html>
<html>
<head>
<title>DOM Modification Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<p id="paragraph">This is a paragraph.</p>
<button id="changeButton">Change Content</button>
</div>
<script>
// 获取需要操作的元素
var paragraph = document.getElementById("paragraph");
var changeButton = document.getElementById("changeButton");
// 添加按钮点击事件监听器
changeButton.addEventListener("click", function() {
// 修改元素内容
paragraph.innerHTML = "Paragraph content changed!";
// 修改元素样式
paragraph.className = "highlight";
// 创建新元素并添加到文档中
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "This is a new paragraph.";
document.getElementById("container").appendChild(newParagraph);
});
</script>
</body>
</html>
这个例子展示了一个简单的 HTML 页面，其中包含一个段落和一个按钮。当点击按钮时，通过 JavaScript 修改了段落的内容、样式，并动态地添加了一个新的段落元素到文档中。这个例子演示了如何使用 HTML DOM 修改文档的内容、结构和样式，实现动态的页面交互效果。