JavaScript Web API 入门与常用操作

JavaScript Web API

Web API 是什么

JavaScript 技术栈里，通常会把内容分成三块：

ECMAScript：语法和基础能力
DOM API：处理页面结构
BOM API：处理浏览器窗口和环境

Web API 说的就是 DOM 和 BOM。这部分由 W3C 制定标准，和 ECMAScript 不是一回事。

学 JavaScript 语法，是为了把编程思维立起来；真要做页面交互，还是得靠 Web API。

API 是什么

API 是一个更大的概念，简单理解就是'现成可用的接口'。Web API 里最常见的就是 DOM 和 BOM 相关接口。平时查文档、找方法，基本都在跟这些接口打交道。

API 概念图

查文档

常用的参考文档是 MDN：

https://developer.mozilla.org/zh-CN/docs/Web/API

遇到不熟的方法，先搜这里，效率比翻零散教程高得多。

DOM 的基本概念

什么是 DOM

DOM（Document Object Model）是一组用于操作网页内容、结构和样式的接口。网页被浏览器解析后，不再只是 HTML 文本，而是可以被 JavaScript 直接读写的一棵对象树。

DOM 概念图

DOM 树

页面结构本来就是层级关系，浏览器会把它组织成树，通常叫 DOM 树。你可以把它理解成一张从上到下展开的关系图：父节点、子节点、兄弟节点都能顺着查。

这也是为什么下面这几个问题都能落到 DOM 上：

怎么改页面内容
怎么改页面结构
怎么改页面样式

DOM 树结构

获取元素

这部分最常用的思路，和 CSS 选择器很像。

querySelector

querySelector 是 HTML5 新增的方法，IE9 及以上支持。它可以直接复用 CSS 选择器，适合拿第一个匹配到的元素。

var element = document.querySelector(selectors);

selectors：有效的 CSS 选择器字符串
返回第一个匹配到的 Element 对象
如果要拿所有匹配项，用 querySelectorAll()
也可以在任意元素上调用，它会把这个元素当作查找根节点

参数必须写成选择器格式，比如 .box 是类选择器，#id 是 ID 选择器。

<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>

querySelectorAll

querySelectorAll 的思路一样，只是返回的是一个 NodeList 集合。

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

事件

事件是什么

页面只要有交互，就离不开事件。点击、输入、选择，这些操作在浏览器里都会变成事件，JavaScript 监听到之后再决定怎么处理。

事件三要素

事件源：哪个元素触发了事件
事件类型：点击、选中、修改等动作
事件处理程序：具体怎么响应，通常是一个回调函数

一个简单例子

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

这里的 btn 是事件源，点击是事件类型，匿名函数负责处理事件。btn.onclick = function () {} 这类写法，通常叫注册事件或者绑定事件。

这个函数不用手动调用，浏览器会在合适的时候自己触发它。

操作元素

获取和修改内容

innerText

innerText 读的是节点及其后代的渲染文本内容。

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

它不会识别 HTML 标签。读取时更接近'页面上看得到的文字'，换行和空格也不一定会原样保留。

<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>

用 innerText 改完后，标签会被当成普通文本处理，不会变成真正的 HTML 结构。

innerHTML

innerHTML 读写的是元素后代的 HTML 内容。

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

它能识别 HTML 标签，也会保留换行和空格，是更常用的结构操作方式。

<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>

如果你想同时控制内容和结构，innerHTML 的适用面会更广；如果只想拿纯文本，innerText 更直接。

获取和修改属性

很多元素都可以直接通过对象属性来读写，这样改完界面会跟着变。

<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，常见的可操作属性有这些：

value：输入值
disabled：是否禁用
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>

点击计数

输入框初始值为 0，每点一次按钮加 1。

<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>

这里要记住一点：value 对表单元素来说就是内容本身。输入框里改的是值，按钮上显示的也是值。

全选功能

这个例子里有两个目标：

点全选时，把所有选项都勾上
任意一个选项取消后，全选状态也要跟着取消

<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>

这个写法不算花哨，但逻辑很稳：全选按钮负责批量设置，子选项负责反向修正全选状态。实际项目里也经常是这种思路，没必要把问题绕复杂。