Web APIs

Web APIs

DOM 页面文档对象模型

DOM 树

文档：document

元素：element

结点：node

获取元素

根据 ID 获取：getElementById(id)

id 为字符串区分大小写
返回一个 element 对象

根据标签获取：getElementByTagName(tagName)

返回伪数组，元素列表

H5 限定

getElementByClassName(className) 类选择
querySelector(selectors) 选择器的的第一个
querySelectorAll(selectors)

特殊元素获取 body, html

document.body
document.documentElement

事件

触发--响应机制

事件源：触发点
事件类型：判断触发方式
事件处理程序：响应

鼠标事件

onclick 鼠标左击
onmouseover 经过
onmouseout 离开
onfocus 获取焦点触发
onblur 失去焦点触发
onmousemove 移动
onmouseup 弹起
onmousedown 按下

监听事件

addEventListener(type, listener[, useCapture]) 触发多个事件

type 事件类型
listener 事件处理函数

事件解绑

eventTarget.onclick = null; 传统
removeEventListener(type, listener[, useCapture])

第三参数，是否处于捕获阶段[true]

操作元素

元素内容

element.innerText 去除标签，空格，换行
element.innerHTML 元素全部内容
src、href
id、alt、title

表单元素属性

type
value
checked
selected
disabled

样式属性操作

element.style 行内样式修改
element.className 类名样式修改

JS 修改 style 样式操作，产生的是行内样式， CSS 权重比较高

获取自己添加属性属性值 getAttribute('属性');
更改数值 setAttribute('属性', 值);
移除属性 removeAttribute('属性');

H5 自定义属性

结点操作

nodeType
nodeName
nodeValue

结点关系

element.parentNode 父节点
element.childNodes 子节点
element.children 子元素节点
element.firstChild 首子节点
element.lastChild 尾子节点
node.nextSibling 下一个兄弟节点
node.previousSibling 上一个兄弟节点

兼容性

element.firstElementChild
element.lastElementChild
node.nextElementSibling 下一个兄弟节点【元素】
node.previousElementSibling 上一个兄弟节点【元素】

创建节点

document.createElement('tagName');
node.appendChild(child) 添加节点
node.insertBefore(child, 指定元素) 在指定元素前插入
node.removeChild(child) 删除节点
node.cloneNode() 节点克隆，数值false/true 意味着浅/深拷贝
document.write() 文档流写入

创建效率

innerHTML 和 createElement 相比

大数据量使用 innerHTML + 数组

阻止路径跳转方法添加 javascript:void(0); 或者 javascript:;

DOM 事件流

捕获阶段
当前目标
冒泡阶段

事件对象

e.target 返回触发事件对象
e.srcElement 【非标准】
e.type 事件类型
e.cancelBubble 阻止冒泡【非标准】
e.returnValue 阻止默认事件【非标准】
e.preventDefault() 阻止事件
e.stopPropagation() 阻止冒泡

使用 e.target 可以完成事件委托

常用鼠标事件

contextmenu 控制应该何时显示上下菜单
selectstart 鼠标选中

鼠标事件

e.clientX 浏览器窗口X
e.clientY 浏览器窗口Y
e.pageX 文档页面X IE9+
e.pageY 文档页面Y IE9+
e.screenX 电脑屏幕X
e.screenY 电脑屏幕Y

键盘事件

keyup
keydown
keypress 不能识别功能键
e.keyCode 返回 ASCII

keyup 与 keydown 不区分大小写

focus() 搜索框获取焦点

BOM 浏览器对象模型

BOM(Browser Object Model) 是指浏览器对象模型

用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

BOM 提供独立于内容与浏览器窗口进行交互的对象，其核心对象是 window

BOM > DOM : BOM 包含 DOM

flowchart TB
main(window) --- node_1(document)
main(window) --- node_2(location)
main(window) --- node_3(navigation)
main(window) --- node_4(sreen)
main(window) --- node_5(history)

window 对象是浏览器的顶级对象

是 JS 访问浏览器窗口的一个接口
是一个全局对象，定义在全局作用域中的变量、函数都是 window 对象的属性和方法

注意：window 下的一个特殊属性 window.name，所以一般变量名避免 name

window 对象的常见事件

窗口加载事件：load

事件触发在文档加载完毕时

注意：

window.onload 传统注册方法只能写一次，如果有多个以最后一个为准
使用 addEventListener 则没有限制

window.onload = function(){}

// 或者

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

窗口加载事件【DOM】：DOMContentLoaded

在 DOM 加载完毕触发，不包括样式表、图片、flash ...

DOMContentLoaded 加载比 load 快

注意：IE9 以上才支持

窗口尺寸调整事件：resize

当窗口大小发生像素变化时触发

定时器

setTimeout 定时器

语法：

window.setTimeout(调用函数, 延时)

延时以毫秒为单位
停止定时器 window.clearTimeout(定时器标识符)

setInterval() 定时器

语法：

window.setInterval(调用函数, 间隔周期)

延时以毫秒为单位
会周期性执行
停止定时器 window.clearInterval(定时器标识符)

执行机制

同步任务

同步任务都执行在主线程上执行，形成一个 执行栈

异步任务

JS 的异步是通过回调函数实现

一般分为：

普通事件

资源加载

定时器

异步任务相关函数添加到 任务队列

由于主线程不断的重复获取任务、执行任务、再获取任务 ...

这种机制被称为 事件循环 (event loop)

location 对象

window.location 对象用于获得或设置窗体的 URL 并且可以用于解析 URL

location 对象属性

href: 获取或设置整个 URL
host: 返回主机名
port: 返回端口号
pathname: 返回路径
search: 返回参数
hash: 返回片段

location 对象方法

assign(): 重定向
replace(): 替换页面，不能回退，不记录历史
reload(): 重新加载，等价 F5；如果参数为 true 强制刷新 ctrl + F5

navigator 对象

window.navigator 对象包含有浏览器相关的信息

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统

history 对象

window.history 对象包含浏览器的历史

history 对象方法

back(): 后退
forward(): 前进
go(n): 前进或后退 n 个页面，通过参数 n 正负区分前进或后退

本地存储

本地存储特性

HTML5 规范提出相关解决方案

数据存储在用户浏览器中
设置或读取方便，且页面刷新不会丢失
容量大，sessionStorage: 约 5M, localStorage: 约 20M
只能存储字符串，可以将对象 JSON.stringify() 编码存储

window.sessionStorage

生命周期为关闭窗口
在同一个窗口下数据共享
以键值对存储

存储数据:

sessionStorage.setItem(key, value)

获取数据:

sessionStorage.getItem(key)

删除数据:

sessionStorage.removeItem(key)

清空:

sessionStorage.clear()

window.localStorage

生命周期为永久，除非主动删除
在多窗口下数据共享
以键值对存储