JavaScript WebAPI 核心实战：DOM 与 BOM 操作详解

实战示例：

<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：操作元素内容

获取到元素后，最常用的操作就是修改它的内容。主要有两个属性：innerText 和 innerHTML，用法类似但适用场景不同。

2.4.1 innerText：纯文本操作

• 作用：获取或设置元素的「渲染后文本内容」
• 特点：不识别 HTML 标签，会把标签当成普通文本；不保留 HTML 源码中的换行和空格

语法：

// 读操作：获取元素文本
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 结构
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>..."（保留换行和标签）
// 写操作：设置 HTML 结构（span 标签会被解析）
contentDiv.innerHTML = '<span>hello js</span>';
// 页面显示：红色的 "hello js"（标签生效）
</script>

两者对比与选择：

推荐用法：大部分场景下优先用 innerHTML，因为它更灵活，能直接操作结构；如果只是简单的文本修改，用 innerText 也可以（避免解析 HTML 带来的性能损耗）。

2.5 核心操作 3：操作元素属性

元素的属性（比如 <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); // 输出图片完整路径
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(){
    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;
            }
        }
        allSelect.checked = isAllChecked;
    }
}
</script>

三、事件基础：让网页「感知」用户操作

3.1 什么是事件？

用户在网页上的每一个操作（点击、输入、移动鼠标等），都会在浏览器中触发一个「事件」。JavaScript 可以监听这些事件，然后执行对应的代码——这就是网页交互的核心。

可以用一个生动的比喻理解：

• 浏览器 = 哨兵
• 用户操作 = 敌情
• 事件 = 烽火台的狼烟
• 事件处理程序 = 后方的应对策略

3.2 事件三要素

想要实现事件交互，必须满足三个条件：

1. 事件源：哪个元素触发的事件（比如按钮、输入框）
2. 事件类型：用户做了什么操作（比如点击 click、输入 input、鼠标移动 mousemove）
3. 事件处理程序：触发事件后要执行的代码（通常是一个函数）

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 常见事件类型

四、实战综合案例：待办事项列表

下面通过一个综合案例，把「获取元素、操作内容、操作属性、事件绑定」全部用起来，实现一个简单的「待办事项列表」。

需求：

1. 输入框输入待办内容，点击「添加」按钮，把内容添加到列表中
2. 点击列表项前的复选框，标记为已完成（文字变灰色、加删除线）
3. 点击「删除」按钮，删除对应的待办项
4. 点击「清空全部」按钮，删除所有待办项

代码实现：

<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 + 监听事件」，掌握了这两点，就能实现绝大多数网页交互效果。想要熟练运用，建议按以下步骤学习：

1. 先记牢核心 API：querySelector/querySelectorAll、innerText/innerHTML、常见事件类型
2. 多做小练习：比如图片切换、选项卡、计数器等，把每个知识点单独练熟
3. 尝试综合案例：比如待办列表、购物车、表单验证等，把知识点串联起来
4. 多看别人的代码：遇到不懂的交互效果，打开浏览器控制台（F12），查看元素和 JS 代码
5. 善用 MDN 文档：遇到不会的 API，第一时间查 MDN，看示例代码和参数说明

记住：前端开发是「实践型」技能，光看理论没用，一定要多写代码、多调试。刚开始可能会遇到「找不到元素」「事件不触发」等问题，别怕，打开控制台（F12）看报错信息，慢慢就能积累经验啦！