一、WebAPI 基础认知：先搞懂「是什么」和「为什么」
在前端开发的世界里，JavaScript 就像一门武功——ECMAScript 是扎马步的基础内功，而 WebAPI 则是闯荡江湖的招式套路。想要写出能响应用户操作、动态交互的网页，WebAPI 是绕不开的核心技能。
1.1 WebAPI 到底是什么？
很多新手会混淆 JavaScript 和 WebAPI 的关系，其实答案很简单：
- JavaScript 由三部分组成：ECMAScript（基础语法）、DOM API（操作页面结构）、BOM API（操作浏览器）
- WebAPI 就是 DOM + BOM 的集合，是 W3C 组织制定的标准（和制定 ECMAScript 的 ECMA 国际不是同一波人）
打个比方：ECMAScript 教会你「如何发力」，而 WebAPI 告诉你「怎么出招」——没有基础语法，你连函数、变量都不会写；但没有 WebAPI，你写的代码只能在控制台跑，没法和网页互动。
1.2 什么是 API？
API 是「应用程序编程接口」的缩写，本质上就是别人写好的现成函数或对象，供我们直接调用。就像你用手机拍照，不用自己造摄像头、写成像算法，只需要点击「拍照按钮」这个接口就行。
WebAPI 就是浏览器提供的「网页操作接口」，比如让你获取页面上的按钮、修改文字、监听用户点击等，不用关心浏览器底层是怎么实现的，直接调用接口即可。
1.3 去哪里查 API 文档？
学习 WebAPI 离不开权威文档，最推荐的是 MDN（Mozilla 开发者网络）：
- 官方地址：https://developer.mozilla.org/zh-CN/docs/Web/API
- 搜索技巧：直接在搜索引擎输入「MDN + API 名称」，比如「MDN querySelector」，能快速找到对应用法
二、DOM 核心：网页的「结构骨架」操作指南
2.1 什么是 DOM？
DOM 全称「Document Object Model」（文档对象模型），W3C 标准给我们提供了一系列函数，让我们能操作网页的三大核心：
- 内容：比如修改文章文字、替换图片
- 结构：比如添加一个新按钮、删除一个列表项
- 样式：比如改变字体颜色、调整元素大小
2.2 理解 DOM 树：网页结构的「家谱图」
一个网页的结构本质上是一棵「树形结构」，我们称之为 DOM 树。可以把它想象成一个家谱：
- 根节点：整个文档（document），相当于「家族祖先」
- 根元素： 标签，是所有网页元素的「父节点」
- 子节点： 和 ，是 的直接后代
- 孙节点：、<a>、<h1> 等，是 <head> 或 <body> 的后代
- 叶子节点：文本内容、属性等，比如 <h1> 里的「我的标题」
举个简单的 HTML 结构对应的 DOM 树：
<html><head><title>文档标题</title></head><body><a href="https://xxx.com">我的链接</a><h1>我的标题</h1></body></html>
对应的 DOM 树结构：
文档 (document) └── <html>
├── <head>
│ └── <title>
│ └── 文本："文档标题"
└── <body>
├── <a>（属性：href="https://xxx.com"）
│ └── 文本："我的链接"
└── <h1>
└── 文本："我的标题"
理解 DOM 树是操作网页的关键——所有操作都要先找到对应的「节点」（元素、文本、属性），再进行修改。
2.3 核心操作 1：获取元素（找到 DOM 树中的「目标节点」）
想要操作元素，第一步必须是「找到它」。WebAPI 提供了多种获取元素的方法，其中最常用、最灵活的是 querySelector 和 querySelectorAll（HTML5 新增，IE9+ 支持）。
2.3.1 querySelector：获取「第一个匹配」的元素
语法：var 元素对象 = 父元素.querySelector('CSS 选择器');
- 参数：有效的 CSS 选择器（比如
.class、#id、标签名、后代选择器等） - 返回值：匹配到的第一个元素对象；如果没找到，返回
null - 特点：可以在任意元素上调用，不止
document（调用的元素会作为查找的根节点）
实战示例：
<div class="box">abc</div>
<div id="user-id">def</div>
<h3><span><input type="text"></span></h3>
<script>
// 1. 类选择器：获取 .box 元素
var elem1 = document.querySelector('.box');
console.log(elem1); // 输出 <div>abc</div>
// 2. ID 选择器：获取 #user-id 元素
var elem2 = document.querySelector('#user-id');
console.log(elem2); // 输出 <div>def</div>
// 3. 后代选择器：获取 h3 > span > input 元素
var elem3 = document.querySelector('h3 span input');
console.log(elem3); // 输出 <input type="text">
// 4. 限定根节点查找：只在 elem1 内部找 span（这里没有，返回 null）
var elem4 = elem1.querySelector('span');
console.log(elem4); // null
</script>
2.3.2 querySelectorAll：获取「所有匹配」的元素
语法：var 元素集合 = 父元素.querySelectorAll('CSS 选择器');
- 参数：和
querySelector一样，是 CSS 选择器 - 返回值：一个「类数组对象」（NodeList），包含所有匹配的元素；如果没找到，返回空的类数组
- 特点：返回的集合不是数组，但可以用
for循环遍历；集合是「动态的」，如果页面元素变化，集合会自动更新
实战示例：
<div class="box">abc</div>
<div class="box">def</div>
<div id="user-id">ghi</div>
<script>
// 获取所有 div 元素
var allDivs = document.querySelectorAll('div');
console.log(allDivs); // 输出 NodeList(3) [div.box, div.box, div#user-id]
// 遍历所有 .box 元素
var boxList = document.querySelectorAll('.box');
for(var i = 0; i < boxList.length; i++) {
console.log(boxList[i].innerText); // 依次输出 "abc"、"def"
}
</script>
注意事项：
- 选择器必须是有效的 CSS 选择器，否则会报错（比如
querySelector('#user id')会因为空格报错） - ID 选择器虽然可以用，但建议页面中 ID 唯一，避免匹配错误
- 如果需要兼容 IE8 及以下，可能需要用
getElementById、getElementsByClassName等旧方法，但现在大部分项目已不再兼容旧浏览器
2.4 核心操作 2：操作元素内容（修改 DOM 树的「文本节点」）
获取到元素后，最常用的操作就是修改它的内容。主要有两个属性：innerText 和 innerHTML，用法类似但适用场景不同。
2.4.1 innerText：纯文本操作（不识别 HTML 标签）
- 作用：获取或设置元素的「渲染后文本内容」
- 特点：
- 不识别 HTML 标签，会把标签当成普通文本
- 不保留 HTML 源码中的换行和空格（会按照页面渲染的样子显示）
- 非标准属性（由 IE 发起，现在大部分浏览器支持）
语法：
// 读操作：获取元素文本
var 文本内容 = 元素.innerText;
// 写操作：设置元素文本
元素.innerText = '新的文本内容';
实战示例：
<div class="content">
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var contentDiv = document.querySelector('.content');
// 读操作：获取文本
console.log(contentDiv.innerText); // 输出："hello world hello world"（没有标签，换行被合并）
// 写操作：设置文本（span 标签会被当成普通文本）
contentDiv.innerText = 'hello js <span>这是标签</span>';
// 页面显示：hello js <span>这是标签</span>（标签没有生效）
</script>
2.4.2 innerHTML：HTML 结构操作（识别 HTML 标签）
- 作用：获取或设置元素的「HTML 结构内容」
- 特点：
- 识别 HTML 标签，设置时会解析标签并渲染
- 保留 HTML 源码中的换行和空格
- W3C 标准属性，兼容性更好，使用场景更广
语法：
// 读操作：获取 HTML 结构
var HTML 内容 = 元素.innerHTML;
// 写操作：设置 HTML 结构
元素.innerHTML = '<标签>新的内容</标签>';
实战示例：
<div class="content">
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var contentDiv = document.querySelector('.content');
// 读操作：获取 HTML 结构
console.log(contentDiv.innerHTML); // 输出："\n <span>hello world</span>\n <span>hello world</span>\n"（保留换行和标签）
// 写操作：设置 HTML 结构（span 标签会被解析）
contentDiv.innerHTML = '<span>hello js</span>';
// 页面显示：红色的 "hello js"（标签生效）
</script>
两者对比与选择：
| 特性 | innerText | innerHTML |
|---|---|---|
| 识别 HTML 标签 | 否 | 是 |
| 保留换行/空格 | 否（按渲染结果） | 是（按源码） |
| 兼容性 | IE 发起，大部分浏览器支持 | W3C 标准，全浏览器支持 |
| 适用场景 | 纯文本展示/修改 | 需修改 HTML 结构时 |
推荐用法：大部分场景下优先用 innerHTML，因为它更灵活，能直接操作结构；如果只是简单的文本修改，用 innerText 也可以（避免解析 HTML 带来的性能损耗）。
2.5 核心操作 3：操作元素属性（修改 DOM 树的「属性节点」）
元素的属性（比如 <img> 的 src、alt，<a> 的 href 等）也可以通过 DOM 操作来获取和修改。直接通过「元素对象。属性名」即可操作。
2.5.1 常见属性操作示例（普通元素）
以 <img> 标签为例：
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花" width="200">
<script>
var img = document.querySelector('img');
// 1. 读操作：获取属性值
console.log(img.src); // 输出图片完整路径（比如 "file:///xxx/rose.jpg"）
console.log(img.alt); // 输出 "这是一朵花"
console.log(img.title); // 输出 "玫瑰花"
console.log(img.width); // 输出 200
// 2. 写操作：修改属性值（页面会实时更新）
img.onclick = function(){
// 点击图片切换 src 属性，实现图片切换
if(img.src.includes('rose.jpg')){
img.src = 'rose2.jpg';
img.alt = '这是另一朵花';
img.title = '红玫瑰';
} else {
img.src = 'rose.jpg';
img.alt = '这是一朵花';
img.title = '玫瑰花';
}
}
</script>
2.5.2 表单元素属性操作（重点！）
表单元素（比如 <input>、<select>、<textarea>）的属性操作有特殊性，核心关注以下几个属性：
value：输入框/按钮的内容disabled：是否禁用（true禁用，false启用）checked：复选框/单选框是否选中selected：下拉框选项是否选中type：输入框类型（文本、密码、按钮等）
示例 1：按钮文本切换（播放/暂停）
<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function(){
if(btn.value === '播放'){
btn.value = '暂停'; // 切换按钮文本
} else {
btn.value = '播放';
}
}
</script>
示例 2：点击计数（输入框数值递增）
<input type="text" id="count" value="0">
<input type="button" id="addBtn" value="点我 +1">
<script>
var countInput = document.querySelector('#count');
var addBtn = document.querySelector('#addBtn');
addBtn.onclick = function(){
// 注意：input.value 是字符串，需要转成数字
var currentNum = Number(countInput.value);
currentNum++; // 数值递增
countInput.value = currentNum; // 回显到输入框
}
</script>
示例 3：复选框全选/取消全选
<input type="checkbox" id="allSelect"> 全选<br>
<input type="checkbox" class="item"> 选项 1<br>
<input type="checkbox" class="item"> 选项 2<br>
<input type="checkbox" class="item"> 选项 3<br>
<input type="checkbox" class="item"> 选项 4<br>
<script>
var allSelect = document.querySelector('#allSelect');
var itemList = document.querySelectorAll('.item');
// 1. 点击全选框：选中/取消所有选项
allSelect.onclick = function(){
// 遍历所有选项，把它们的 checked 设为和全选框一致
for(var i = 0; i < itemList.length; i++){
itemList[i].checked = allSelect.checked;
}
}
// 2. 点击单个选项：判断是否需要取消全选
for(var i = 0; i < itemList.length; i++){
itemList[i].onclick = function(){
// 检查所有选项是否都被选中
var isAllChecked = true;
for(var j = 0; j < itemList.length; j++){
if(!itemList[j].checked){
isAllChecked = false;
break; // 只要有一个没选中，就不用继续检查了
}
}
// 把全选框的 checked 设为检查结果
allSelect.checked = isAllChecked;
}
}
</script>
三、事件基础：让网页「感知」用户操作
3.1 什么是事件？
用户在网页上的每一个操作（点击、输入、移动鼠标等），都会在浏览器中触发一个「事件」。JavaScript 可以监听这些事件，然后执行对应的代码——这就是网页交互的核心。
可以用一个生动的比喻理解：
- 浏览器 = 哨兵
- 用户操作 = 敌情
- 事件 = 烽火台的狼烟
- 事件处理程序 = 后方的应对策略
3.2 事件三要素（缺一不可）
想要实现事件交互，必须满足三个条件：
- 事件源：哪个元素触发的事件（比如按钮、输入框）
- 事件类型：用户做了什么操作（比如点击
click、输入input、鼠标移动mousemove） - 事件处理程序：触发事件后要执行的代码（通常是一个函数）
3.3 事件注册（绑定）：告诉浏览器「要监听什么」
事件注册就是把「事件源、事件类型、事件处理程序」关联起来。最常用的方式是「属性绑定」（直接在元素上或通过 JS 绑定）。
基础示例：点击按钮弹出提示
<button id="btn">点我一下</button>
<script>
// 1. 获取事件源（按钮）
var btn = document.getElementById('btn');
// 2. 注册事件（绑定 click 事件）
btn.onclick = function(){
// 3. 事件处理程序（触发点击后执行）
alert('hello world！你点击了按钮');
}
</script>
关键说明：
- 事件处理程序是一个「回调函数」：不需要我们主动调用，浏览器会在事件触发时自动执行
- 事件类型有很多：除了
click，还有input（输入框输入）、blur（输入框失去焦点）、load（页面加载完成）等 - 可以给同一个元素绑定多个不同类型的事件，但同一类型的事件只能绑定一个处理程序（后面的会覆盖前面的）
3.4 常见事件类型（入门必学）
| 事件类型 | 触发场景 | 常用元素 |
|---|---|---|
| click | 鼠标左键点击元素 | 按钮、链接、复选框等 |
| dblclick | 鼠标左键双击元素 | 任意元素 |
| input | 输入框内容变化（实时） | input、textarea |
| change | 输入框内容变化（失去焦点后） | input、select、textarea |
| blur | 元素失去焦点 | input、textarea |
| focus | 元素获得焦点 | input、textarea |
| mousemove | 鼠标在元素上移动 | 任意元素 |
| mouseenter | 鼠标进入元素 | 任意元素 |
| mouseleave | 鼠标离开元素 | 任意元素 |
| load | 页面或资源（图片）加载完成 | window、img |
四、实战综合案例：把知识串起来
下面通过一个综合案例，把「获取元素、操作内容、操作属性、事件绑定」全部用起来，实现一个简单的「待办事项列表」。
需求：
- 输入框输入待办内容，点击「添加」按钮，把内容添加到列表中
- 点击列表项前的复选框，标记为已完成（文字变灰色、加删除线）
- 点击「删除」按钮，删除对应的待办项
- 点击「清空全部」按钮，删除所有待办项
代码实现：
<div class="todo-container">
<h2>待办事项列表</h2>
<div class="todo-input">
<input type="text" id="todoInput" placeholder="请输入待办事项...">
<button id="addBtn">添加</button>
<button id="clearBtn">清空全部</button>
</div>
<ul id="todoList"></ul>
</div>
<style>
.completed{color: #999;text-decoration: line-through;}
</style>
<script>
// 1. 获取所有需要操作的元素
var todoInput = document.querySelector('#todoInput');
var addBtn = document.querySelector('#addBtn');
var clearBtn = document.querySelector('#clearBtn');
var todoList = document.querySelector('#todoList');
// 2. 添加待办事项
addBtn.onclick = function(){
// 获取输入框内容（去除前后空格）
var todoText = todoInput.value.trim();
if(todoText === ''){
alert('请输入待办事项！');
return;
}
// 创建新的列表项（li）
var li = document.createElement('li');
// 设置 li 的 HTML 结构
li.innerHTML = `
<input type="checkbox" class="todo-check">
<span class="todo-text">${todoText}</span>
<button class="delete-btn">删除</button>
`;
// 把 li 添加到列表中
todoList.appendChild(li);
// 清空输入框
todoInput.value = '';
// 3. 给新添加的复选框和删除按钮绑定事件
bindTodoEvents(li);
};
// 4. 绑定待办项的事件（复选框 + 删除按钮）
function bindTodoEvents(li){
var checkBox = li.querySelector('.todo-check');
var todoText = li.querySelector('.todo-text');
var deleteBtn = li.querySelector('.delete-btn');
// 复选框事件：标记已完成/未完成
checkBox.onclick = function(){
if(checkBox.checked){
todoText.classList.add('completed'); // 添加样式类
} else {
todoText.classList.remove('completed'); // 移除样式类
}
};
// 删除按钮事件：删除当前列表项
deleteBtn.onclick = function(){
if(confirm('确定要删除这个待办项吗？')){
todoList.removeChild(li);
}
};
}
// 5. 清空全部待办项
clearBtn.onclick = function(){
if(todoList.children.length === 0){
alert('没有待办事项可以清空！');
return;
}
if(confirm('确定要清空所有待办项吗？')){
todoList.innerHTML = ''; // 清空列表
}
};
// 6. 支持按回车键添加待办项
todoInput.onkeydown = function(event){
if(event.key === 'Enter'){
addBtn.onclick(); // 触发添加按钮的点击事件
}
};
</script>
案例说明：
- 用到了
querySelector获取元素、innerHTML操作结构、classList操作样式类 - 事件绑定包括
click（按钮、复选框）、keydown（回车键） - 通过
createElement创建新元素、appendChild添加元素、removeChild删除元素 - 实现了用户交互的核心逻辑：输入、添加、标记完成、删除、清空
五、总结与学习建议
WebAPI 的核心就是「操作 DOM + 监听事件」，掌握了这两点，就能实现绝大多数网页交互效果。想要熟练运用，建议按以下步骤学习：
- 先记牢核心 API：
querySelector/querySelectorAll、innerText/innerHTML、常见事件类型 - 多做小练习：比如图片切换、选项卡、计数器等，把每个知识点单独练熟
- 尝试综合案例：比如待办列表、购物车、表单验证等，把知识点串联起来
- 多看别人的代码：遇到不懂的交互效果，打开浏览器控制台（F12），查看元素和 JS 代码
- 善用 MDN 文档：遇到不会的 API，第一时间查 MDN，看示例代码和参数说明
记住：前端开发是「实践型」技能，光看理论没用，一定要多写代码、多调试。刚开始可能会遇到「找不到元素」「事件不触发」等问题，别怕，打开控制台（F12）看报错信息，慢慢就能积累经验啦！
