好的，以下是一个简单的 HTML DOM 实例，展示了如何通过 JavaScript 操作 DOM 来实现一个基本的任务列表应用：
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<style>
.completed {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="taskInput" placeholder="Enter task...">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
function addTask() {
var input = document.getElementById("taskInput");
var task = input.value.trim();
if (task === "") {
alert("Please enter a task!");
return;
}
var taskList = document.getElementById("taskList");
var newTaskItem = document.createElement("li");
newTaskItem.textContent = task;
newTaskItem.onclick = function() {
this.classList.toggle("completed");
};
taskList.appendChild(newTaskItem);
input.value = "";
}
</script>
</body>
</html>
这个示例展示了一个简单的任务列表应用。用户可以在输入框中输入任务，然后点击“Add Task”按钮将任务添加到任务列表中。每次点击任务列表中的任务项时，它的样式会切换为删除线，表示任务已完成。
这个示例演示了如何使用 HTML DOM 操作文档结构和样式，以及如何添加事件监听器来实现交互性功能。