DOM操作入门：让你的网页动起来！

zjw
  2025-01-15 13:00 2025-01-15 13:00 创建   2025-07-16 12:55:34 2025-07-16 12:55:34 更新      

DOM操作入门：让你的网页动起来！

🚀 引言

在上一篇文章中，我们学习了JavaScript的基础语法，掌握了变量、数据类型、运算符、条件语句、循环和函数等核心概念。现在，是时候让这些知识发挥作用，让你的网页不再是静态的图片和文字，而是能够与用户进行交互的动态页面了！

要实现网页的动态交互，我们就需要了解和掌握DOM（Document Object Model，文档对象模型）。DOM是HTML和XML文档的编程接口，它将网页内容解析成一个由节点和对象组成的逻辑树，JavaScript可以通过这个树形结构来访问、操作和修改网页的各个部分。

本篇文章将带你深入了解DOM，学习如何通过JavaScript来选择、修改和创建HTML元素，从而实现丰富的网页交互效果。

🌳 什么是DOM？

想象一下你的HTML文档，它由各种标签（如<html>, <head>, <body>, <div>, <p>, <a>等）组成，这些标签层层嵌套，形成了一个有层次的结构。DOM就是将这个HTML文档表示为一个树形结构，树中的每一个部分都被称为”节点”（Node）。

📊 DOM树的结构

节点类型 说明 示例
文档节点（Document Node） 整个文档的根节点，通常是document对象 document
元素节点（Element Node） HTML标签，如<body>, <p>, <div>等 <div>, <p>, <span>
文本节点（Text Node） 标签内部的文本内容 “Hello World”
属性节点（Attribute Node） HTML元素的属性，如id, class, href等 id="myId", class="myClass"

🔧 DOM操作的核心功能

通过DOM，JavaScript可以像操作树一样操作网页：

  • 查找节点：找到树中的特定节点
  • 修改节点：改变节点的属性、内容或样式
  • 添加/删除节点：在树中添加新的节点或删除现有节点

🎯 如何选择HTML元素？

在进行DOM操作之前，首先需要选择要操作的HTML元素。JavaScript提供了多种方法来选择元素，最常用的有以下几种：

1. 通过ID选择元素：document.getElementById()

这是最直接、最常用的方法，通过元素的id属性来获取唯一的元素。由于id在HTML文档中应该是唯一的，因此这个方法总是返回一个元素或null。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
    <div id="myDiv">这是一个div元素</div>
    <script>
        const myDiv = document.getElementById("myDiv");
        console.log(myDiv); // 输出 <div id="myDiv">这是一个div元素</div>
    </script>
</body>
</html>

2. 通过类名选择元素：document.getElementsByClassName()

通过元素的class属性来获取元素。由于多个元素可以拥有相同的类名，因此这个方法返回一个HTMLCollection（类似数组的对象），包含所有匹配的元素。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
    <p class="myClass">段落1</p>
    <p class="myClass">段落2</p>
    <script>
        const paragraphs = document.getElementsByClassName("myClass");
        console.log(paragraphs); // 输出 HTMLCollection [p.myClass, p.myClass]
        console.log(paragraphs[0].textContent); // 输出 "段落1"
    </script>
</body>
</html>

3. 通过标签名选择元素：document.getElementsByTagName()

通过元素的标签名来获取元素。同样，这个方法也返回一个HTMLCollection。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
    <script>
        const listItems = document.getElementsByTagName("li");
        console.log(listItems); // 输出 HTMLCollection [li, li]
    </script>
</body>
</html>

4. 通过CSS选择器选择元素：document.querySelector() 和 document.querySelectorAll()

这两个方法允许你使用CSS选择器来选择元素，非常灵活和强大。

方法 说明 返回值
document.querySelector() 返回文档中与指定CSS选择器匹配的第一个元素 单个元素或null
document.querySelectorAll() 返回文档中与指定CSS选择器匹配的所有元素 NodeList（类似数组的对象） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
    <div class="container">
        <p id="firstPara">第一个段落</p>
        <p class="item">第二个段落</p>
        <span class="item">一个span元素</span>
    </div>
    <script>
        const firstParagraph = document.querySelector("#firstPara");
        console.log(firstParagraph); // 输出 <p id="firstPara">第一个段落</p>

        const allItems = document.querySelectorAll(".item");
        console.log(allItems); // 输出 NodeList [p.item, span.item]
    </script>
</body>
</html>

✏️ 如何修改HTML元素？

选择到元素后，你就可以对其进行各种修改了。

1. 修改元素内容

属性 说明 示例
element.innerHTML 获取或设置元素的HTML内容（包括标签） <div>Hello <b>World</b></div>
element.textContent 获取或设置元素的纯文本内容（不包括标签） Hello World 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
    <div id="myElement"><b>原始内容</b></div>
    <script>
        const element = document.getElementById("myElement");

        // 修改HTML内容
        element.innerHTML = "<em>新内容</em>";
        console.log(element.innerHTML); // 输出 "<em>新内容</em>"

        // 修改纯文本内容
        element.textContent = "纯文本内容";
        console.log(element.textContent); // 输出 "纯文本内容"
    </script>
</body>
</html>

2. 修改元素属性

方法 说明 示例
element.attributeName 直接访问和修改元素的属性 element.id, element.className
element.setAttribute(name, value) 设置元素的指定属性 element.setAttribute("title", "提示")
element.getAttribute(name) 获取元素的指定属性 element.getAttribute("alt")
element.removeAttribute(name) 移除元素的指定属性 element.removeAttribute("title") 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<body>
    <img id="myImage" src="old.jpg" alt="旧图片">
    <script>
        const image = document.getElementById("myImage");

        // 直接修改属性
        image.src = "new.jpg";
        image.alt = "新图片";

        // 使用setAttribute
        image.setAttribute("title", "这是一张新图片");

        console.log(image.src); // 输出 new.jpg 的完整URL
        console.log(image.getAttribute("alt")); // 输出 "新图片"
    </script>
</body>
</html>

3. 修改元素样式

方法 说明 示例
element.style.propertyName 直接修改元素的内联样式 element.style.backgroundColor = "red"
element.classList.add() 添加CSS类 element.classList.add("highlight")
element.classList.remove() 移除CSS类 element.classList.remove("highlight")
element.classList.toggle() 切换CSS类 element.classList.toggle("highlight") 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            background-color: yellow;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <p id="myParagraph">这是一个段落。</p>
    <button onclick="changeStyle()">改变样式</button>
    <button onclick="toggleClass()">切换高亮</button>

    <script>
        const paragraph = document.getElementById("myParagraph");

        function changeStyle() {
            paragraph.style.color = "blue";
            paragraph.style.fontSize = "20px";
        }

        function toggleClass() {
            paragraph.classList.toggle("highlight");
        }
    </script>
</body>
</html>

🏗️ 如何创建和添加元素？

除了修改现有元素，你还可以创建新的HTML元素并将其添加到页面中。

1. 创建新元素

使用document.createElement()方法创建新的HTML元素：

1
2
3
4
5
6
7
8
// 创建一个新的div元素
const newDiv = document.createElement("div");
newDiv.textContent = "这是一个新创建的div";
newDiv.className = "new-element";

// 创建一个新的段落元素
const newParagraph = document.createElement("p");
newParagraph.innerHTML = "这是一个<strong>新段落</strong>";

2. 添加元素到页面

方法 说明 示例
parent.appendChild(child) 将子元素添加到父元素的末尾 container.appendChild(newDiv)
parent.insertBefore(newChild, referenceChild) 在指定元素之前插入新元素 container.insertBefore(newDiv, existingDiv)
parent.replaceChild(newChild, oldChild) 用新元素替换旧元素 container.replaceChild(newDiv, oldDiv) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<body>
    <div id="container">
        <p>现有段落</p>
    </div>
    <button onclick="addElement()">添加元素</button>

    <script>
        function addElement() {
        const container = document.getElementById("container");

            // 创建新元素
            const newDiv = document.createElement("div");
            newDiv.textContent = "新添加的div元素";
            newDiv.style.backgroundColor = "lightblue";
            newDiv.style.padding = "10px";
            newDiv.style.margin = "10px 0";
            
            // 添加到容器末尾
            container.appendChild(newDiv);
        }
    </script>
</body>
</html>

3. 删除元素

使用parent.removeChild(child)方法删除元素：

1
2
3
4
5
6
7
8
function removeElement() {
    const container = document.getElementById("container");
    const elementToRemove = document.getElementById("elementToRemove");
    
    if (elementToRemove) {
        container.removeChild(elementToRemove);
    }
}

🎯 实践项目：动态待办事项列表

让我们创建一个动态的待办事项列表来巩固所学知识：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
    <title>动态待办事项列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .todo-container {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 20px;
        }
        
        .todo-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            margin: 5px 0;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        
        .todo-item.completed {
            background-color: #e8f5e8;
            text-decoration: line-through;
            color: #666;
        }
        
        .delete-btn {
            background-color: #ff4444;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .delete-btn:hover {
            background-color: #cc0000;
        }
        
        input[type="text"] {
            width: 70%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="todo-container">
        <h1>我的待办事项</h1>
        
        <div>
            <input type="text" id="todoInput" placeholder="输入新的待办事项...">
            <button onclick="addTodo()">添加</button>
        </div>
        
        <div id="todoList">
            <!-- 待办事项将在这里动态添加 -->
        </div>
    </div>

    <script>
        let todoCounter = 0;

        function addTodo() {
            const input = document.getElementById("todoInput");
            const todoText = input.value.trim();
            
            if (todoText === "") {
                alert("请输入待办事项内容！");
                return;
            }
            
            const todoList = document.getElementById("todoList");
            const todoItem = document.createElement("div");
            todoItem.className = "todo-item";
            todoItem.id = "todo-" + todoCounter;
            
            todoItem.innerHTML = `
                <span onclick="toggleComplete(${todoCounter})">${todoText}</span>
                <button class="delete-btn" onclick="deleteTodo(${todoCounter})">删除</button>
            `;
            
            todoList.appendChild(todoItem);
            input.value = "";
            todoCounter++;
        }

        function toggleComplete(id) {
            const todoItem = document.getElementById("todo-" + id);
            todoItem.classList.toggle("completed");
        }

        function deleteTodo(id) {
            const todoItem = document.getElementById("todo-" + id);
            todoItem.remove();
        }

        // 支持回车键添加待办事项
        document.getElementById("todoInput").addEventListener("keypress", function(event) {
            if (event.key === "Enter") {
                addTodo();
        }
        });
    </script>
</body>
</html>

这个项目展示了：

  1. 元素选择：使用getElementById()选择输入框和列表容器
  2. 元素创建：使用createElement()创建新的待办事项
  3. 元素添加：使用appendChild()将新元素添加到页面
  4. 元素删除：使用remove()删除完成的待办事项
  5. 样式修改：使用classList.toggle()切换完成状态
  6. 事件处理：响应点击和键盘事件

📚 总结

通过本篇文章的学习，你已经掌握了DOM操作的核心技能：

✅ 学到的内容

  1. DOM概念：理解了文档对象模型的结构和节点类型
  2. 元素选择：掌握了多种选择HTML元素的方法
  3. 元素修改：学会了修改元素内容、属性和样式
  4. 元素操作：掌握了创建、添加和删除元素
  5. 实践项目：创建了一个动态的待办事项列表

🚀 下一步学习建议

  1. 事件处理：学习如何响应用户交互事件
  2. 表单处理：掌握表单数据的获取和验证
  3. 动画效果：使用JavaScript创建动态效果
  4. AJAX请求：学习与服务器进行数据交互
  5. 现代框架：探索React、Vue等现代前端框架

💡 练习建议

  1. 尝试为待办事项列表添加更多功能（如编辑、保存到本地存储）
  2. 创建一个图片轮播组件
  3. 制作一个简单的计算器
  4. 练习各种DOM操作方法的组合使用

🔗 学习资源

记住，DOM操作是前端开发的核心技能。多练习，多尝试，你的网页交互能力会越来越强大！

希望这篇文章对你学习DOM操作有所帮助！如果有任何问题，欢迎在评论区讨论。

  • 标题: DOM操作入门：让你的网页动起来！
  • 作者: zjw
  • 创建于 : 2025-01-15 13:00:00
  • 更新于 : 2025-07-16 12:55:34
  • 链接: https://blog.zjw6.cn/javascript_dom_intro/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
目录
DOM操作入门：让你的网页动起来！
  1. DOM操作入门：让你的网页动起来！
    1. 🚀 引言
    2. 🌳 什么是DOM？
      1. 📊 DOM树的结构
      2. 🔧 DOM操作的核心功能
    3. 🎯 如何选择HTML元素？
      1. 1. 通过ID选择元素：document.getElementById()
      2. 2. 通过类名选择元素：document.getElementsByClassName()
      3. 3. 通过标签名选择元素：document.getElementsByTagName()
      4. 4. 通过CSS选择器选择元素：document.querySelector() 和 document.querySelectorAll()
    4. ✏️ 如何修改HTML元素？
      1. 1. 修改元素内容
      2. 2. 修改元素属性
      3. 3. 修改元素样式
    5. 🏗️ 如何创建和添加元素？
      1. 1. 创建新元素
      2. 2. 添加元素到页面
      3. 3. 删除元素
    6. 🎯 实践项目：动态待办事项列表
    7. 📚 总结
      1. ✅ 学到的内容
      2. 🚀 下一步学习建议
      3. 💡 练习建议
      4. 🔗 学习资源