WEB APIs

DOM-获取元素

声明变量：优先用const，推荐用const声明数组和对象

DOM（文档对象模型）操作网页内容
DOM对象：浏览器根据html标签生成的JS对象

p.s.打印DOM对象可以用console.dir()

获取DOM元素
获取匹配的第一个元素：document.querySelector('CSS选择器')
获取匹配的多个元素：document.querySelectorAll('CSS选择器')
CSS选择器外面要加引号

修改内容

1. textContent或innerText 不会解析标签
2. innerHTML 会解析标签

修改样式

1. style 用小驼峰命名法
2. className 相当于class属性
3. classList 追加add()，删除remove()，切换toggle()

设置、获取表单的值
通过value属性
显示和隐藏密码：通过type属性切换”text”和”password”
disabled, checked, selected等属性的值用布尔值表示

自定义属性：以data-开头，通过dataset对象获取

定时器
间歇函数：setInterval(函数名, 时间)，函数名不要加括号
关闭定时器：先将定时器赋给变量，再用clearInterval()

DOM-事件基础

事件监听：addEventListener('事件', 函数)

事件类型
鼠标事件：click, mouseenter, mouseleave
焦点事件：focus, blur
键盘事件：keydown, keyup
用户输入文本事件：input

事件对象
有事件相关信息的对象，事件绑定的回调函数的第一个参数e
常用属性：type, clientX/clientY, offsetX/offsetY, key
检测回车键：用keydown事件，e.key === 'Enter'

p.s.去除两侧空格用trim()

环境对象：谁调用，this就是谁

回调函数：把一个函数当做另一个函数的参数传递

DOM-事件进阶

事件流两阶段

1. 事件捕获 依次向下
2. 事件冒泡 依次向上，常用

事件解绑
L0：用null覆盖
L2：用removeEventListener()，匿名函数无法解绑

鼠标经过事件
mouseenter和mouseleave 没有冒泡效果，推荐
mouseover和mouseout 有冒泡效果，需要事件委托时用

事件委托
能减少注册次数，提高程序性能
委托给父元素
触发的元素e.target，配合tagName使用

阻止流动传播：stopPropagation()，包括冒泡和捕获

阻止元素默认行为：preventDefault()

页面加载事件
给window添加load事件
给document添加DOMContentLoaded事件

页面滚动事件
scroll事件
被卷去的头部用scrollTop属性，可读写
页面滚动的头部距离：document.documentElement.scrollTop

页面尺寸事件
resize事件

获取元素宽高
不包含边框 clientWidth, clientHeight
包含边框 offsetWidth, offsetHeight

获取元素位置：offsetLeft, offsetTop，以定位父级为准

DOM-节点操作

日期对象
实例化：new Date()
年getFullYear()，月getMonth()+1，日getDate()
字符串格式：toLocaleString()
时间戳 从1970年开始 毫秒

获取当前时间戳：

1. new Date().getTime()
2. +new Date()
3. Date.now()

查找节点
父节点：parentNode
子节点：children
相邻节点：nextElementSibling, previousElementSibling

增加节点
创建节点：document.createElement(标签名)

追加节点
加到父元素最后：父元素.appendChild(要插入的元素)
加到指定元素前：父元素.insertBefore(要插入的元素, 在哪个元素前面)

克隆节点：元素.cloneNode(布尔值)，克隆时是否包含后代节点

删除节点：父元素.removeChild(子元素)

移动端事件
触屏事件：touchstart, touchmove, touchend
轮播图可以用swiper插件

小技巧
用preventDefault()阻止表单默认提交
用reset()清空表单

BOM-操作浏览器

定时器-延时函数
语法：setTimeout()
清除：clearTimeout()

JS执行机制
JS单线程，不可以多线程；浏览器可以多线程
同步 执行栈
异步 任务队列（消息队列）
事件循环（event loop）

location对象
href 跳转页面
search ?开头
hash #开头
reload() 刷新

navigator对象
userAgent 检测浏览器版本与平台

history对象
back() 后退
forward() 前进
go() 前进后退

本地存储localStorage
存储：localStorage.setItem(key, value)
获取：localStorage.getItem(key)
删除：localStorage.removeItem(key)

sessionStorage用法基本相同

注意：本地存储只能存字符串，存储复杂数据类型需要转换

JSON.stringify() 对象->JSON字符串
JSON.parse() JSON字符串->对象

数组map和join方法
map() 映射，处理数据并返回一个数组，回调函数的参数是数组元素和索引
join() 拼接字符串

正则表达式

一种匹配模式，用于匹配、替换、提取

正则表达式使用

1. 定义规则，const reg = / /
2. 是否匹配，reg.test(str)，规则在前

元字符
边界符
^ 开头
$ 结尾
通过组合来精确匹配

量词
* 重复>=0次
+ 重复>=1次
? 重复0或1次
{m,n} 重复m到n次

字符类
[abc] abc中的任何单个字符
[a-z] 小写英文字母中的任何单个字符
[^a-z] 除了小写英文字母之外的任何单个字符
. 除换行符之外的任何单个字符
\d 数字
\w 字母、数字和下划线

修饰符
i 不区分大小写
g 全局搜索
修饰符写在斜杠外部
替换：字符串.replace(/正则表达式/, '替换文本')

p.s. |表示或