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()。
可在任何元素上调用，该元素作为查找根节点。

注意参数必须是选择器格式，如 .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

用法类似，但返回 NodeList 集合。

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

事件初识

基本概念

JS 构建动态页面需感知用户行为。用户的点击、选择等操作在浏览器中产生事件，被 JS 捕获后进行交互处理。

浏览器如同哨兵侦查用户行为，一旦触发动作即产生事件，程序根据事件决定后续策略。

事件三要素

事件源：哪个元素触发的。
事件类型：点击、选中还是修改等。
事件处理程序：如何处理，通常为回调函数。

简单示例

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

btn 按钮是事件源。
点击是事件类型。
匿名函数是事件处理程序。
btn.onclick = function() 称为注册事件或绑定事件。

该匿名函数无需主动调用，由浏览器在合适时机自动调用。

操作元素

获取 / 修改元素内容

innerText 表示节点及其后代的渲染文本内容。

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

不识别 HTML 标签，非标准属性（IE 发起），读取结果不保留换行和空格。

<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 设置或获取 HTML 语法表示的元素后代。

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

识别 HTML 标签，W3C 标准，保留换行和空格。

<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 能获取并修改 HTML 结构，场景比 innerText 更多。

获取 / 修改元素属性

通过 Element 对象属性直接修改影响显示效果。

<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 标签）的属性可通过 DOM 修改：

value：input 的值。
disabled：禁用。
checked：复选框使用。
selected：下拉框使用。
type：input 类型。

代码示例：切换按钮文本

模拟播放按钮在'播放'与'暂停'之间切换。

<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
    if (btn.value === '播放') {
        btn.value = '暂停';
    } else {
        btn.value = '播放';
    }
}
</script>

代码示例：点击计数

输入初始值，每次点击按钮值 +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 属性决定表单元素内容。
输入框中 value 表示内容，修改会影响界面；界面上修改也会影响代码属性。
按钮中 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>