JavaScript WebAPI 核心操作指南 | 极客日志

JavaScript大前端

JavaScript WebAPI 核心操作指南

WebAPI 包含 DOM 与 BOM，用于操作网页结构与样式。通过 querySelector 获取元素，注册事件处理用户交互。支持修改元素内容（innerText/innerHTML）、属性及表单值。示例涵盖按钮切换、计数及复选框全选逻辑。

GitMaster发布于 2026/2/4更新于 2026/4/182.5K 浏览

JavaScript WebAPI 核心操作指南

JavaScript WebAPI

WebAPI 背景知识

什么是 WebAPI

JavaScript 技术栈主要包含三部分：

ECMAScript：基础语法部分
DOM API：操作页面结构
BOM API：操作浏览器

WebAPI 包含了 DOM 和 BOM。这是由 W3C 组织制定的标准，独立于 ECMAScript 标准。

学习 JavaScript 基础语法主要是为了建立编程思维，而编写复杂的交互式页面则需要 WebAPI 的支持。

什么是 API

API 是一个广义概念，WebAPI 特指 DOM 与 BOM。API 本质上是现成的函数或对象，供开发者直接使用，类似于工具箱。

API 概念图

API 参考文档

可通过 MDN 文档搜索相关 API：https://developer.mozilla.org/zh-CN/docs/Web/API

DOM 基本概念

什么是 DOM

DOM（Document Object Model）是 W3C 标准提供的一系列接口，用于操作网页内容、结构和样式。

DOM 概念图

DOM 树

页面结构呈树形结构，称为 DOM 树。可以简单理解为类似家谱的层级关系。

如何使用 JavaScript 操作网页内容？如何使用 JavaScript 操作网页结构？如何使用 JavaScript 操作网页样式？

DOM 树结构

获取元素

这部分功能类似于 CSS 选择器。

querySelector

HTML5 新增方法，IE9 及以上版本支持。可复用 CSS 选择器知识，精准获取元素对象。

var element = document.querySelector(selectors);

selectors：有效的 CSS 选择器字符串。
返回匹配的第一个元素的 Element 对象。
若需获取所有匹配元素列表，使用 querySelectorAll()。

极客日志微信公众号二维码

更多推荐文章

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<div>abc</div>
<div>def</div>
<h3><span><input type="text"></span></h3>
<script>
var elem1 = document.querySelector('.box');
console.log(elem1);
var elem2 = document.querySelector('#id');
console.log(elem2);
var elem3 = document.querySelector('h3 span input');
console.log(elem3);
</script>

<div>abc</div>
<div>def</div>
<script>
var elems = document.querySelectorAll('div');
console.log(elems);
</script>

<button>点我一下</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
    alert("hello world");
}
</script>

// 读操作
var renderedText = element.innerText;
// 写操作
element.innerText = string;

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
console.log(div.innerText);
div.innerText = 'hello js <span>hello js</span>';
</script>

// 读操作
var content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
console.log(div.innerHTML);
div.innerHTML = '<span>hello js</span>';
</script>

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
console.dir(img);
</script>

console.log(img.src);
console.log(img.title);
console.log(img.alt);

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
img.onclick = function () {
    if (img.src.lastIndexOf('rose.jpg') !== -1) {
        img.src = './rose2.png';
    } else {
        img.src = './rose.jpg';
    }
}
</script>

<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="text" value="0">
<input type="button" id="btn" value='点我+1'>
<script>
var text = document.querySelector('#text');
var btn = document.querySelector('#btn');
btn.onclick = function () {
    var num = +text.value;
    console.log(num);
    num++;
    text.value = num;
}
</script>

<input type="checkbox" id="all"> 我全都要<br>
<input type="checkbox" class="girl"> 貂蝉<br>
<input type="checkbox" class="girl"> 小乔<br>
<input type="checkbox" class="girl"> 安琪拉<br>
<input type="checkbox" class="girl"> 妲己<br>
<script>
// 1. 获取到元素
var all = document.querySelector('#all');
var girls = document.querySelectorAll('.girl');

// 2. 给 all 注册点击事件，选中/取消所有选项
all.onclick = function () {
    for (var i = 0; i < girls.length; i++) {
        girls[i].checked = all.checked;
    }
}

// 3. 给 girl 注册点击事件
for (var i = 0; i < girls.length; i++) {
    girls[i].onclick = function () {
        // 检测当前是不是所有的 girl 都被选中了
        all.checked = checkGirls(girls);
    }
}

// 4. 实现 checkGirls 函数
function checkGirls(girls) {
    for (var i = 0; i < girls.length; i++) {
        if (!girls[i].checked) {
            return false;
        }
    }
    return true;
}
</script>