JavaScript WebAPI：从 DOM 操作到页面交互实战

JavaScript WebAPI 学习笔记：从 DOM 操作到页面交互实战

在前端开发中，JavaScript 的基础语法（ECMAScript）让我们建立了编程思维，而真正让页面“活”起来、具备交互能力的，则是 WebAPI。WebAPI 包含了 DOM 和 BOM，是 W3C 组织规定的标准。今天，我们就基于这份学习资料，系统梳理一下 DOM 操作的核心知识点，并通过几个实战案例来加深理解。

一、初识 WebAPI 与 DOM

WebAPI 本质上就是浏览器提供的一套现成的函数和对象，就像程序员的“工具箱”，让我们可以方便地操作页面和浏览器。

DOM（Document Object Model，文档对象模型）将整个页面抽象为一棵“树形结构”（DOM 树）。在这棵树中：

• 文档：整个页面，用 document 表示。
• 元素：页面中的标签，用 element 表示。
• 节点：页面中的所有内容（标签、注释、文本、属性等），用 node 表示。

二、获取元素：querySelector 与 querySelectorAll

以前获取元素的方式比较繁琐，现在推荐使用 HTML5 新增的 querySelector，它可以直接复用 CSS 选择器的知识，精准定位元素。

• document.querySelector('选择器')：返回匹配的第一个元素。
• document.querySelectorAll('选择器')：返回匹配的所有元素列表。

// 获取类名为 box 的第一个元素
var elem1 = document.querySelector('.box');
// 获取 id 为 id 的元素
var elem2 = document.querySelector('#id');
// 获取所有 div 元素
var elem3 = document.querySelectorAll('div');

三、事件初识：让页面感知用户行为

页面要动起来，就需要感知用户的点击、输入等操作。这就引出了事件三要素：

1. 事件源：哪个元素触发的（如按钮）。
2. 事件类型：是点击（click）还是修改？
3. 事件处理程序：触发后执行的函数（回调函数）。

var btn = document.getElementById('btn');
// 注册点击事件
btn.onclick = function() {
    alert("hello world");
};

这里的匿名函数就是回调函数，不需要我们主动调用，浏览器会在用户点击时自动执行。

四、操作元素内容与属性

1. 修改内容：innerText vs innerHTML

• innerText：只获取/设置文本内容，不识别 HTML 标签。
• innerHTML：获取/设置 HTML 结构，保留空格和换行，是 W3C 标准，使用场景更多。

var div = document.querySelector('div');
// 读取内容（包含 HTML 结构）
console.log(div.innerHTML);
// 修改内容，页面同步更新
div.innerHTML = 'hello js <span>hello js</span>';

2. 修改元素属性

可以直接通过 Element 对象的属性来修改，比如修改图片的 src、title 等。

var img = document.querySelector('img');
img.onclick = function() {
    // 点击切换图片
    if (img.src.lastIndexOf('rose.jpg') !== -1) {
        img.src = './rose2.png';
    } else {
        img.src = './rose.jpg';
    }
};

3. 修改表单元素属性

表单元素（如 input）的 value、disabled、checked、type 等属性都可以通过 DOM 修改。

// 播放/暂停按钮切换
var btn = document.querySelector('input');
btn.onclick = function() {
    if (btn.value === '播放') {
        btn.value = '暂停';
    } else {
        btn.value = '播放';
    }
};

五、操作样式：行内样式与类名样式

• 行内样式：element.style.属性名 = 值。适用于修改少量样式，注意属性名要使用驼峰命名法（如 fontSize）。
• 类名样式：element.className = '类名'。适用于修改大量样式，注意 class 是 JS 保留字，所以叫 className。

// 行内样式：点击放大字体
var div = document.querySelector('div');
div.onclick = function() {
    var curFontSize = parseInt(this.style.fontSize);
    curFontSize += 10;
    this.style.fontSize = curFontSize + "px";
};

// 类名样式：夜间模式切换
div.onclick = function() {
    if (div.className.indexOf('light') !== -1) {
        div.className = 'container dark';
    } else {
        div.className = 'container light';
    }
};

六、操作节点：增删查改

1. 新增节点

分为两步：创建元素（生娃） -> 插入 DOM 树（上户口）。

• document.createElement('标签名')：创建元素节点。
• element.appendChild(child)：插入到父节点的最后一个子节点之后。
• element.insertBefore(newNode, referenceNode)：插入到指定节点之前。

var newDiv = document.createElement('div');
newDiv.innerHTML = '我是新的节点';
var container = document.querySelector('.container');
// 插入到容器的最后
container.appendChild(newDiv);
// 插入到第一个子节点之前
container.insertBefore(newDiv, container.children[0]);

2. 删除节点

• element.removeChild(child)：删除指定的子节点。
  被删除的节点只是从 DOM 树中移除了，但依然在内存中，可以随时再次插入。

七、实战案例：从理论到应用

案例 1：全选/取消全选

需求：点击全选按钮选中所有选项；只要有一个选项取消，全选按钮自动取消。
思路：给全选按钮注册点击事件，遍历所有子复选框，同步 checked 状态；给每个子复选框注册点击事件，检查是否所有子复选框都被选中。

var all = document.querySelector('#all');
var girls = document.querySelectorAll('.girl');

// 全选按钮逻辑
all.onclick = function() {
    for (var i = 0; i < girls.length; i++) {
        girls[i].checked = all.checked;
    }
};

// 子复选框逻辑
for (var i = 0; i < girls.length; i++) {
    girls[i].onclick = function() {
        all.checked = checkGirls(girls);
    };
}

function checkGirls(girls) {
    for (var i = 0; i < girls.length; i++) {
        if (!girls[i].checked) {
            return false;
        }
    }
    return true;
}

案例 2：表白墙

需求：输入信息后点击提交，内容以表格形式显示在页面上，并清空输入框。
思路：获取输入框内容 -> 创建 div 元素并设置 innerHTML -> 插入到容器中 -> 清空输入框。

var submit = document.querySelector('.submit');
submit.onclick = function() {
    var edits = document.querySelectorAll('.edit');
    var from = edits[0].value;
    var to = edits[1].value;
    var message = edits[2].value;

    if (from === '' || to === '' || message === '') {
        return;
    }

    // 构造 HTML 元素
    var row = document.createElement('div');
    row.className = 'row';
    row.innerHTML = from + '对' + to + '说：' + message;

    // 添加到容器
    var container = document.querySelector('.container');
    container.appendChild(row);

    // 清空输入框
    for (var i = 0; i < 3; i++) {
        edits[i].value = '';
    }
};

案例 3：待办事项

需求：输入任务点击新建，任务添加到“未完成”列表；勾选复选框，任务移到“已完成”；点击删除按钮，移除任务。
关键点：

• 在事件回调中使用 this 获取当前操作的元素。
• 通过 this.parentNode 获取父元素。
• 点击 checkbox 时，会先修改 checked 值，再触发点击事件。

var addTaskButton = document.querySelector('.nav button');
addTaskButton.onclick = function() {
    // 1. 获取输入内容
    var input = document.querySelector('.nav input');
    var taskContent = input.value;

    // 2. 创建节点
    var row = document.createElement('div');
    row.className = 'row';
    
    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    
    var span = document.createElement('span');
    span.innerHTML = taskContent;
    
    var button = document.createElement('button');
    button.innerHTML = '删除';
    
    row.appendChild(checkbox);
    row.appendChild(span);
    row.appendChild(button);
    
    // 3. 插入到未完成列表
    var todo = document.querySelector('.todo');
    todo.appendChild(row);

    // 4. 复选框切换状态
    checkbox.onclick = function() {
        var row = this.parentNode;
        if (this.checked) {
            document.querySelector('.done').appendChild(row);
        } else {
            document.querySelector('.todo').appendChild(row);
        }
    };

    // 5. 删除按钮
    button.onclick = function() {
        var row = this.parentNode;
        var grandParent = row.parentNode;
        grandParent.removeChild(row);
    };
};

总结

通过这份学习资料，我们系统掌握了 WebAPI 的核心操作：获取元素、注册事件、修改内容与属性、操作样式以及增删节点。DOM 操作是前端交互的基石，只有多写多练，把这些 API 用熟练，才能构建出更加复杂、动态的页面。希望这篇笔记能帮你理清思路，快速上手！