【前端】JavaScript（WebAPI）

一、WebAPI 背景知识

1、什么是 WebAPI

前面学习的 JS 分成三个大的部分：

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

WebAPI 就包含了 DOM + BOM，这个是 W3C 组织规定的（和制定 ECMAScript 标准的大佬们不是一伙人）。前面学的 JS 基础语法主要学的是 ECMAScript，这让我们建立基本的编程思维。但是真正来写一个更加复杂的有交互式的页面，还需要 WebAPI 的支持。

2、什么是 API

API 是一个更广义的概念，而 WebAPI是一个更具体的概念，特指 DOM + BOM。

所谓的 API 本质上就是一些现成的函数 / 对象，让程序员拿来就用，方便开发。相当于一个工具箱，只不过程序员用的工具箱数目繁多，功能复杂。

3、API 参考文档

Web API | MDN

可以在搜索引擎中按照 "MDN + API 关键字" 的方式搜索，也能快速找到需要的 API 文档。

二、DOM 基本概念

1、什么是 DOM

DOM全称为 Document Object Model。

W3C 标准给我们提供了一系列的函数，让我们可以操作：

网页内容
网页结构
网页样式

2、DOM 树

一个页面的结构 是一个树形结构，称为 DOM 树。

树形结构在数据结构阶段会介绍，可以简单理解成类似于 "家谱" 这种结构。

页面结构形如：

DOM 树结构形如：

重要概念：

文档：一个页面就是一个文档，使用 document 表示
元素：页面中所有的标签都称为元素，使用 element 表示
节点：网页中所有的内容都可以称为节点（标签节点、注释节点、文本节点、属性节点等），使用 node 表示

这些文档等概念在 JS 代码中就对应一个个的对象，所以才叫 "文档对象模型"。

三、获取元素

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

1、querySelector

这个是 HTML5 新增的，IE9 及以上版本才能使用。

前面的几种方式获取元素的时候都比较麻烦，而使用 querySelector能够完全复用前面学过的 CSS 选择器知识，达到更快捷更精准的方式获取到元素对象。

javascript 复制代码

var element = document.querySelector(selectors);

selectors 包含一个或多个要匹配的选择器的 DOM 字符串 DOMString String - JavaScript | MDN。该字符串必须是有效的 CSS 选择器字符串；如果不是，则引发 SYNTAX_ERR 异常
表示文档中与指定的一组 CSS 选择器匹配的第一个元素的 html 元素 Element Element - Web API | MDN 对象
如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll() Document.querySelectorAll - Web API | MDN
可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素

正因为参数是选择器，所以一定要通过特殊符号指定是哪种选择器。

2、querySelectorAll

使用 querySelectorAll用法和上面类似。

四、事件初识

1、基本概念

JS 要构建动态页面 ，就需要感知到用户的行为。用户对于页面的一些操作（点击、选择、修改等）操作都会在浏览器中产生一个个事件，被 JS 获取到，从而进行更复杂的交互操作。

浏览器就是一个哨兵，在侦查敌情（用户行为）。一旦用户有反应（触发具体动作），哨兵就会点燃烽火台的狼烟（事件），后方就可以根据狼烟来决定下一步的对敌策略。

2、事件三要素

事件源：哪个元素触发的
事件类型：是点击、选中，还是修改
事件处理程序：进一步如何处理，往往是一个回调函数

点击事件：

btn 按钮就是事件源 。点击就是事件类型 。function 这个匿名函数就是事件处理程序 ，其中 **btn.onclick = function()**这个操作称为注册事件 / 绑定事件。

注意：这个匿名函数相当于一个回调函数，这个函数不需要程序员主动来调用，而是交给浏览器，由浏览器自动在合适的时机（触发点击操作时）进行调用。

键盘按下事件：

onkeypress 区分字母大小写，onkeydown 不区分。

注意：不是所有键（例如 ALT、CTRL、SHIFT、ESC）都会在所有浏览器中触发 onkeypress 事件。如需只检测用户是否按下了某个键，请改用 onkeydown事件，因为它适用于所有键。

键盘松开事件：

五、操作元素

1、获取/修改元素内容

（1）innerText

Element.innerText 属性表示一个节点及其后代的 "渲染" 文本内容。

javascript 复制代码

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

不识别 html 标签，是非标准的（IE 发起的），读取结果不保留 html 源码中的换行和空格。

可以看到，通过 innerText 无法获取到 div 内部的 html 结构，只能得到文本内容。修改页面的时候也会把 span 标签当成文本进行设置。

（2）innerHTML

Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。

javascript 复制代码

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

先获取到事件源的元素
注册事件

识别 html 标签，W3C 标准的。读取结果保留 html 源码中的换行和空格。

可以看到 innerHTML 不光能获取到页面的 html 结构，同时也能修改结构，并且获取到的内容保留的空格和换行。

innerHTML 用的场景比 innerText 更多。

2、获取 / 修改元素属性

可以通过 Element 对象的属性来直接修改，就能影响到页面显示效果。

可以看到 img 这个 Element 对象中有很多属性。可以在代码中直接通过这些属性来获取属性的值并直接修改：

3、获取 / 修改表单元素属性

表单（主要是指 input 标签）的以下属性都可以通过 DOM 来修改

value：input 的值
disabled：禁用
checked：复选框会使用
selected：下拉框会使用
type：input 的类型（文本、密码、按钮、文件等）

切换按钮的文本（假设这是个播放按钮，在 "播放" - "暂停" 之间切换）：

点击计数（使用一个输入框输入初始值（整数），每次点击按钮，值 +1）：

input 具有一个重要的属性 value，这个 value 决定了表单元素的内容
如果是输入框 ，value 表示输入框的内容，修改这个值会影响到界面显式；在界面上修改这个值也会影响到代码中的属性
如果是按钮，value 表示按钮的内容，可以通过这个来实现按钮中文本的替换

全选 / 取消全选按钮：

点击全选按钮，则选中所有选项
只要某个选项取消，则自动取消全选按钮的勾选状态

4、获取 / 修改样式属性

CSS 中指定给元素的属性，都可以通过 JS 来修改。

（1）行内样式操作

javascript 复制代码

element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];

"行内样式"，通过 style 直接在标签上指定的样式，优先级很高。适用于改的样式少的情况。

点击文字则放大字体：

style 中的属性都是使用驼峰命名 的方式和 CSS 属性对应的。例如: font-size => fontSize, background-color => backgroundColor 等。这种方式修改只影响到特定样式，其他内联样式的值不变。

（2）类名样式操作

javascript 复制代码

element.className = [CSS 类名];

修改元素的 CSS 类名，适用于要修改的样式很多的情况。由于 class 是 JS 的保留字，所以名字叫做 className。

开启夜间模式：

点击页面切换到夜间模式（背景变成黑色）
再次点击恢复日间模式（背景变成白色）

5、操作节点

（1）新增节点

分成两个步骤：

创建元素节点
把元素节点插入到 dom 树中

A. 创建元素节点

使用 createElement 方法来创建一个元素，options 参数暂不关注。

javascript 复制代码

var element = document.createElement(tagName[, options]);

此时发现，虽然创建出新的 div 了，但是 div 并没有显示在页面上。这是因为新创建的节点并没有加入到 DOM 树中。

上面介绍的只是创建元素节点，还可以使用：

createTextNode 创建文本节点
createComment 创建注释节点
createAttribute 创建属性节点

以 createElement 为主即可。

B. 插入节点到 dom 树中

使用 appendChild将节点插入到指定节点的最后一个孩子之后：

javascript 复制代码

element.appendChild(aChild)

使用 insertBefore将节点插入到指定节点之前：

javascript 复制代码

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode 被插入节点（newNode）
parentNode 新插入节点的父节点
newNode 用于插入的节点
referenceNode newNode 将要插在这个节点之前

如果 referenceNode 为 null，则 newNode 将被插入到子节点的末尾。

注意：referenceNode 引用节点不是可选参数。

如果针对一个节点插入两次，则只有最后一次生效（相当于把元素移动了）：

一旦一个节点插入完毕，再针对刚刚的节点对象进行修改，能够同步影响到 DOM 树中的内容：

（2）删除节点

使用 removeChild删除子节点。

javascript 复制代码

oldChild = element.removeChild(child);

child 为待删除节点
element 为 child 的父节点
返回值 为该被删除节点
被删除节点只是从 dom 树被删除了，但是仍然在内存中，可以随时加入到 dom 树的其他位置
如果上例中的child 节点不是 element 节点的子节点 ，则该方法会抛出异常

6、代码案例：猜数字

7、代码案例：表白墙

8、代码案例：待办事项

实现新增：

点击复选框后将元素放到 "已完成"：

点击删除按钮删除该任务：

注意：

在事件回调函数中使用 this 能够获取到当前处理事件的元素

通过 this.parentNode 属性能够获取到当前元素的父元素

点击 checkbox 时，会先修改 value，再触发点击事件