web API 常用方法大全（JS）

querySelector ~满足条件的第一个元素

querySelectorAll ~满足条件的元素集合（伪数组）

innerText ~显示纯文本，不解析标签

innerHTML ~会解析标签，多标签建议使用模板字符

style ~控制标签style行内样式，操作css属性需要遵循驼峰命名

className ~属性可控制标签class属性

add ~添加类

remove ~删除类

toggle ~切换类

value ~值

disabled=true ~按钮不可点击

checked= true ~复选框默认选择

selected ~下拉列表的默认显示

data- ~自定义属性

dataset ~自定义属性获取

setInterval(回调函数, 间隔时间) ~间歇定时器

clearInterval(定时器名) ~清理间歇定时器

addEventListener ~事件监听

click ~鼠标点击事件

mouseenter ~鼠标经过

mouseleave ~鼠标离开

focus ~获得焦点

blur ~失去焦点

keydown ~键盘按下触发

keyup ~键盘抬起触发

key ~ 键盘按键值

type ~事件类型

submit ~ 提交事件，一般用来阻止表单的提交默认行为时使用

this ~环境对象，谁调用，它就是谁

DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

e 、event ~ 回调函数的第一个参数就是事件对象

e.stopPropagation() ~阻止事件冒泡

e.preventDefault() ~阻止元素默认行为

e.target ~触发的目标元素

e.target.tagName ~触发的目标元素字母

window ~全局对象，也可以说是JavaScript中的顶级对象

scroll ~页面滚动事件

window.addEventListener('scroll', fn) ~滚动条在滚动的时候持续触发的事件

scrollTop ~在scroll事件里面获取被卷去的高度，可修改

scrollLeft ~在scroll事件里面获取被卷去的宽度，可修改

resize ~页面尺寸事件

window.addEventListener('resize', fn) ~给window注册尺寸改变事件

clientWidth ~获取元素的可见部分宽 （不包含border，margin，滚动条等）

clientHeight ~获取元素的可见部分高（不包含border，margin，滚动条等）

offsetWidth ~获取的是当前元素到自己最近的开启定位的父元素的宽，包含元素宽高，内边距，边框，不包含外边距

offsetHeight ~获取的是当前元素到自己最近的开启定位的父元素高，包含元素宽高，内边距，边框，不包含外边距

document.documentElement.scrollTop=0 ~回到页面顶部

new Date() ~日期对象

.getFullYear() //年

.getMonth() //月

.getDate() //日

.getDay() //周

.getHours() //时

.getMinutes() // 分

.getSeconds() // 秒

toLocaleString() ~ 返回该日期对象的字符串（包含日期和时间）

toLocaleDateString() ~ 返回日期对象日期部分的字符串

toLocaleTimeString() ~ 返回日期对象时间部分的字符串

元素.parentNode ~查找父节点

父元素.children ~ 查找子节点（伪数组）

.previousElementSibling ~查找上一个兄弟元素

.nextElementSibling ~查找下一个兄弟元素

元素.remove() ~删除节点

touchstart ~触摸开始（移动端）

touchmove ~滑动中（移动端）

touchend ~手指离开（移动端）

forEach ~遍历数组

字符串.substring(起始索引号, [结束索引号]) ~获取字符串中的字符

setTimeout(回调函数, 延迟时间) ~延时定时器

clearTimeout(定时器名) ~清除延时定时器

location ~对象，主要负责网页的地址栏

location.href ~跳转页面

location.reload() ~刷新

navigator.userAgent ~主要用来获取浏览器的信息（了解）

histroy ~对象，主要负责管理历史记录

.forward() ~前进一页

.back() ~后退一页

.go(值) ~ 值为 1 前进一页， 值为- 1后退一页

localStorage.setItem('键', '值') ~本地存储数据

localStorage.getItem('键') ~取出本地存储的数据

localStorage.removeItem('键') ~删除本地存储的数据

JSON ~字符串的语法

JSON.stringify(复杂数据类型) ~将复杂数据转换成JSON字符串（一般用来数组转字符串）

JSON.parse(JSON字符串) ~将JSON字符串转换成对象（一般不用）

map ~循环，可以遍历数组处理数据，并且返回新的数组

test ~方法用于判断是否有符合规则的字符串

+号 ~表示重复至少 1 次

?号 ~表示重复 0 次或1次

*号 ~表示重复 0 次或多次

{m,n} ~表示复 m 到 n 次

[abc] ~三选1

[a-z] ~26个小写英文字母选1

i ~是单词 ignore 的缩写，正则匹配时字母不区分大小写

g ~是单词 global 的缩写，匹配所有满足正则表达式的结果

change ~ 事件，值被修改并且失去焦点后触发

contains ~元素.classList.contains() 查看有没有包含某个类，如果有则返回true，么有则返回false

required ~表单 input 的属性,表示必填项，加了该属性就必须要 用户填写后才可以提交