**webapi 网页api可以直接调用
webapi
1.前端三老铁
HTML： 确定结构
CSS ： 确定样式
JS ： 确定交互
2. JS组成三部分
ECMAScript : 确定js的语法规范
DOM
document object model : 操作(增 删改查)网页内容
BOM
操作浏览器窗口
3. web = dom + bom
一套操作网页内容+浏览器窗口的 函数
参数
功能
返回值
DOM
增删改查
查
查元素
document.querySelector('选择器')
document.querySelectorAll('选择器')
两者区别
querySelector() : 得到dom对象， 直接使用dom语法
querySelectorAll() : 得到数组，不能直接使用dom语法。 一定要通过下标取出里面的dom对象，才可以使用dom语法
查元素属性
内容属性
元素.innerText : 获取文本
元素.innerHTML : 获取文本 + 标签
HTML属性
元素.属性名
改图片：img.src
改链接：a.href
CSS属性
单个修改： 元素.style.样式名 = 样式值
多个修改： 元素.className = '类名'
classList语法
新增： 元素.classList.add('类名')
移除： 元素.classList.remove('类名')
切换： 元素.classList.toggle('类名')
注意点：如果css属性有-，需要转小驼峰。(1)去掉- (2)-后面首字母大写
css行内权重
表单属性
表单值(输入框文本)
元素.value
表单状态(布尔)
是否禁用
元素.disabled
是否选中(radio与checkbox)
元素.checked
是否选中(option)
元素.selected
查节点
查子元素
父元素.children
查兄弟元素
上一个元素
元素.previousElementSibling
下一个元素
元素.nextElementSibling
查父元素
元素.parentNode
增
(1)在内存创建空标签： document.createElement('标签名')
(2)设置内容
(3)添加到页面dom
新增到最后面： 父元素.appendChild(元素)
新增到元素前面： 父元素.insertBefore( 新增元素, 哪个元素前面 )
删
父元素.removeChild(子元素)
改
事件
1.事件交互 三要素
1. 事件源 ： 什么元素
2.事件类型 ： 什么时刻
3.事件处理函数
2.注册事件
事件源.事件类型 = 事件处理函数
box.onclick = function(){ }
事件源.addEventListener('事件类型',事件处理函数)
3.事件注意点
3.1 事件注册的时候不会执行。 （函数声明的时候不执行）
3.2 用户触发事件,浏览器捕捉交互，自动帮我们调用事件处理函数 （浏览器自动调用函数）
4.事件类型
鼠标事件
鼠标单击： onclick
鼠标双击： ondblclick
鼠标移入： onmouseenter
鼠标移出： onmouseleave
鼠标移动： onmousemove
键盘事件
输入事件： oninput
实时获取输入框文本
成为焦点： onfocus
失去焦点： onblur
键盘按下： onkeydown
监听enter键
键盘松开： onkeyup
页面事件
页面移动： window.onmousemove
页面滚动： window.onscroll
页面滚动距离 ： document.documentElement.scrollTop
页面大小变化 : window.onresize
页面视口宽度 ： document.documentElement.clientWidth
5.事件对象
1.事件对象作用 ：
存储与事件相关的数据 （浏览器自动捕获鼠标坐标与键盘按键，自动存储对象）
2.如何获取事件对象
给事件处理函数添加形参 e
3.事件对象常用属性
e.pageX / e.pageY : 获取鼠标触发点 到 页面左上角距离
e.key
获取按键字符串 ‘Enter’ 'Tab'
e.keyCode
获取按键ASCII码 13
e.preventDefalt()
阻止form和a默认事件
e.stopPropagation()
阻止事件流
6.事件流（事件冒泡与事件捕获）
1.事件冒泡 ：
触发元素事件，依次触发父级元素‘同名事件’
元素->父元素->body->html->document->window
2.事件捕获
触发元素事件，从最顶级父元素依次往里触发‘同名事件’
window->document->html->body->父元素->元素
3.事件流三个阶段
1.事件捕获
2.事件目标
3.事件冒泡
7.事件委托
1.事件委托 ： 给父元素注册，委托给子元素处理
(1)给父元素注册事件
(2)判断委托子元素
2.事件委托原理 ： 事件冒泡
3.事件委托注意点：
不能用this, this指向父元素
需要用e.target, 指向触发事件的子元素
4.事件委托应用：
动态新增元素注册事件
网页特效
offset家族
获取元素 ‘自身’ 宽高与位置
元素.offsetWidth / 元素.offsetHeight
width+padding+border
元素.offsetLeft / 元素.offsetTop
自身 到 定位父元素 左/上 内边框距离
scroll家族
获取元素 ‘内容’ 宽高与位置
元素.scrollWidth / 元素.scrollHeight
内容宽高
元素.scrollLeft / 元素.scrollTop
内容位置 ： 滚动条滚动的距离
应用
固定导航
回到顶部 设置页面scrollTop为0
client家族
获取元素 ‘可视区域’ 宽高与位置
元素.clientWidth / 元素clientHeight
视口大小
元素.clientLeft / 元素.clientTop
左边框和上边框宽度
应用：响应式（横竖屏适配）
BOM
1.定时器
1.定时器作用
一段代码 间隔时间 反复执行
2.定时器语法
永久定时器 setInterval()
开启： let timeID = setInterval( 回调函数, 时间间隔 )
清除： clearInterval(timeID)
一次定时器 setTimeout()
开启： let timeID = setTimeout( 回调函数, 时间间隔 )
清除： clearTimeout(timeID)
3.定时器场景
一次定时器： 3s消失广告
永久定时器
秒杀
无限轮播
2.五大对象
window:浏览器窗口
特点
1.是js中的顶级对象, 所有的全局函数，对象都是window里面的成员
2.window的成员使用时可以省略window
3.window的top属性不能作为变量名
方法
打开窗口： window.open()
关闭窗口： window.close()
事件
window.onload事件（入口函数）
DOM树 + 外部资源 加载完毕后执行
window.onbeforeunload事件（关闭事件）
页面关闭的时候执行，一般用于存储数据
location : 地址栏
跳转网页 location.href = 'url'
location.assign('url') : 跳转
location.replace('url') : 替换（不能回退）
location.reload() : 刷新
history : 历史记录
history.back() : 回退一页
history.forward() : 前进一页
history.go( 数字 )
负数 ： 回退 -1页 -2页
0 ： 刷新
正数： 前进 1页 2页
navigator : 用户信息（了解）
naviagtor.userAgent
screen : 用户电脑屏幕(了解)
3.存储器 localStorage与sessionStorage
1.作用一致：都是存储数据
存储大小： 5MB
只能存储字符串
2.语法一致：
设置：setItem('属性名',属性值)
获取： getItem('属性名)
删除： removeItem('属性名)
清空： clear()
3.面试点：两者区别
localStorage ： 硬盘存储
sessionStorage：内存存储
正则
1. 正则是 对字符串进行匹配运算 的对象
2.作用 ： 对字符串进行匹配运算
文本格式校验
手机号
验证码
账号6-20
3.语法
(1)声明
new RegExp('正则')
/正则/
（2）校验
test() true:通过 false:不通过
元字符
[]
[^]
.
\
^
$
?
*
+
{}
()
|
