Web APIs 常用方法手册

概述

JavaScript 由三个部分组成，ECMAScript、DOM 页面文档对象模型、BOM 浏览器对象模型。

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API，是 JS 的应用。主要用于实现浏览器与页面的交互功能。DOM 和 BOM 也就是 Web APIs。

Web API 一般都有输入和输出 ( 函数的传参和返回值 )，Web API 很多都是方法 ( 函数 )。

DOM 文档对象模型

学习目标：

• 能够说出什么是 DOM
• 能够获取页面元素
• 能够给元素注册事件
• 能够操作 DOM 元素的属性
• 能够创建元素
• 能够操作 DOM 节点

文档对象模型 ( Document Object Model)，是 W3C 组织推荐的处理可扩展标记语言 ( HTML 或者 XML ) 的标准编程接口。W3C 已经定义好了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构、样式等。

DOM 树：

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

获取页面元素

获取页面中的元素可以使用以下几种方法：

1. 根据 ID 获取
2. 根据标签名获取
3. 通过 HTML5 新增的方法获取
4. 特殊元素获取

// 通过 ID 获取
getElementById('Id名');

// 通过标签名获取
getElementsByTagName('标签名');

// 通过 HTML5 新增的方法获取
getElementsByClassName('类名');
querySelector('选择器'); // 返回指定选择器的第一个元素对象
querySelectorAll('选择器'); // 返回指定选择器的所有元素对象

// 特殊元素获取 body 元素
body;

// 特殊元素获取 html 元素
documentElement;

document.getElementById('main');
document.getElementsByTagName('li');
// 注意 如果使用 element.getElementsByTagName('标签名') 获取子元素时，父元素 element 必须为指定的单个元素
var ol = document.getElementsByTagName('ol');
ol[0].getElementsByTagName('li'); // 指定为序列为0的元素
// 父元素建议使用 Id 进行获取
var ol = document.getElementById('main'); // 指定id为main的元素
ol.getElementsByTagName('li');
document.querySelector('#main');

操作内容

innerText

起始位置到终止位置的内容，但它去除 html 标签，同时空格和换行也会去掉

innerHTML

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

// html 代码
<button>Replace Content</button>
<div>PUJI Design</div>
// js 代码
var btn = document.querySelector('button');
var box = document.querySelector('div');
btn.onclick = function() {
    box.innerText = 'Digital X Branding X Coding';
}

innerText 和 innerHTML 之间的区别

• innerText 不识别 html 标签，会直接将标签的字符打印出来
• innerHTML 可识别 html 标签
• innerText 是非标准，innerHTML 是 W3C 标准

操作属性

修改元素的属性

src / href / id / alt / title 等
// html 代码
<img src="image/pic1.png">
// js 代码
var img = document.querySelector('img');
pwd.src = 'image/pic2.png';

修改表单属性

type / value / checked / selected / disabled
// html 代码
<input type="password" value="" placeholder="请输入密码">
// js 代码
var pwd = document.querySelector('input');
pwd.type = 'text';

修改元素样式

style

给元素添加內联样式，style 属性采用驼峰命名法

className

修改元素类名，将对原来的类名进行替换

classList

返回一个元素的类属性的实时 DOMTokenList 集合，可以使用 add() 和 remove() 方法修改。

// 行内样式操作
div.style.backgroundColor = 'blue'
// 类名样式操作
div.className = 'change'
// 在原有的类中添加一个新的类名
div.classList.add('new')

自定义属性操作

element.getAttribute('属性');

获取属性值

• element.属性; 获取的是内置的属性值（元素本身自带的属性）；
• element.getAttribute(‘属性’); 获取内置/自定义的属性，由程序员自己添加的属性称为自定义属性；

设置自定义属性值

element.setAttribute('属性','值')；
// html 代码
<div class="head" index="1"></div>
// js 代码
var div = document.querySelector('div');
div.setAttribute('index', '2');

移除属性

element.removeAttribute('属性');

getAttribute / setAttribute / removeAttribute 主要用于自定义属性的操作，同时也可以使用于内置的属性。

HTML5 自定义属性

• HTML5 规定自定义属性以 data- 开头作为属性名并且赋值；
• HTML5 新增了 elment.dataset.属性名 或者 element.dataset[‘属性名’]的方法获取自定义的属性，其中属性名是 data- 后接的内容。如果使用 element.dataset 可以获取该标签中全部的以 data- 开头的自定义属性。
• 如果自定义属性里有多个-链接的单词，我们获取的时候采用驼峰命名法

操作节点

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

父级节点

parentNode

// html 代码
<div class="main">
  <p class="para">Content</p>
</div>
// js 代码
var para = document.querySelector('.para');
console.log(para.parentNode);

使用 parentNode 父节点，得到的是离该节点最近的上一级节点，如果找不到父节点就返回 null。

子级节点

childNodes

// html 代码
<div class="main">
  <p class="para">Content</p>
  <p class="para">Content</p>
  <p class="para">Content</p>
</div>
// js 代码
var main = document.querySelector('.main');
console.log(main.childNodes);

节点的类型判断

nodeType

使用 childNodes 子节点，得到的是该节点下面所有的子节点，包含元素节点、文本节点等，可以使用 nodeType 进行判断，因此不提倡使用此方法。

// 使用 nodeType 进行判断后获取
var main = document.querySelector('.main');
for (var i = 0; i < main.childNodes.length; i++) {
    if (main.childNodes[i].nodeType == 1) {
        console.log(main.childNodes[i]);
    }
}

子元素节点

children

使用 children 子元素节点，他是一个只读属性，返回所有的子元素节点，其余节点不返回。children 子元素节点是一个非标准，但兼容所有浏览器。

firstChild

获取子节点中的第一个节点

lastChild

获取子节点中的最后一个节点

firstElementChild

lastElementChild

// html 代码
<div class="main">
  <p class="para">Content</p>
  <p class="para">Content</p>
  <p class="para">Content</p>
</div>
// js 代码
var main = document.querySelector('.main');
console.log(main.children);

• firstChild / lastChild 返回第一个/最后一个子节点，找不到则返回 null。同样，也是包含所有的节点;
• firstElementChild / lastElementChild 则返回第一个/最后一个子元素节点，找不到则返回 null。但此方法不兼容 ie9 以下版本;
• 为解决兼容性问题，可以使用 node.children[i] 来实现。

兄弟节点

nextSibling / previousSibling

获取的是与节点平级的下一个/上一个兄弟节点，包含元素节点、文本节点等等，找不到则返回 null。

nextElementSibling / previousElementSibling

获取的是与节点平级的下一个/上一个兄弟元素节点，找不到则返回 null。但此方法不兼容 ie9 以下版本。

创建节点

createElement()

insertAdjacentHTML()

appendChild()

insertBefore()

// 创建节点
document.createElement('tagNam');
element.insertAdjacentHTML(position, text)
// 添加节点
node.appendChild(child); // 在节点的子节点后添加
node.insertBefore(child,指定元素); // 在节点的指定子节点前面添加

<ul>
  <li>123</li>
</ul>
var ul = document.querySelector('ul');
var newLi1 = document.createElement('li');
var newLi2 = document.createElement('li');
ul.appendChild(newLi1);
ul.insertBefore(newLi2, ul.children[0]);

• 要在页面中添加一个新的元素分为两个步骤，1、创建元素；2添加元素；
• creatElement() 创建一个新的节点；
• appendChild() 将一个节点添加到指定的父节点的子节点列表末尾；
• insertBefore() 将一个节点添加到指定的福节点中指定的子节点前面一个位置；
• 创建一个节点，只能添加一次，如需多次添加，需多次创建。

删除节点

removeChild()

方法从 DOM 中删除一个节点，返回值是删除的节点。

node.removeChild(child);
// html 代码
<div class="main">
  <p class="para">Content</p>
  <p class="para">Content</p>
  <p class="para">Content</p>
</div>
// js 代码
var main = document.querySelector('.main');
var btn = document.querySelector('.btn');
btn.onclick = function() {
    main.removeChild(main.children[0]);
}

复制节点 ( 克隆节点 )

cloneNode()

返回调用该方法的节点的一个副本，也称为克隆节点 / 拷贝节点。

node.cloneNode();
// html 代码
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
// js 代码
var ul = document.querySelector('ul');
var newLi = ul.children[0].cloneNode(true);
ul.appendChild(newLi);

• 如果括号内的参数为空或者为 false，则是浅拷贝，即只克隆节点本身，不克隆里面的子节点；
• 如果需要复制该节点的所有节点内容，则在括号内写上 true，也就是深拷贝。

留言功能案例

// html 代码
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>submit</button>
<ul></ul>
// js 代码
var btn = document.querySelector('button'),
    text = document.querySelector('textarea'),
    ul = document.querySelector('ul'); // 获取元素
btn.onclick = function() { // 绑定事件
  if (text.value != '') { // 判断输入框是否有内容
    var li = document.createElement('li'); // 创建节点
    li.innerHTML = text.value + " <a href='javascript:;'>删除</a>"; // 给节点添加内容
    ul.insertBefore(li, ul.children[0]); // 添加节点
    text.value = ''; // 清空输入框内容
    var del = li.querySelector('a');
    del.onclick = function() { // 添加删除功能
      ul.removeChild(this.parentNode); //删除该节点的父节点
    }
  }
}

三种动态创建元素的区别

// 方法
document.write();
innerHTML
document.creatElement()
// 示例
document.write('<div>a</div>');
var inner = document.querySelector('div');
inner.innerHTML = '<div>a</div>';
var creat = document.querySelector('div');
a = document.creatElement('div');
craet = a.appendChild(a);

• document.write()是直接将内容写入页面的内容流，但是如果文档流执行完毕，调用此语句会导致页面全部重绘，以前的内容都会丢失；
• innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘；
• 如果同时创建多个相同的标签，使用 innerHTML 应避免采用字符串进行拼接，否则效率会大大降低。使用数组形式先生成相应的数组，然后再使用数组进行拼接并赋值给 innerHTML 生成标签，效率相对于 creatElement() 会更高；
• creatElement() 创建多个元素效率相对低一点点，但是结构比较清晰。

// 拼接数组并采用 innerHTML 生成元素
var main = document.querySelector('.main');
var arr = [];
for (var i = 0; i <100;i++){
    arr.push('<a herf="https://puji.design">PUJI</a>');
}
main.innerHTML = arr.join('');

元素事件

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

目标

• 能够写出元素注册事件的两种方式
• 能够说出删除事件的两种方式
• 能够说出 DOM 事件流的三个阶段
• 能够说出事件委托的原理
• 能够说出常用的鼠标和键盘事件

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

事件由三部分组成，也称为事件三要素：

1. 事件源：事件被触发的对象（如按钮、输入框等）；
2. 事件类型：如何触发（如鼠标点击、鼠标滑过、键盘按下等）；
3. 事件处理程序：通过一个函数赋值的方式来完成

执行事件的步骤：

1. 获取事件源；
2. 注册事件（绑定事件）；
3. 添加事件处理程序（采用函数赋值形式）；

常用事件

click / mouseover / mouseout / mousemove / mouseup / mousedown / mouseenter

blur / focus

注册事件

给元素添加事件，称为注册事件或绑定事件

// 传统注册方式，利用on开头的事件
onclick
// 方法监听注册方式
addEventListener();

传统注册方式，特点是注册事件的唯一性，同一个元素同一个事件只能设置一个函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式，是 W3C 标准，特点是同一个元素同一个事件可以注册多个监听器，按照注册顺序依次执行。

eventTarget.addEventListener(type, listener[, useCapture]);
btn.addEventListener('click',function() {
  alert('Hi');
});

• type: 事件类型字符串，比如 click , mouseover
• listener: 事件处理函数，事件发生时，会调用该监听函数
• useCapture: 可选参数，是一个布尔值，默认 false，用于设置 DOM 的事件流。

删除事件

// 传统方式移除事件
btn.onclick = null;
// 标准方式
removeEventListener(type, listener[, useCapture]);
var btn = document.querySelector('button');
btn.addEventListener('click', fn);
function fn() {
    alert('Hi');
    btn.removeEventListener('click', fn);
}

• 里面的函数不需要调用执行，因此不需要加()

分派事件

dispatchEvent

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

旧版元素事件使用

// html 代码
<button id="btn">PUJI Design</button>
// js 代码
var btn = document.getElementById('btn');
btn.onclick = function() {
    alert('Digital X Branding X Coding');
}
// 说明：id为 'btn' 的 button 是一个事件源，onclick 为事件类型，后面的函数即为处理程序。

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法。首先排除其他元素，然后再设置自己的样式，称为排他思想。

// 使用 for 循环，同时为多个元素绑定事件
// html 代码
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
// js 代码
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = function() {
    for (var i = 0; i < btns.length; i++) {
      btns[i].style.color = '';
    }
    this.style.color = 'red';
  }
}

// 实现全选复选框功能
// html 代码
<div>
  <div class="head"><input type="checkbox"></div>
  <div class="list" id="list">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
  </div>
</div>
// js 代码
var select_all = document.querySelector('.head').querySelector('input');
var select_item = document.getElementById('list').getElementsByTagName('input');
select_all.onclick = function() {
    console.log(this.checked);
    for (var i = 0; i < select_item.length; i++) {
        select_item[i].checked = this.checked;
    }
}
for (var i = 0; i < select_item.length; i++) {
    select_item[i].onclick = function() {
        var flag = true;
        for (var i = 0; i < select_item.length; i++) {
            if (!select_item[i].checked) {
                flag = false;
                break;
            }
        }
        select_all.checked = flag;
    }
}

DOM 事件流

事件流描述的是从页面中接收事件的顺序

DOM 事件流分为 3 种阶段

• 捕获阶段：从 DOM 最顶层节点 (document) 开始依次往里进行事件的传播，直到到指定的元素接收的过程，useCapture 的值为 false；
• 当前目标阶段：
• 冒泡阶段：从指定的元素开始再依次往外传播，直到到 DOM 最顶层节点的过程，useCapture 的值为 true。

事件对象

event 对象代表事件发生后的状态，比如键盘按键的状态，鼠标位置，鼠标按钮的状态等。与事件相关的一系列信息数据的集合会放到这个对象里。

eventTarget.addEventListener('click', function(event) {});

• event 就是一个事件对象，写到我们监听函数的小括号里；
• event 是一个形参，系统会帮我们设定为事件对象，不需要传递实参；
• 我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）；
• 事件对象时我们时间的一些列相关数据的集合，跟事件相关，如鼠标点击里，包含了鼠标的相关信息，键盘事件则包含了键盘的相关信息。
• 事件对象的名称我们可以自己命名，比如 event , evt , e

事件对象的常见属性与方法

e.target // 返回触发事件的对象
e.type // 返回事件的类型
e.preventDefault() // 阻止默认事件，比如不让链接跳转
e.stopPropagation() // 阻止冒泡

事件委托

也称为事件代理，在 jQuery 里称为事件委派。

它的原理是不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡远离影响设置每个子节点，只操作了一次 DOM ，提高了程序性能。

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
var ul = document.querySelector('ul');
ul.addEventListener('click', fn);
function fn(e) {
    e.target.style.backgroundColor = 'red';
}

BOM 浏览器对象模型

目标

• 能说出什么是 BOM
• 能知道浏览器的顶级对象 window
• 能写出页面加载事件以及注意事项
• 能写出两种定时器函数并说出区别
• 能说出js执行机制
• 能使用location对象完成页面之间的跳转
• 能知晓navigator对象涉及的属性
• 能使用history提供的方法实现页面刷新

什么是 BOM

BOM ( Browser Object Model ) 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window 。BOM 缺乏标准，因此不同的浏览器兼容性可能会不同。

window 对象是浏览器的顶级对象，它具有双重角色。

1. 它是 JS 访问浏览器窗口的一个接口；
2. 它是一个全局对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。如定义在全局的变量 var i = 10; 可以使用 window.i 来获取。

页面事件

加载事件

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

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成后才触发该事件（包括图像、脚本文件、css文件等）

// 方法 1
window.onload = function() {};
// 方法 2
window.addEventListener('load',function() {});

• 有了 window.onload 就可以把 JS 代码写到页面的任何一个地方，因为 onload 是等页面内容全部加载完成后再去执行；
• window.onload 传统注册事件只能使用一次，如果有多个，会以最后一个 window.onload 为准；
• window.addEventListener(‘load’,function() {}) 是标准的写法，和 window.onload 的功能一致，但可多次使用

window.addEventListener(‘load’,function() {}) 与 document.addEventListener(‘DOMContentLoaded’, function() {}) 之间的区别，后者事件触发时，仅当 DOM 加载完成，不包括样式表，图片等外部资源。如果外部资源较多时，推荐使用 DOMContentLoaded 。

调整窗口大小事件

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

当浏览器窗口大小变化时就会触发调用函数。可以配合 window.innerWidth ( 获取当前窗口宽度 ) 进行使用。

// 方法 1
window.onresize = function() {};
// 方法 2
window.addEventListener('resize', function() {});

定时器

window 对象提供了2个非常好用的方法 – 定时器

// 方法 1，用于设置一个定时器，该定时器在定时器到期后执行调用函数
window.setTimeout(回调函数, [延迟的毫秒数]);
// 方法 2, 重复调用一个函数，每隔这个时间就去调用一次回调函数
window.setInterval(回调函数, [间隔的毫秒数]);
function fn() {
  console.log('Hi');
}
setTimeout(fn, 3000);

• 如果定时器比较多时，可以给定时器声明一个变量，并将定时器赋值给变量；
• 事件可以省略，默认是0，如果写，必须是毫秒；
• 定时器中的调用函数，需要等待调用的事件或时间，到了才去调用这个函数，因此我们也称为回调函数 callback，因此 element.addEventListener(‘click’, fn)里面的函数也是回调函数；
• window. 可以省略

停止 setTimeout() 定时器

window.clearTimeout(timeoutID);

• window. 可以省略
• timeoutID 是定时器的变量名

停止 setInterval() 定时器

window.clearInterval(intervalID)

• window. 可以省略
• timeoutID 是定时器的变量名

JS 执行机制

JavaScript 是单线程语言，也就是说，同一个时间只能做一件事。这是因为 JavaScript 这门脚本语言诞生的使命所致 —— JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行，应该先添加，再删除。

单线程就意味着，所有任务需要排队，前一个任务结束后才会执行后一个任务，这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

为了解决 JS 任务的排队问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是 JS 中出现了同步和异步。

同步和异步

前一个任务结束后才能执行后面的任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

在执行一个任务的时候，还可以同时执行其他的任务。

同步任务和异步任务

同步任务都在主线程上执行，形成一个执行栈

异步是通过回调函数实现的，异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。一般而言，异步任务有以下三种类型

1. 普通事件，如 click、resize等
2. 资源加载，如 load、error等
3. 定时器，包括 setTimeout、setInterval 等

执行过程

1. 先执行执行栈中的同步任务；
2. 异步任务（回调函数）放入任务队列中；
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈中开始执行。

location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可用于解析 URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

常用属性

location.href // 获取或设置整个 URL
location.host // 返回主机（域名）puji.design
location.port // 返回端口号 如果未写返回空字符串
location.pathname // 返回路径
location.search // 返回参数
location.hash // 返回片段 #后面内容 常见于链接 锚点

location 对象的方法

location.assign() // 跟 href 一样，可以跳转页面
location.replace() // 替换当前页面，因为不记录历史，所以不能后退
location.reload() // 重新加载页面，相当于刷新按钮或者 f5 如果参数为 true强制刷新

navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent, 该属性可以返回由客户机发送服务器的 user-agent 头部的值。

history 对象

与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL

back() // 后退
forward() // 前进
go() // 前进后退功能，参数如果是1前进一个页面，如果是-1后退一个页面

网页特效

offset

offset 就是偏移量，可以动态得到该元素的位置（偏移）、大小等。

• 获取元素距离带有定位父元素的位置
• 获取元素自身的大小（宽度与高度）
• 注意，返回的数值不带单位

offsetParent // 返回作为该元素带有定位的父级元素，如果父级都没有定位则返回 body
offsetTop // 返回元素相对带有定位父元素的上方偏移
offsetLeft // 返回元素相对带有定位父元素的左方偏移
offsetWidth // 返回自身包括padding、边框、内容区的宽度
offsetHeight // 返回自身包括padding、边框、内容区的高度

client

使用 client 系列的相关属性获取元素可视区的相关信息。通过 client 系列的相关属性可动态得到该元素的边框大小、元素大小等。

clientTop // 返回元素上边框的大小
clientLeft // 返回元素左边框的大小
clientWidth // 返回自身包括 padding、内容区的宽度，不含边框，返回数值不带单位
clientHeight // 返回自身包括 padding、内容区的高度，不含边框，返回数值不带单位

scroll

使用 scroll 系列的相关属性可以动态得到该元素的大小、滚动距离等。

scrollTop // 返回被卷上去的上侧距离
scroolLeft // 返回被卷去的左侧距离
scrollWidth // 返回自身实际的宽度（不包含边框）
scrollHeight // 返回自身实际的高度（不包含边框）

• scroll 得到的高宽是真正的内容的大小，如内容高度超出容器定义的高度，返回的将是内容的实际高度

getComputedStyle()

移动端

触屏事件

touch 对象代表一个触摸点。触屏事件可相应用户手指（或触控笔）对屏幕或者触控板的操作。

touchstart // 手指触摸到一个 DOM 元素时触发
touchmove // 手指在一个 DOM 元素上滑动时触发
touchend // 手指从一个 DOM 元素上移开时触发

触摸事件对象 ( TouchEvent )

touches // 正在触摸屏幕的所有手指的一个列表
targetTouches // 正在触摸当前 DOM 元素上的手指的一个列表
changedTouches // 手指状态发生了改变的列表，从无到有，从有到无变化

动画

动画实现原理

通过定时器 setInterval() 不断移动容器的位置。

实现步骤

1. 获得容器当前位置
2. 让容器在当前位置上加上1个移动距离
3. 利用定时器不断重复这个操作

缓动动画原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

参考链接

Web 常用 API 参考接口
https://developer.mozilla.org/zh-CN/docs/Web/API