JavaScript WebAPI 包含 DOM 和 BOM 标准，用于操作网页结构与浏览器窗口。本文详解 DOM 树结构、元素获取（querySelector）、内容修改（innerText/innerHTML）及属性操作。重点讲解事件三要素与注册方式，并通过待办事项列表实战案例，综合运用增删改查与样式控制，帮助开发者掌握前端交互核心技能。
在前端开发的世界里，JavaScript 就像一门武功——ECMAScript 是扎马步的基础内功，而 WebAPI 则是闯荡江湖的招式套路。想要写出能响应用户操作、动态交互的网页，WebAPI 是绕不开的核心技能。
很多新手会混淆 JavaScript 和 WebAPI 的关系，其实答案很简单：
打个比方：ECMAScript 教会你「如何发力」，而 WebAPI 告诉你「怎么出招」——没有基础语法，你连函数、变量都不会写；但没有 WebAPI，你写的代码只能在控制台跑，没法和网页互动。
API 是「应用程序编程接口」的缩写，本质上就是别人写好的现成函数或对象，供我们直接调用。就像你用手机拍照，不用自己造摄像头、写成像算法，只需要点击「拍照按钮」这个接口就行。
WebAPI 就是浏览器提供的「网页操作接口」，比如让你获取页面上的按钮、修改文字、监听用户点击等，不用关心浏览器底层是怎么实现的，直接调用接口即可。
学习 WebAPI 离不开权威文档，最推荐的是 MDN（Mozilla 开发者网络）：
DOM 全称「Document Object Model」（文档对象模型），W3C 标准给我们提供了一系列函数，让我们能操作网页的三大核心：
一个网页的结构本质上是一棵「树形结构」，我们称之为 DOM 树。可以把它想象成一个家谱：
举个简单的 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 树是操作网页的关键——所有操作都要先找到对应的「节点」（元素、文本、属性），再进行修改。
想要操作元素，第一步必须是「找到它」。WebAPI 提供了多种获取元素的方法，其中最常用、最灵活的是 querySelector 和 querySelectorAll（HTML5 新增，IE9+ 支持）。
语法：var 元素对象 = 父元素.querySelector('CSS 选择器');
.class、#id、标签名、后代选择器等）nulldocument（调用的元素会作为查找的根节点）实战示例：
<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>
语法：var 元素集合 = 父元素.querySelectorAll('CSS 选择器');
querySelector 一样，是 CSS 选择器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>
querySelector('#user id') 会因为空格报错）getElementById、getElementsByClassName 等旧方法，但现在大部分项目已不再兼容旧浏览器获取到元素后，最常用的操作就是修改它的内容。主要有两个属性：innerText 和 innerHTML，用法类似但适用场景不同。
语法：
// 读操作：获取元素文本
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>
语法：
// 读操作：获取 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 带来的性能损耗）。
元素的属性（比如 <img> 的 src、alt，<a> 的 href 等）也可以通过 DOM 操作来获取和修改。直接通过「元素对象。属性名」即可操作。
以 <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>
表单元素（比如 <input>、<select>、<textarea>）的属性操作有特殊性，核心关注以下几个属性：
value：输入框/按钮的内容disabled：是否禁用（true 禁用，false 启用）checked：复选框/单选框是否选中selected：下拉框选项是否选中type：输入框类型（文本、密码、按钮等）<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function(){
if(btn.value === '播放'){
btn.value = '暂停'; // 切换按钮文本
} else {
btn.value = '播放';
}
}
</script>
<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>
<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>
用户在网页上的每一个操作（点击、输入、移动鼠标等），都会在浏览器中触发一个「事件」。JavaScript 可以监听这些事件，然后执行对应的代码——这就是网页交互的核心。
可以用一个生动的比喻理解：
想要实现事件交互，必须满足三个条件：
click、输入 input、鼠标移动 mousemove）事件注册就是把「事件源、事件类型、事件处理程序」关联起来。最常用的方式是「属性绑定」（直接在元素上或通过 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（页面加载完成）等| 事件类型 | 触发场景 | 常用元素 |
|---|---|---|
| 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 + 监听事件」，掌握了这两点，就能实现绝大多数网页交互效果。想要熟练运用，建议按以下步骤学习：
querySelector/querySelectorAll、innerText/innerHTML、常见事件类型记住：前端开发是「实践型」技能，光看理论没用，一定要多写代码、多调试。刚开始可能会遇到「找不到元素」「事件不触发」等问题，别怕，打开控制台（F12）看报错信息，慢慢就能积累经验啦！
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online