什么是web APIs?

答：浏览器提供的一套操作浏览器、页面内容的功能（主要是一些对象和方法）

1.文档对象模型（DOM）

DOM是浏览器提供的一套专门用来操作网页内容的功能，它的核心思想是把网页内容当做对象来处理，用来开发网页内容特效和实现用户交互（全称：Document Object Model文档对象模型）

2.id名获取节点

①根据id查找元素节点：document.getElementById('id名')------传入的id是字符串，记得加引号，直接写id名即可，不需要加'#',会返回一个匹配到 ID 的DOM元素对象，找不到会得到null，可以通过对象里面的NodeType属性来标识节点类型

②查找HTML元素节点：document.documentElement

③查找body元素节点：document.body

3.节点属性

①nodeType节点类型

②nodeName节点名称（返回大写的标签名）

4.标签名获取节点

如果要获得多个元素，那么就要学会tagName查找节点：document.getElementByTagName('标签名')      获取结果为伪数组，什么是伪数组？

①具有length属性

②能够使用for循环遍历方法遍历它们（forEach不可以）

③不具有数组的push,pop等方法

5.操作属性----固有属性

①获取属性：元素.属性   例：d.title

②设置属性：元素.属性=值  例：d.title='哈哈哈'

6.自定义属性

①获取   元素. getAttribute('属性')

②设置   元素. setAttribute('属性'，'值')

③获取data类型属性  d.dataset.xxx

④设置data类型属性的值   d.dataset.xxx='yyy';

7.样式属性

单独修改

链式多个修改

8.操作文本内容

①innerText:属性，获取或者设置元素中的文本内容------只会识别文本

innerText

②innerHTML:属性，获取或者设置元素中的内容------可以识别标签

innerHTML

大部分双标签在操作内容的时候都会用到这两个属性（单标签和表单标签除外）

9.让body随机生成背景颜色

①准备三个随机数，作为组合rgb的三个参数

 let red = Math.floor( Math.random() * (255 - 0 + 1) + 0 );    

 let green = Math.floor( Math.random() * (255 - 0 + 1) + 0 );    

 let blue = Math.floor( Math.random() * (255 - 0 + 1) + 0 );

②配置背景颜色------操作样式属性

document.body.style.background = `rgb(${red}, ${green}, ${blue})`;

10.实例化时间日期

创建时间日期对象 

let d=new Date();

以本地时间日期格式显示调用toLocaleString()方法

d.toLocaleString();

11.时间日期对象方法

获取

设置的话，只需要将get用set进行替换即可，注意：没有setDay

应用：显示时间

①创建时间日期对象，并获取年月日时分秒的数据

初步准备

②判断：如果小于10说明是一位数，前面要补0的

补0操作

 ③拼接字符串

// 进行字符串的拼接，拼接成自己想要的格式
let str = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;

④既然是要将时间日期显示出来，那么就要获取到显示的容器，并且将拼接好的字符串放到容器文本中

初步显示

⑤这个时间是动态的，那么就需要每一秒都重新获取一次当前时间，所以将以上四步操作封装成函数，并使用反复性定时器，每一秒调用一次（函数名为timer）这里需要自己手动调用一次，是为了防止在创建页面时会有一秒的'错误'

定时调用

12.时间戳

时间戳是从1970年1月1日起开始记录，以毫秒记录，有三种方法可以获得时间戳

①给实例对象调用getTime（）方法

②简写： +new Date（）

③H5：Date.now()

应用：

①倒计时，原理是将目标时间的时间戳与当前时间的时间戳做差，然后进行时分秒的转换

得到基础数据及格式

②接下来就是显示在浏览器中，还是一样获取容器，通过innerText方法将时间拼接成需要的格式填入容器的文本中

静态实现

③通过定时器将静态时间显示成动态的，将以上步骤代码封装成一个函数，并在页面创建时手动调用一次（如需停止定时器，那么就通过clearInterval(timer)的方式将定时器清除，所以涉及到清除定时器，一定要记得给定时器起一个名字，这样清除起来会很方便）

定时器与时间的应用

13.延时定时器

setTimeout(函数,时间);------一次性定时器

清除一次性定时器：clearTimeout(名字)

利用递归模拟反复性定时器

setInterval(函数,时间);------反复性定时器

 清除反复性定时器：clearInterval(名字)

（非定时器代码优先于定时器代码执行）

14.动画

①JS动画：

requestAnimationFrame 是一个类似 setTimeout 的函数，在频繁操作 DOM 时的性能更好，但是浏览器的兼容性较setTimeout 稍差。

cancelAnimationFrame 停止执行 requestAnimationFrame

定义JS动画

注册事件调用动画

②css动画：（引入-->设置类）

方法1-----在style里面设置样式，之后注册事件，给元素添加相应类名以达到实现动画的效果

css动画

方法2------CSS3动画库

引入文件：<link rel="stylesheet" href="animate.min.css">，之后也是按照添加样式的方式使用即可

基类使用

15.正则使用

创建正则表达式：①字面量let reg = /abc/;②构造函数实例化 let reg = new RegExp(/123/);

测试查找：①let re = reg.exec(str);// 数组、null

② let re = reg.test(str);// true、false  

边界符： ^：以xxx为开头；$：以xxx为结尾；^$如果同时使用的话，称为精确匹配

 let reg = /^abc$/;// 精确匹配abc

 console.log( reg.test('abcabc') );

在字符串'abcabc'中精确匹配abc,返回false

字符集合：[ 字符 ] 、多选一

使用连字符 - 表示一个范围，如 [a-zA-Z]、[0-9]， 使用 ^ 匹配反向字符集，如 [^a-z] 匹配除了小写字母以外的字符

在目标字符中包含abc其中的一个或多个返回true

在目标字符中包含abc其中的一个才返回true

取反符^

预定义类：大写均为取反，默认多选一

\d：[0-9]； 匹配阿拉伯数字 0 ~ 9    \D:  [ ^0-9 ]

\w：[ a-zA-Z0-9_ ];匹配英文大小写字母、数字、下划线     \W:[ ^a-zA-Z0-9_ ]

\s：[空白符]； 匹配空白字符，如空格、换行符等    \S:[^空白符]

空白都为false，预定义类默认是多选一

字符集合：. ：匹配出了\n之外的所有单个字符

单个字符且不是\n

 匹配所有单个字符：
① let reg = /^(.|\n)$/;

②let reg = /^(\s|\S)$/;  

③ let reg = /^(\w|\W)$/

量词符：某个模式出现次数

① +: 表示重复至少 1 次：1次或者更多次>=1

② ?：表示重复 0 

③*: 表示重复 0 次或多次:>=0

④{n}：重复出现n次

⑤{n,}：重复出现n出或者更多次，>=n

⑥{n,m}：重复出现n次到m次

转义字符：

通过转义符（ \ ）将特殊含义的元字符视为普通字符对待。

字符串方法：

str = str.replace(/c/ig, '&&&');  //str.replace('旧'， '新');

修饰符：i:忽略大小写；g:全局匹配； m:支持多行匹配（多行针对的是 \r 或 \n 等换行符）

屏蔽敏感词案例

replace方法及修饰符的应用

16.表单

焦点事件：focus获得焦点，blur失去焦点

表单类型：表单除了文本框和选择框以外，还有更丰富的输入类型

表单类型

表单验证：表单类型为 email、url 自动支持表单验证功能，其它类型表单也允许自定义验证条件

属性 required 其含义为不能为空

属性 pattern 支持使用正则表达式进行验证

action="提交页面" method="提交方式"

属性使用场景

 表单提交

数据就是表单项的value值

要想把数据传递过去，表单项必须有name属性

name