JavaScript-HTML-DOM-文档详解
目录
JavaScript HTML DOM 文档详解
什么是HTML DOM文档对象？
HTML DOM（文档对象模型）文档对象是网页中所有其他对象的拥有者。它代表了整个网页，是访问和操作HTML元素的起点。当浏览器加载HTML页面时，会创建一个document对象，包含页面上所有的元素。
为什么需要DOM文档对象？
- 提供访问和修改网页内容的接口
- 允许动态更新页面内容
- 实现用户交互功能
- 使网页从静态变为动态
1，查找HTML元素
1）getElementById()
通过元素的id属性查找元素，返回单个元素：
<div id="header">网站标题</div>
<script>
const headerElement = document.getElementById('header');
headerElement.style.color = "blue";
</script>2）getElementsByTagName()
通过标签名查找元素，返回元素集合：
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
<script>
const listItems = document.getElementsByTagName("li");
for (let i = 0; i < listItems.length; i++) {
listItems[i].style.fontWeight = "bold";
}
</script>3）getElementsByClassName()
通过类名查找元素，返回元素集合：
<p class="highlight">重要内容1</p>
<p class="highlight">重要内容2</p>
<script>
const highlights = document.getElementsByClassName("highlight");
for (let element of highlights) {
element.style.backgroundColor = "yellow";
}
</script>2，改变HTML元素
1）修改元素内容
document.getElementById("demo").innerHTML = "新内容";2）修改元素属性
// 方法1：直接设置属性
document.getElementById("myImage").src = "new-image.jpg";
// 方法2：使用setAttribute
document.getElementById("myLink").setAttribute("href", "https://new-url.com");3）修改元素样式
const element = document.getElementById("myElement");
element.style.color = "red";
element.style.fontSize = "20px";
element.style.marginTop = "10px";3，添加和删除元素
1）创建新元素
const newDiv = document.createElement("div");
newDiv.innerHTML = "<p>这是新创建的元素</p>";2）添加元素
// 添加到父元素末尾
document.body.appendChild(newDiv);
// 添加到特定位置
const parent = document.getElementById("container");
const referenceElement = document.getElementById("item2");
parent.insertBefore(newDiv, referenceElement);3）删除元素
const elementToRemove = document.getElementById("oldElement");
elementToRemove.parentNode.removeChild(elementToRemove);4，添加事件处理程序
<button id="myButton">点击我</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("按钮被点击了！");//弹窗模式
this.style.backgroundColor = "green";//点击之后变绿色
};
</script>5，常用HTML文档属性
// 获取文档标题
console.log(document.title);
// 获取文档URL
console.log(document.URL);
// 获取所有表单
const forms = document.forms;
console.log(forms.length);
// 获取所有图片
const images = document.images;
console.log(images.length);
// 获取文档最后修改时间
console.log(document.lastModified);6，完整示例：动态任务列表
<!DOCTYPE html>
<html>
<head>
<title>DOM操作示例</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
.task-list { list-style: none; padding: 0; }
.task-item { background: #f5f5f5; padding: 10px; margin: 5px 0; border-radius: 4px; }
.completed { text-decoration: line-through; color: #888; }
.btn { background: #4CAF50; color: white; border: none; padding: 8px 16px; cursor: pointer; }
.btn:hover { background: #45a049; }
</style>
</head>
<body>
<h1>任务列表</h1>
<div>
<input type="text" id="newTask" placeholder="输入新任务">
<button class="btn" onclick="addTask()">添加任务</button>
</div>
<ul id="taskList" class="task-list"></ul>
<script>
// 添加新任务
function addTask() {
const input = document.getElementById("newTask");
const taskText = input.value.trim();
if (taskText) {
const taskList = document.getElementById("taskList");
const newTask = document.createElement("li");
newTask.className = "task-item";
newTask.innerHTML = `
${taskText}
<button class="btn" onclick="completeTask(this)">完成</button>
<button class="btn" onclick="removeTask(this)" style="background:#f44336">删除</button>
`;
taskList.appendChild(newTask);
input.value = "";
}
}
// 标记任务为完成
function completeTask(button) {
const taskItem = button.parentElement;
taskItem.classList.add("completed");
button.disabled = true;
}
// 删除任务
function removeTask(button) {
const taskItem = button.parentElement;
taskItem.remove();
}
</script>
</body>
</html>总结
HTML DOM文档对象是JavaScript操作网页的核心接口。通过它，可以：
- 查找页面中的任何元素
- 修改元素内容、属性和样式
- 动态添加或删除元素
- 响应用户交互事件
掌握DOM操作是前端开发的基础，能够创建动态、交互式的网页应用。