Web API基本认知

1、Web API基本认知

1.1、Web API作用和分类

• 作用：就是使用JS去操作html和浏览器
• 分类：DOM（文档对象模型）、BOM（浏览器对象模型）

1.2、什么是DOM？

文档对象模型（Document Object Model），简称DOM，将所有页面内容表示为可以修改的对象。document对象是页面的主要入口点。我们可以使用它来更改或创建页面上的任何内容。

1.3、什么是BOM？

浏览器对象模型（Browser Object Model），简称BOM，表示由浏览器（主机环境）提供的用于处理文档document之外的所有内容的其他对象。

2、DOM文档对象模型

2.1、DOM树是什么？

• 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
• 描述页面内容关系的名词
• 文档树直观的体现了标签与标签之间的关系

2.2、DOM对象

• DOM对象是浏览器根据HTML标签生成的JS对象
• 所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签身上
• DOM的核心就是把内容当对象来处理

2.3、document是什么？

• 是DOM里提供的一个对象
• 网页所有内容都在document里面
• document提供的属性和方法都可以用来访问和操作网页上的内容

2.4、获取DOM对象

语法	返回值
document.querySelector(‘css选择器’)	CSS选择器匹配的第一个元素
document.querySelectorAll(‘css选择器’)	CSS选择器匹配的NodeList集合
document.getElementById()	根基id，获取元素
document.getElementsByTagName()	根据标签名，获取元素
document.getElementsByClassName()	根据类名，获取元素

2.5、修改DOM元素内容

2.5.1 document.write()

• 只能将文本追加到</body>前面的位置
• 文本中包含的标签会被解析

2.5.2 innerText属性

• 将文本内容添加/更新到任意标签位置
• 文本中包含的标签不会被解析

2.5.3 innerHTML属性

• 将文本内容添加/更新到任意标签位置
• 文本中包含的标签会被解析

2.6、修改DOM元素属性

2.6.1 修改元素常用属性

语法：

对象.属性 = 值

2.6.2 修改元素样式属性

语法：

对象.style.样式属性 = 值

注意：

• 修改样式通过style属性引出
• 如果属性有-连接符，需要转换为小驼峰命名法
• 赋值的时候，需要的时候不要忘记加css单位

语法：

对象.className = 值

注意：

• 使用className可以修改多个样式
• className会覆盖以前的类名

语法：

// 追加一个类
对象.classList.add('类名')
// 删除一个类
对象.classList.remove('类名')
// 切换一个类
对象.classList.toggle('类名')

注意：

• classList追加和删除不影响以前类名

3、事件

3.1、事件监听

3.1.1 什么是事件？

事件是在编程时系统内发生的动作或者发生的事情，比如用户在页面中点击某个按钮

3.1.2 什么是事件监听？

就是让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出相应，也称为注册事件。

3.1.3 事件监听三要素？

• 事件源：哪个dom元素被事件触发了，要获取dom元素
• 事件：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
• 事件调用的函数：要做什么事

3.1、事件类型

事件类型	触发方式	触发事件
鼠标事件	鼠标触发	click（鼠标点击）、mouseenter（鼠标经过）、mouseleave（鼠标离开）
焦点事件	表单获得光标	focus（获得焦点）、blur（失去焦点）
键盘事件	键盘触发	keydown（键盘按下触发)、keyup（键盘抬起触发）
文本事件	表单输入触发	input用户输入事件

4、节点操作

4.1、 DOM节点

4.1.1 什么是DOM节点

• DOM树里每一个内容都称之为节点

4.1.2 DOM节点的分类

• 元素节点：div、span标签
• 属性节点：class、href属性
• 文本节点：标签里的文字

4.2 查找节点

4.2.1 查找父节点

• parentNode属性
• 返回最近一级的父节点找不到返回null

语法：

子元素.parentNode

4.2.2 查找子节点

• childNodes获取所有子节点、包括文本节点（空格、换行）、注释节点等
• children仅获得所有元素节点

4.2.3 查找兄弟节点

• nextElementSibling下一个兄弟节点
• previousElementSibling上一个兄弟节点

4.2、增加节点

4.2.1 创建节点

• 创建一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
• 创建元素节点方法：document.createElement(‘标签名’)

4.2.2 追加节点

• 插入到父元素的最后一个子元素：父元素.appendChild(‘要插入的元素’)
• 插入到某个子元素前面：父元素.insertBefore(要插入的元素, 在哪个元素前面)

4.2.3 克隆节点

语法：元素.cloneNode(布尔值)

• 布尔值为true，代表克隆时会包含后代节点一起克隆
• 布尔值为false，代表克隆时不包含后代节点
• 默认为false

4.2.4 删除节点

语法：父元素.removeChild(要删除的元素)

• 如果不存在父子关系则删除不成功

5、重绘和回流

5.1、浏览器是如何进行界面渲染的

• 解析（Parser）HTML，生成DOM树（DOM Tree）
• 解析（Parser）CSS，生成样式规则（Style Rules）
• 根据DOM树和样式规则，生成渲染树（Render Tree）
• 进行布局Layout（回流/重排）：根据生成的渲染树，得到节点的几何信息（位置，大小）
• 进行绘制Painting（重绘）：根据计算和获取的信息进行整个页面的绘制
• Display: 展示再页面上

5.2、重绘和回流（重排）

• 当Render Tree中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流
• 由于节点（元素）样式的改变并不会影响它在文档流中的位置和文档布局时，成为重绘
• 重绘不一定引起回流，而回流一定会引起重绘

5.3、导致回流（重排）的操作

• 页面首次刷新
• 浏览器的窗口大小发生改变
• 元素大小或位置发生改变
• 改变字体大小
• 增加或删除元素

6、事件高级

6.1、事件对象

6.1.1 事件对象是什么？

• 事件对象也是个对象，这个对象里有事件触发时的相关信息

6.1.2 事件对象在哪里？

• 在事件绑定的回调函数的第一个参数就是事件对象

6.1.3 事件对象常用属性

属性	说明
type	获取当前的事件类型
clientX/clientY	获取光标相对于浏览器可见窗口在左上角的位置
offsetX/offsetY	获取光标相对于当前DOM元素左上角的位置
key	用户按下的键盘建的值

6.1、事件冒泡和事件捕获

事件冒泡：当一个事件发生在一个元素上，他首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序

事件捕获：事件捕获与冒泡恰恰相反，当鼠标点击或触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定事件。

6.2、阻止事件流动

• 因为默认就是冒泡模式的存在，所以容易导致事件影响到父级元素
• 若想把事件限制在当前元素内，就需要阻止事件流动
• 阻止事件流动需要拿到事件对象
• 语法：事件对象.stopPropagation()
• 此方法可以阻断事件流动传播，不只在冒泡阶段有效，捕获阶段也有效
• mouseover和mouseout会有冒泡效果
• mouseenter和mouseleave没有冒泡效果

6.3、阻止默认行为

• 阻止默认行为，比如链接点击不跳转，表单域的跳转
• 语法：e.preventDefault()

6.4、事件委托

• 优点：给父元素加事件可以提高性能
• 原理：事件委托其实是利用事件冒泡的特点
• 实现：事件对象.target可以获得真正触发事件的元素

6.5、滚动事件

语法：

    window.addEventListener('scroll', function() {})

6.6、DOMContentLoaded和load区别

• load仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完之后才会触发load事件
• 当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

7、元素位置和大小

7.1、offset系列

属性	作用
offsetParent	返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
offsetTop	返回元素相对带有父元素上方的偏移量
offsetLeft	返回元素相对带有定位父元素左边框的偏移量
offsetWidth	返回自身包含border、padding、内容区域的宽度，不带单位
offsetHeight	返回自身包括border、padding、内容区域的宽度，不带单位

7.2、client系列

属性	作用
clientTop	返回元素上边框的大小
clientLeft	返回元素左边框的大小
clientWidth	返回自身包含padding、内容区域的宽度，不带单位
clientHeight	返回自身包括padding、内容区域的宽度，不带单位

7.3、scroll系列

属性	作用
scrollTop	返回被卷去的上侧距离
scrollLeft	返回被卷去的左侧距离
scrollWidth	可视宽度+padding
scrollHeight	可视高度+padding

8、window对象

8.1、BOM

• BOM（Browser Object Model）是浏览器对象模型
• window是浏览器内置中的全局对象
• window对象下包含了navigator、location、document、history、screen五个属性
• document是实现DOM的基础，它其实是依附于window的属性
• window对象上的所有属性和方法，使用时都可以省略window

8.2、js执行机制

• 先执行执行栈中的同步任务
• 异步任务放入任务队列中
• 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态进入执行栈开始执行

8.3、location对象

• location的数据类型是对象，它拆分并保存了URL地址的各个组成部分
• location.href获取完整的URL地址，对其赋值时用于地址的跳转
• location.search获取地址中携带的参数符号?后面部分
• location.hash获取地址中的哈希值，符号#后面部分
• reload方法用来刷新当前页面，传入参数true时表示强制刷新

8.4、navigator对象

• navigator的数据类型是对象，该对象下记录了浏览器自身的相关属性
• navigator.userAgent获取浏览器版本信息

8.5、history对象

• history的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
• history.back()后退
• history.forward()前进
• history.go(参数)前进后退功能参数如果是1前进一个页面，如果是-1后退一个页面

8.6、localStorage

• 生命周期永久生效，除非手动删除，否则关闭页面也会存在
• 可以多个窗口（页面）共享
• 以键值对的形式存储使用
• 本地只能存储字符串，无法存储复杂数据类型，需要将复杂数据类型转换成JSON字符串，在存储到本地
• JSON.stringify()将复杂数据转换成JSON字符串存储本地存储中
• JSON.parse()将JSON字符串转换成对象取出时使用

存储数据：localStorage.setItem(key, value)

获取数据：localStorage.getItem(key)

删除数据：localStorage.removeItem(key)

8.7、sessionStorage

• 生命周期为关闭浏览器窗口
• 在同一个窗口下数据可以共享
• 以键值对的形式存储使用
• 用法跟localStorage基本相同