JavaScript DOM操作知识点示例
知识点介绍
DOM（文档对象模型）是HTML和XML文档的编程接口，它定义了文档的逻辑结构以及如何访问和更新文档的内容、结构和样式。在JavaScript中，你可以通过DOM操作来动态地修改网页的内容、结构和样式。
示例代码
下面是一个完整的HTML示例，展示了如何使用JavaScript进行DOM操作。
HTML部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>DOM操作示例</title>
<script src="script.js"></script>
</head>
<body>
<h1 id="header">原始标题</h1>
<p id="content">这是一个段落。</p>
<button id="changeButton">更改内容</button>
</body>
</html>
JavaScript部分 (script.js)
document.addEventListener("DOMContentLoaded", function() {
// 获取元素
var header = document.getElementById("header");
var content = document.getElementById("content");
var button = document.getElementById("changeButton");
// 为按钮添加点击事件监听器
button.addEventListener("click", function() {
// 修改标题内容
header.textContent = "更新后的标题";
// 修改段落内容
content.innerHTML = "<strong>更新后的内容</strong> 包含一些 <em>HTML</em> 标签。";
// 修改样式（通过修改 className）
header.className = "updated-header";
// 你还可以在CSS中定义 .updated-header 的样式，例如：
/*
.updated-header {
color: red;
font-size: 24px;
}
*/
});
});
说明
1. 我们在HTML中定义了一个标题、一个段落和一个按钮。并为JavaScript脚本文件添加了引用。
2. 在JavaScript文件中，我们使用 `document.addEventListener(“DOMContentLoaded”, function() { … })` 确保在DOM内容加载完毕后执行我们的代码。
3. 通过 `document.getElementById` 获取DOM元素。
4. 为按钮添加点击事件监听器，在点击时修改标题和段落的内容，并更新标题的样式。
结论
通过JavaScript进行DOM操作，你可以实现非常丰富的页面交互效果。理解DOM的基本概念和操作方法对于前端开发至关重要。
