掌握 DOM 操作：让你的网页动起来
文章目录
- 前言
- 一、什么是 DOM？
- 二、DOM 树的结构
- 三、使用 JavaScript 操作 DOM
- 总结
前言
在现代 Web 开发中，动态交互几乎是每个网站的标配。而这种交互的实现，离不开 DOM（Document Object Model） 的操作。本次课程深入讲解了 DOM 的基础知识以及如何使用 JavaScript 操作 DOM，让我们通过详细的总结和实战案例，带你快速掌握这项核心技能！
一、什么是 DOM？
DOM（文档对象模型） 是一种以树状结构表示网页内容的编程接口。通过 DOM，我们可以使用 JavaScript 对网页的结构、样式和内容进行动态修改。
DOM 的特点
- 以树状结构表示： 每个 HTML 元素都是树上的一个节点。
- 可编程： 通过 JavaScript 操作 DOM，动态修改网页内容。
- 实时更新： 所有 DOM 操作都会立即反映在网页上。
二、DOM 树的结构
DOM 的核心是将 HTML 文档解析成树状结构。以下是一个简单的 HTML 示例及其对应的 DOM 树结构：
示例 HTML
<!DOCTYPE html>
<html><head><title>My Website</title></head><body><h1>Hello World</h1><p>Wollongong</p></body>
</html>
对应的 DOM 树
Document
├── <html>
│ ├── <head>
│ │ └── <title> "My Website"
│ └── <body>
│ ├── <h1> "Hello World"
│ └── <p> "Wollongong"
在这个结构中，每个 HTML 元素（如 、）都是一个 节点，文本内容（如 “Hello World”）是 文本节点。
三、使用 JavaScript 操作 DOM
通过 JavaScript，我们可以对 DOM 进行以下操作：
1.选择节点
2.修改节点
3.创建新节点
4.删除节点
5.动态添加事件
以下是常见的 DOM 操作方法及其用法：
- 选择节点
通过 ID 选择：
使用 document.getElementById(id) 选择特定 ID 的元素。
var element = document.getElementById("myId");
通过标签名选择：
使用 document.getElementsByTagName(tagName) 选择所有指定标签的元素。
var elements = document.getElementsByTagName