Wep API

DOM 是用 JS 操作文档元素，BOM是用 JS 操作浏览器

DOM

DOM 是文档对象模型，也就是整个 html 文档

可以看到，所有标签、属性、文本都是 DOM 元素

DOM 操作元素

DOM 获取元素

DOM 需要操作，首先和 CSS 一样，利用选择器定位具体元素

语法	含义
document.querySelector('选择器');	返回匹配的第一个元素
document.querySelector('选择器')	返回匹配的所有元素伪数组
document.getElementById('id名');	根据 id 获取元素
document.getElementByTagName('<标签>');	根据标签获得所有元素
document.getElementByClassName('类名');	根据类名获得所有元素

操作元素内容

提取元素后当然要更改元素

语法	含义
对象.innerText = '值';	更新标签内内容不解析标签
对象.innerHTML = '值';	更新标签内内容解析标签
对象.属性 = 值;	操作元素属性
对象.style.样式属性 = 值;	操作样式属性也就是 css 操控的属性

操作元素类

如果修改很多值，那可以直接转化整个类

语法	含义
对象.className = '新类名';	覆盖新类
对象.classList.add('类名');	追加新类
对象.classList.remove('类名');	删除类
对象.classList.toggle('类名');	切换类

操作自定义属性

html5 标签新增了属性 data-x

可以通过 对象.dataset.x 访问

操作元素尺寸 / 位置

代码	含义
元素.offsetWidth	元素宽度
元素.offsetHeight	元素高度
元素.offsetLeft	元素 x 位置
元素.offsetTop	元素 y 位置

• 元素宽高包含 padding、border

• 获取元素位置，以带有定位父级元素为基准

DOM 事件

事件就是用户做的什么动作

事件类型	事件代码
鼠标事件	· click：鼠标点击 · mouseenter：鼠标经过 · mouseleave：鼠标离开
焦点事件	· focus：获得焦点 · blur：失去焦点
键盘事件	· Keydown：键盘按下 · Keyup：键盘弹起
文本事件	· input：用户输入
触屏事件	· touchstart：手指触摸到一个元素触发 · touchmove：手指在元素上滑动时触发 · touchend：手指从元素上移开时触发

事件属性

作为对象，事件自然而然有其属性

部分属性	含义
type	事件类型
clientX / clientY	光标相对于浏览器窗口左上角位置
offsetX / offsetY	光标相对于当前 DOM 元素左上角位置
key	按下键盘的值

事件流

事件流即事件触发后目标元素的传播路径

事件触发

事件也是对象，有事件激活时相关信息，即触发调出函数响应

元素对象.addEventListener('事件类型', 函数(e), 布尔值) {}

• 函数(e)：e 就是事件，可以通过 e.属性 获取事件属性
• 布尔值：是 true 就捕获阶段触发函数，默认冒泡阶段处理函数

解绑事件

当满足一定条件，某事件后不再触发该函数，即是解绑

元素对象.removeEventListener('事件类型', 函数(){})

匿名函数无法解绑

阻止默认行为

当元素有默认行为时_{比如点击到 <a> 就会跳转}，也可以设置使得默认行为不发生

元素对象.removeEventListener('事件类型', 函数(e){
    e.preventDefault();
})

阻止冒泡

根据事件流可以发现，激活某事件除了直接使得当前元素会触发函数，其所有祖宗函数也会触发函数

为了阻止点一点，所有祖宗冒出来，要阻止冒泡阶段在各路祖宗上一个个触发

元素对象.stopPropagation();

事件委托

另一种情况，所有子元素都需要触发某个事件_{比如 ul 下的 li}，为了提高代码复用，可以把事件写在父元素身上

虽然子元素没有写触发事件，但是父元素可以触发

可以通过下列方法找到真正触发的元素

事件对象.target.tagName;

DOM 节点操作

上述可以看出，DOM 是一个树型结构，因此他也有父节点、子节点、兄弟节点。当然这里操作的都是标签节点，这样可以对标签进行增删改查

查找节点

其实跟对树数据结构处理一样，要增删改，首先得查到他的父子节点

语法	含义
子元素.parentNode	父节点查找
父元素.children	子节点查找
元素.nextElementSibling	下一个兄弟节点查找
元素.previousElementSibling	上一个兄弟节点查找

增加节点

增加节点有两阶段，一个得创造一个新的节点，这可以创造新的标签对象，也可以直接复制生成一个新的；二阶段是把创造出的节点插入具体位置

语法	含义
document.createElement('标签名')	创建新的网页元素
元素.cloneNode(布尔)	克隆新节点 · true：连着后代一起克隆 · false：克隆不包含后代节点
父元素.appendChild(新节点)	新节点插入父元素下的最后一个元素
父元素.insertBefore(新节点, 元素位置)	插入到某个元素前面

删除节点

删除元素就得先定位到父元素

父元素.removeChild(元素)

BOM

相对于关注 HTML 文档的 DOM，BOM 关注操作的是浏览器本体

window 对象

window 对象是全局对象，是 JavaScript 的最顶级对象。所以很多面对 window 函数不用特地加上 window. 前缀

语法	含义
window.addEventListener('load', fn() {})	页面加载事件
window.addEventListener('scroll', fn () {})	元素滚动事件
window.addEventListener('resize', fn (){})	页面尺寸事件

页面加载事件

页面加载完成后触发

语法	含义
window.addEventListener('load', fn() {})	外部资源加载完成
document.addEventListener('DOMContentLoaded', fn () {})	HTML 文档被完全解析，不等待外部元素加载完成

元素滚动事件

就是元素滚动到某距离触发

语法	含义
window.addEventListener('scroll', fn () {})	页面滚动事件触发
元素.scrollTop;	从上向下滚动的距离
元素.scrollLeft;	从左向右滚动的距离
document,documentElement.scrollTop;	获取整个页面滚动距离

页面尺寸事件

窗口改变时触发

语法	含义
window.addEventListener('resize', fn (){})	页面尺寸改变触发
document.documentElement.clientWidth;	检测屏幕宽度
document.documentElement.clientHeight;	检测屏幕高度

location 对象

获取当前页面地址（URL）并把浏览器重定向到新页面

语法	含义
location.href	完整 URL 地址，赋值经常用于自动跳转
location.search	获得地址中携带的参数，即 ?后面部分
location.hash	获取地址哈希值，即 # 后面部分
reload 方法刷新当前页面	传入参数 true 时强制刷新

navigator 对象

记录浏览器相关信息，检测浏览器类型和平台

history 对象

包含浏览器历史

语法	含义
back()	后退
forward()	前进
go(参数)	1表示前进，-1表示后退

本地存储

操作	localStorage	sessionStorage
添加数据	localStorage.setItem(key, value)	sessionStorage.setItem(key, value)
获取数据	localStorage,getItem(key)	sessionStorage.getItem(key)
删除数据	localStorage.removeItem(key)	sessionStorage.removeItem(key)

• localStorage：将数据永久存在本地用户电脑，关闭页面也会存在

• sessionStorage：生命周期为关闭浏览器

• 本地存储只能存储字符串，无法存储复杂数据类型，因此将复杂数据转为json字符串

  /* 增加数据 */
  localStorage.setItem(key, JSON.stringfy(value))
  /* 获取数据 */
  JSON.parse(localStorage.getItem(key))

定时器

定时器-间歇函数

操作	间歇函数	延时函数
开启定时器	setInterval('函数名()', 间隔时间);	clearInterval(定时器对象);
关闭定时器	`setTimeout(回调函数, 等待时间)	clearTimeout(定时器对象)

• 间歇函数使得函数重复执行代码

  延时函数只执行一次，把一段代码延迟执行

• 间隔时间单位是毫秒