3 WebAPI

WebAPI 概述

---

Application Programming Interface: 应用程序编程接口，是一些预先定义的函数，通俗的理解就是一些方法
浏览器提供的一套操作浏览器功能和页面元素的API
此处的Web API特指浏览器提供的一些方法;可分为两个部分: BOM(浏览器对象模型)、DOM(页面对象模型)

BOM (浏览器对象模型)

---

BOM 概述

BOM(Browser Object Model)是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构;BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象
调用window下的属性和方法时，可以省略window
BOM 没有标准，具体实现依据各浏览器厂商指定，其顶级对象为 window

BOM Window (顶级对象)

window 对象表示一个包含 DOM 文档的窗口，其 document 属性指向窗口中载入的 DOM 文档
window作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码

Window 属性

Window.document // HTML文档
Window.body // HTML文档 body 元素对象

// 事件常用
window.pageYOffset // 返回文档当前垂直滚动的像素数;只读属性pageYOffset是 scrollY 的别名;如果需要整数值，可以使用Math.round()四舍五入
window.pageXOffset // 返回文档当前水平滚动的像素数;只读属性pageXOffset是 scrollX 的别名;如果需要整数值，可以使用Math.round()四舍五入
Screen.availHeight // 返回窗口中垂直方向可用空间的像素值(不算工具栏等)
Screen.availWidth // 返回窗口中水平方向可用空间的像素值(不算滚动条等)
Screen.height // 以像素为单位返回屏幕的高度
Screen.width // 以像素为单位返回屏幕的宽度

Window 方法

// 窗口常用
window.alert() // 显示一个警告对话框，上面显示有指定的文本内容以及一个"确定"按钮
Window.confirm() // 显示一个具有一个可选消息和两个按钮 (确定和取消) 的模态对话框

// 特殊
Window.stop() // 这个方法停止窗口加载
Window.close() // 关闭窗口
window.print() // 打开打印对话框打印当前文档

// 事件常用
Window.scroll(x-coord， y-coord) // 滚动窗口至文档中的特定位置，返回一个双精度浮点数
Window.scrollTo() // 滚动到文档中的某个坐标
window.scrollTo({
   
    top: 1000，
    behavior: "smooth"
})
    - x-coord 是文档中的横轴坐标
    - y-coord 是文档中的纵轴坐标
    - options 是一个包含三个属性的对象(smooth(平滑滚动)，instant(瞬间滚动)，默认值 auto)

定时器

window.setInterval(fn， delay) // 重复调用一个函数或执行一个代码片段，具有固定的时间间隔，也叫定时器
WindowTimers.clearInterval(fn， delay) // 取消先前通过 setInterval()设置的重复定时任务， 需interval ID
window.setTimeout(fn， delay) // 定时器到期后执行一个函数或指定的一段代码(执行一次)，也叫计时器

BOM Console (控制台)

Console 对象提供了浏览器控制台调试的接口(如：Firefox 的 Web Console);在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能

Console 方法

Console.log(obj1 [， obj2， ...， objN]) // 打印内容的通用方法，支持多个参数
Console.debug() // 在控制台打印一条 "debug" 级别的消息
Console.clear() // 清空控制台，并输出 Console was cleared
Console.dir() // 显示一个由特定的 Javascript 对象列表组成的可交互列表
Console.error() // 打印一条错误信息
Console.info() // 打印资讯类说明信息

BOM History (历史记录)

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录

History 方法

window.history.back() // 向后跳转(如同用户点击了后退按钮)
window.history.forward() // 向前跳转(如同用户点击了前进按钮)
window.history.go(n) // 正数向前跳转，负数向后跳转

BOM Location (地址，URL)

**Location **接口表示其链接到的对象的位置(URL);所做的修改反映在与之相关的对象上

Location 属性

Location.href // 包含整个 URL 的一个DOMString
Location.host // 包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上 URL 的端口号
Location.hostname // 包含 URL 域名的一个DOMString
Location.port // 包含端口号的一个DOMString
Location.pathname // 包含 URL 中路径部分的一个DOMString，开头有一个“/"
Location.search //  包含 URL 参数的一个DOMString，开头有一个“?”
Location.hash // 包含块标识符的DOMString，开头有一个“#”

DOMstring

DOMString 是一个 UTF-16 字符串;由于 JavaScript 已经使用了这样的字符串，所以 DOMString 直接映射到一个 String

Location 方法

location.reload() // 刷新当前页面，就像刷新按钮一样
Location.toString() // 返回一个DOMString，包含整个 URL; 它和读取URLUtils.href的效果相同;但是用它不能够修改 Location 的值

BOM Navigator (用户代理)

Navigator 接口表示用户代理的状态和标识;它允许脚本查询它和注册自己进行一些活动
可以使用只读的 window.navigator属性检索 navigator 对象

Navigator 属性

Navigator.userAgent // 返回当前浏览器的用户代理字符串，以此来判断用户登录设备

Navigator.geolocation

属性返回一个 Geolocation 对象，通过这个对象可以访问到设备的位置信息。使网站或应用可以根据用户的位置提供个性化结果

Geolocation.getCurrentPosition() // 确定设备的位置并返回一个携带位置信息的 Position 对象
Geolocation.watchPosition() // 注册一个位置改变监听器，每当设备位置改变时，返回一个 long 类型的该监听器的 ID 值
Geolocation.clearWatch() // 取消由 watchPosition() 注册的位置监听器

DOM (文档对象模型)

---

DOM 概述

文档对象模型(Document Object Model，简称DOM)， 是W3C组织推荐的处理可扩展标志语言的标准编程接口;在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM
Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树
DOM 作为 w3c 的标准，其顶级对象是 document(window.document)

DOM 节点操作

DOM 增

let fragment = document.createDocumentFragment() // 创建一个新的空白的文档片段，因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能
let element = document.createElement(tagName[， options]); // 创建一个由标签名称 tagName 指定的 HTML 元素
document.createTextNode(text) // 创建一个新的文本节点。这个方法可以用来转义 HTML 字符，清除标签

DOM 删

Node.removeChild(child) // 删除指定节点并返回此节点

DOM 改

Node.appendChild(aChild) // 将指定节点插入到指定的节点中
Node.insertBefore(newNode， referenceNode) // 在参考节点之前插入一个拥有指定父节点的子节点，返回被插入过的子节点(可以实现元素交换)
document.importNode(externalNode， deep) // 将外部文档的一个节点拷贝一份，然后可以把这个拷贝的节点插入到当前文档中
Node.cloneNode() // 返回调用该方法的节点的一个副本

DOM 查

// 查找元素对象方法
document.getElementById() // 返回符合 ID名 的元素(对象)
document.getElementsByTagName() // 返回符合 标签名 的所有元素(伪数组)
Document.getElementsByClassName() // 返回符合 class类名 的元素(伪数组)
document.querySelector() // 返回符合 css选择器 的一个元素(对象)
Document.querySelectorAll() // 返回符合 css选择器 条件的所有元素(伪数组)

// 节点属性
Node.parentNode // 返回节点的父节点(元素节点)
Element.children // 返回节点的所有子节点(元素节点)
    - parentNode.children[0] // 第一个子节点
    - parentNode.children[parentNode.children.length - 1] // 最后一个子节点
NonDocumentTypeChildNode.nextElementSibling // 返回当前元素在其父元素的子元素节点中的后一个元素节点
NonDocumentTypeChildNode.previousElementSibling // 返回当前元素在其父元素的子元素节点中的前一个元素节点

// 不推荐
Node.childNodes //返回包含指定节点的子节点的集合(包含文本节点等)
Node.firstChild // 返回树中节点的第一个子节点(包含文本节点等)
Node.lastChild // 返回当前节点的最后一个子节点(包含文本节点等)
Element.firstElementChild // 返回对象的第一个子元素，如果没有子元素，则为null
Element.lastElementChild // 返回对象的最后一个子元素，如果没有子元素，则为null
Node.previousSibling // 返回当前节点的前一个兄弟节点，没有则返回null(包含文本节点等)
Node.nextSibling // 返回其父节点的 childNodes 列表中紧跟在其后面的节点(包含文本节点等)

DOM 属性节点

属性节点属性

Element.style // 获取或设置指定元素的style属性的值
CSSRule.cssText // 返回或设置样式规则所包含的实际文本
Element.className // 获取或设置指定元素的class属性的值
Element.value // 获取表单特有属性，所有表单属性都直接添加到了元素对象属性上

属性节点方法

Element.classList // 返回一个元素的类属性的实时 DOMTokenList 集合
    - add() // 添加指定的class属性值
    - remove() // 删除指定的class属性值
    - toggle() // 切换指定的class属性值，有则删 无则加
Element.getAttribute() // 返回元素 上一个指定的属性值
Element.setAttribute() // 设置指定元素上的某个属性值
Element.removeAttribute() // 从指定的元素中删除一个属性

自定义属性

是为了保存并使用数据;有些数据可以保存到页面中而不用保存到数据库中

H5自定义属性: H5规定自定义属性data-开头做为属性名并且赋值

element.getAttribute(‘data-index’) // 兼容性获取 H5 自定义属性
element.dataset.index // H5 新增
element.dataset[‘index’] // ie11 开始支持

Event (事件)

---

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为，简单理解： 触发 — 响应机制
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作;

Event 三要素

• 事件源
• 事件类型
• 事件处理函数(event对象：可选)
  

Event 事件模型

原始事件模式(DOM0级)

• 直接在 HTML 代码中绑定

<input type="button" onclick="fun ()">

• 通过 JS 绑定

document.getElementById(id).onclick // 对 document 对象的事件属性进行赋值操作，直接使用null覆盖就可以实现事件的解绑，触发: 冒泡阶段

• 特性
  • 绑定速度快(DOMO 级事件具有很好的跨浏览器优势，会以最快的速度绑定，但由于绑定速度太快，可能页面还未完全加载出来，以至于事件可能无法正常运行，所以需JS文件最后执行)
  • 只支持冒泡，不支持捕获
  • 同一个类型的事件只能绑定一次
• 解除绑定

btn.onclick = null

标准事件模式(DOM2级)

• 事件捕获阶段: 事件从document一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行
• 事件处理阶段: 事件到达目标元素，触发目标元素的监听函数
• 事件冒泡阶段: 事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行

EventTarget.addEventListener(type， listener， useCapture) // 将指定的监听器注册到 EventTarget 上
    - type: 表示监听事件类型的字符串
    - listener