为页面注入生命：掌握DOM API完全指南
浏览器的隐藏超能力：Web API开发者指南（3部分系列）
为页面注入生命：掌握DOM API ← 当前文章
欢迎回来！在第1部分中，我们建立了"为什么"——我们了解到Web API是浏览器的内置超能力，让我们的JavaScript代码与世界互动。
今天，我们要动手实践最基础、最常用的Web API：文档对象模型，简称DOM。
每次你看到网页在没有完全重新加载的情况下发生变化——弹出模态框、购物车中添加商品、"点赞"按钮变红——你都在看到DOM API在发挥作用。它是将静态文档转变为活生生的应用程序的魔法。
什么是DOM？
当浏览器加载HTML文件时，它不仅仅看到一块文本。它在内存中构建了该文本的实时、交互式模型。这个模型被称为文档对象模型。它将页面表示为对象的树，其中每个HTML标签都是树中的一个"节点"。
DOM API是你与这棵树交互的工具集。它让你可以找到任何节点、改变它、添加新的或删除旧的。简而言之，这就是你控制页面的方式。
让我们使用现代JavaScript掌握DOM操作的四个基本动作。
1. 查找事物：查询DOM
在你能改变某些东西之前，你必须先找到它。你可能见过旧代码使用getElementById()或getElementsByTagName()等方法。它们有效，但有一种更强大、更统一的方式。
认识你的新朋友：querySelector()和querySelectorAll()。它们使用CSS选择器——你在样式表中使用的相同语法——来查找元素。
查找第一个匹配的元素： document.querySelector()
// 查找第一个具有'intro-paragraph'类的元素
const intro = document.querySelector('.intro-paragraph');
// 查找具有'main-image' ID的元素
const mainImage = document.querySelector('#main-image');
// 查找ID为'login-form'的表单内的第一个按钮
const submitButton = document.querySelector('#login-form button');
查找所有匹配的元素： document.querySelectorAll()
这会返回一个NodeList，它就像一个数组。你可以用forEach遍历它。
// 查找具有'task-list'类的
- 内的所有列表项
const allTasks = document.querySelectorAll('.task-list li');
allTasks.forEach(task => {
console.log('找到一个任务:', task.textContent);
});
为什么这更好： 你只需要知道一件事：CSS选择器。它灵活、强大且一致。
2. 改变事物：修改元素
一旦你找到了一个元素，你就可以改变它的几乎所有内容。
改变文本内容： element.textContent
这是改变元素内文本的安全方式。它不会解释任何HTML，这保护你免受安全风险。
const heading = document.querySelector('h1');
heading.textContent = '欢迎来到DOM的世界！';
安全警告： 你可能会看到使用element.innerHTML。要非常小心！innerHTML会解析并执行你传递给它的任何HTML和脚本标签，为跨站脚本（XSS）攻击打开大门。只对完全信任的内容使用innerHTML。 对于用户生成的内容，始终使用textContent。
改变样式（正确的方式）： element.classList
你可以直接用element.style.color = 'red'改变样式，但这会将CSS逻辑混入JavaScript中。一个更清洁的方法是使用CSS类。
/* 在你的style.css中 */
.is-active {
background-color: #007bff;
color: white;
}
.is-hidden {
display: none;
}
// 在你的script.js中
const myButton = document.querySelector('#my-button');
const myPanel = document.querySelector('#my-panel');
// 添加一个类
myButton.classList.add('is-active');
// 移除一个类
myPanel.classList.remove('is-hidden');
// 切换一个类（如果不存在就添加，如果存在就移除）
myButton.classList.toggle('is-active');
改变属性： element.setAttribute()
这用于改变属性，如图像的src、链接的href或按钮的disabled。
const profilePic = document.querySelector('#profile-pic');
profilePic.setAttribute('src', '/images/new-avatar.png');
const submitBtn = document.querySelector('#submit');
submitBtn.setAttribute('disabled', 'true');
3. 创建和删除事物
那么页面加载时不存在的内容呢？
创建元素： document.createElement()
将其添加到页面： element.append()
append()方法是一种现代且方便的方式，可以将一个或多个元素（甚至文本）添加到父元素的末尾。
// 1. 找到我们将添加新元素的父元素
const list = document.querySelector('.task-list');
// 2. 在内存中创建新元素
const newItem = document.createElement('li');
// 3. 配置它（使用我们刚学的方法！）
newItem.textContent = '写一篇关于DOM的博客文章';
newItem.classList.add('task');
// 4. 将其添加到页面！
list.append(newItem);
删除元素： element.remove()
这个非常简单。
const thingToRemove = document.querySelector('#old-banner');
thingToRemove.remove();
4. 响应用户：事件监听器
这是交互性的关键。我们需要在用户做某事时运行我们的代码，比如点击按钮或提交表单。
addEventListener()方法是我们的工具。它"监听"元素上的特定事件，并在事件发生时运行函数。
const themeToggleButton = document.querySelector('#theme-toggle');
// 事件发生时运行的函数
function handleThemeToggle() {
document.body.classList.toggle('dark-mode');
console.log('主题已切换！');
}
// 附加监听器
themeToggleButton.addEventListener('click', handleThemeToggle);
一个常见的用例是处理表单提交。默认情况下，提交表单会重新加载页面。我们可以用event.preventDefault()阻止这个。
const myForm = document.querySelector('#my-form');
myForm.addEventListener('submit', function(event) {
// 阻止默认的浏览器动作（页面重新加载）
event.preventDefault();
console.log('表单已提交，没有重新加载！');
// 现在你可以获取表单数据并对其进行处理。
});
迷你项目：简单的待办事项列表
让我们把所有内容整合在一起！这个简单的待办事项列表使用了我们涵盖的每个概念。
HTML (index.html)：
<h1>我的待办事项列表h1>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="添加新任务..." required />
<button type="submit">添加button>
form>
<ul id="todo-list">ul>
JavaScript (script.js)：
// 1. 找到关键元素
const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const list = document.querySelector('#todo-list');
// 2. 监听表单提交
form.addEventListener('submit', function(event) {
// 阻止页面重新加载
event.preventDefault();
// 从输入字段获取文本
const taskText = input.value;
// 3. 创建一个新的列表项
const newTask = document.createElement('li');
newTask.textContent = taskText;
// 4. 将新项目添加到列表
list.append(newTask);
// 清除输入字段，为下一个任务做准备
input.value = '';
});
就这样，你有了一个功能性的、交互式的应用程序，只使用浏览器自己的DOM API。
下一步是什么？
你现在掌握了王国的钥匙。你可以查找、改变、创建和响应网页上的任何内容。这个技能是前端开发的绝对基础。理解React和Vue等框架在底层如何做到这一点，将使你成为一个更强大的开发者。
但我们的页面仍然孤独。它无法从服务器获取数据，也无法在我们关闭标签页时记住我们的待办事项列表。
在第3部分中，我们将通过探索Fetch API来给我们的浏览器一个背包，从外部世界获取数据，并使用Web Storage API来记住它。
DOM API的最佳实践
1. 性能优化
缓存选择器结果：避免重复查询DOM
使用事件委托：在父元素上监听事件
批量DOM操作：减少重排和重绘
2. 安全性考虑
避免innerHTML：使用textContent防止XSS攻击
验证用户输入：在操作DOM之前验证数据
使用内容安全策略：限制脚本执行
3. 代码组织
分离关注点：将DOM操作与业务逻辑分离
使用现代方法：优先使用querySelector和classList
保持一致性：在整个项目中使用相同的模式
4. 调试技巧
使用浏览器开发工具：检查元素和调试JavaScript
添加日志：在关键操作点添加console.log
测试边界情况：确保代码处理各种输入
总结
DOM API是前端开发的核心。通过掌握它，你将能够：
创建动态内容：根据用户交互更新页面
构建交互式界面：响应用户输入和事件
优化用户体验：提供流畅的页面交互
理解框架原理：更好地理解现代框架的工作原理
记住，DOM操作是前端开发的基础技能。无论你使用什么框架，对DOM的理解都将使你成为一个更好的开发者。
本文翻译自DEV Community上的原创文章，是"浏览器的隐藏超能力"系列的第3部分，旨在帮助中文开发者掌握DOM API的使用方法。