什么是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
网友评论