Web API 核心指南：DOM 操作与事件处理实战

2. 获取多个元素

使用 document.querySelectorAll()，返回 NodeList 集合。

const lis = document.querySelectorAll('ul li');
console.log(lis); // NodeList 对象

// 遍历处理
for (let i = 0; i < lis.length; i++) {
    console.log(lis[i]);
}

三、操作元素内容

修改文本内容主要有两种方式，注意它们的区别：

• innerText：获取或设置纯文本，不解析 HTML 标签。
• innerHTML：获取或设置 HTML 内容，会解析标签。

const box = document.querySelector('.box');

// 修改为纯文本
box.innerText = '我是一个盒子';

// 修改为 HTML 标签（会渲染）
box.innerHTML = '<strong>盒子</strong>';

四、操作元素属性

4.1 常用属性修改

直接通过对象属性赋值即可，例如修改图片源。

const img = document.querySelector('img');
img.src = './new-image.png';

4.2 操作样式属性

有三种主要方式控制样式：

1. 通过 style 操作

直接修改内联样式，注意 CSS 属性名需转为驼峰命名法（如 background-color 变为 backgroundColor）。

const div = document.querySelector('div');
div.style.width = '1000px';
div.style.backgroundColor = 'red';

2. 操作 className

直接替换整个类名，适合完全切换样式场景。

div.className = 'active';

3. 通过 classList 操作（推荐）

相比 className，classList 不会覆盖原有类名，更适合动态增删。

const box = document.querySelector('.box');
box.classList.add('active');      // 添加
box.classList.remove('box');      // 删除
box.classList.toggle('active');   // 切换（有则删，无则加）

4.3 表单元素属性

常用 value 属性获取或设置输入框内容。

const input = document.querySelector('input');
console.log(input.value);         // 获取值
input.value = '我要买电脑';       // 设置值

4.4 自定义属性

HTML5 支持 data-* 自定义属性，JS 中通过 dataset 访问。

<div data-id="1" data-spm="test">1</div>

const one = document.querySelector('div');
console.log(one.dataset.id);      // "1"
console.log(one.dataset.spm);     // "test"

4.5 定时器

使用 setInterval 实现间歇执行，配合 clearInterval 关闭。

function fn() {
    console.log('每隔一秒执行一次');
}
const timer = setInterval(fn, 1000);

// 关闭计时器
clearInterval(timer);

五、事件处理

5.1 事件监听

事件监听让程序能检测用户行为并做出响应。相比旧式的 onclick，addEventListener 支持绑定多个监听器且不会被覆盖。

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
    alert('hi~');
});

对比：

• DOM L0 (on)：只能绑定一个，后绑定的会覆盖前一个。
• DOM L2 (addEventListener)：可绑定多次，功能更强，推荐使用。

5.2 常见事件类型

• 鼠标事件：click, mouseenter, mouseleave
• 焦点事件：focus, blur
• 键盘事件：keydown, keyup
• 文本事件：input（实时监听输入）

const input = document.querySelector('input');
input.addEventListener('input', function() {
    console.log('用户输入了：', input.value);
});

5.3 事件对象

事件回调函数的第一个参数即为事件对象（通常命名为 e 或 event），包含触发时的详细信息。

input.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
        console.log('按下了回车');
    }
});

5.4 环境对象 (this)

函数内部的 this 指向当前运行上下文。在事件监听中，this 通常指向触发事件的 DOM 元素。

5.5 回调函数

当一个函数作为参数传递给另一个函数时，该函数称为回调函数。定时器中的函数就是典型的回调。

六、事件流

事件流指事件执行的完整路径，分为捕获和冒泡两个阶段。

• 捕获阶段：从 Document 向下传递到目标元素（较少用）。
• 冒泡阶段：从目标元素向上传递回 Document（默认行为）。

// 第三个参数 true 表示捕获，false 表示冒泡（默认）
element.addEventListener('click', handler, false);

6.1 阻止冒泡

当子元素事件触发后不希望影响父元素时，需调用 stopPropagation()。

son.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件继续传播
}, true);

6.2 解绑事件

移除已绑定的事件监听，L0 方式直接赋值为 null，L2 方式需使用 removeEventListener 且必须传入相同的引用函数。

function fn() { alert('点击了'); }
btn.addEventListener('click', fn);
btn.removeEventListener('click', fn); // 必须用同一个 fn 引用

6.3 鼠标经过事件差异

• mouseover/mouseout：会冒泡，可能触发多次。
• mouseenter/mouseleave：不冒泡，更精准。

七、事件委托

利用事件冒泡特性，将子元素的事件监听绑定到父元素上。这样无需给每个子项单独绑定，性能更好，也方便动态添加的子元素生效。

const ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
    // 判断实际点击的是否为 li
    if (e.target.tagName === 'LI') {
        e.target.style.color = 'red';
    }
});

注意：表单提交默认会刷新页面，可通过 preventDefault() 阻止。

form.addEventListener('submit', function(e) {
    e.preventDefault();
});

八、其他常用事件

8.1 页面加载

• load：等待所有资源（图片、CSS 等）加载完毕。
• DOMContentLoaded：仅等待 HTML 解析完成，速度更快。

document.addEventListener('DOMContentLoaded', function() {
    // DOM 就绪即可操作
});

8.2 滚动事件

监听 scroll 事件可检测滚动位置，常用于固定导航栏或返回顶部。

window.addEventListener('scroll', function() {
    const scrollTop = document.documentElement.scrollTop;
    if (scrollTop >= 100) {
        // 显示返回顶部按钮
    }
});

8.3 尺寸变化

监听 resize 事件可响应窗口大小变化。

九、日期对象

JavaScript 的 Date 对象用于处理时间。

const date = new Date();
console.log(date.getFullYear()); // 年
console.log(date.getTime());     // 时间戳

时间戳计算：以 1970 年 1 月 1 日为起点。倒计时算法通常为：(未来时间戳 - 当前时间戳)。

十、节点操作

DOM 树中的每一项都是节点，包括元素、属性和文本节点。

10.1 查找节点

• parentNode：父节点
• children：元素类型的子节点（伪数组）
• nextElementSibling / previousElementSibling：兄弟节点

10.2 增加节点

使用 createElement 创建，通过 appendChild 追加，或通过 insertBefore 插入指定位置。

const li = document.createElement('li');
ul.appendChild(li);

克隆节点：cloneNode(true) 包含后代节点，false 仅克隆自身。

10.3 删除节点

通过父节点的 removeChild 方法删除。

ul.removeChild(ul.children[0]);

十一、移动端事件

移动端特有的触摸事件，包括 touchstart（按下）、touchmove（移动）、touchend（离开）。

div.addEventListener('touchstart', function() {
    console.log('手指触摸');
});

十二、插件说明

在实际项目中，常使用成熟的插件库（如 Swiper）来快速实现轮播、滑动等效果。使用时需注意类名冲突问题，确保不同实例间互不影响。