JavaScript 常用 Web APIs()

Web APIs

  • Web APIs

    DOM 页面文档对象模型

    DOM 树
    获取元素
    事件

    监听事件
    事件解绑

    操作元素
    样式属性操作
    结点操作

    结点关系
    创建节点

    DOM 事件流

    事件对象
    常用鼠标事件
    键盘事件

    BOM 浏览器对象模型

    window 对象的常见事件
    定时器
    执行机制
    location 对象
    navigator 对象
    history 对象

    本地存储

    本地存储特性

    window.sessionStorage
    window.localStorage

  • DOM 页面文档对象模型

    DOM 树
    获取元素
    事件

    监听事件
    事件解绑

    操作元素
    样式属性操作
    结点操作

    结点关系
    创建节点

    DOM 事件流

    事件对象
    常用鼠标事件
    键盘事件

  • DOM 树
  • 获取元素
  • 事件

    监听事件
    事件解绑

  • 监听事件
  • 事件解绑
  • 操作元素
  • 样式属性操作
  • 结点操作

    结点关系
    创建节点

  • 结点关系
  • 创建节点
  • DOM 事件流

    事件对象
    常用鼠标事件
    键盘事件

  • 事件对象
  • 常用鼠标事件
  • 键盘事件
  • BOM 浏览器对象模型

    window 对象的常见事件
    定时器
    执行机制
    location 对象
    navigator 对象
    history 对象

  • window 对象的常见事件
  • 定时器
  • 执行机制
  • location 对象
  • navigator 对象
  • history 对象
  • 本地存储

    本地存储特性

    window.sessionStorage
    window.localStorage

  • 本地存储特性

    window.sessionStorage
    window.localStorage

  • window.sessionStorage
  • window.localStorage

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

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

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

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

window.name

window 对象的常见事件

窗口加载事件:

load

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

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

注意:

  • window.onload 传统注册方法只能写一次,如果有多个以最后一个为准
  • 使用 addEventListener 则没有限制
window.onload = function(){}

// 或者
window.addEventListener('load', function(){})

窗口加载事件【DOM】:

DOMContentLoaded

在 DOM 加载完毕触发,不包括样式表、图片、flash …
加载比 快

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

加载比 快

DOMContentLoaded
load

注意:IE9 以上才支持

窗口尺寸调整事件:

resize

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

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

定时器

定时器

setTimeout

语法:

window.setTimeout(调用函数, 延时)
  • 延时以毫秒为单位
  • 停止定时器 window.clearTimeout(定时器标识符)

定时器

setInterval()

语法:

window.setInterval(调用函数, 间隔周期)
  • 延时以毫秒为单位
  • 会周期性执行
  • 停止定时器 window.clearInterval(定时器标识符)

执行机制

同步任务

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

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

异步任务

JS 的异步是通过回调函数实现
一般分为:

普通事件
资源加载
定时器

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

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

一般分为:

  • 普通事件
  • 资源加载
  • 定时器

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

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

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

location 对象

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

window.location

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

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

存储数据:

localStorage.setItem(key, value)

获取数据:

localStorage.getItem(key)

删除数据:

localStorage.removeItem(key)

清空:

localStorage.clear()
————————

Web APIs

  • Web APIs

    DOM 页面文档对象模型

    DOM 树
    获取元素
    事件

    监听事件
    事件解绑

    操作元素
    样式属性操作
    结点操作

    结点关系
    创建节点

    DOM 事件流

    事件对象
    常用鼠标事件
    键盘事件

    BOM 浏览器对象模型

    window 对象的常见事件
    定时器
    执行机制
    location 对象
    navigator 对象
    history 对象

    本地存储

    本地存储特性

    window.sessionStorage
    window.localStorage

  • DOM 页面文档对象模型

    DOM 树
    获取元素
    事件

    监听事件
    事件解绑

    操作元素
    样式属性操作
    结点操作

    结点关系
    创建节点

    DOM 事件流

    事件对象
    常用鼠标事件
    键盘事件

  • DOM 树
  • 获取元素
  • 事件

    监听事件
    事件解绑

  • 监听事件
  • 事件解绑
  • 操作元素
  • 样式属性操作
  • 结点操作

    结点关系
    创建节点

  • 结点关系
  • 创建节点
  • DOM 事件流

    事件对象
    常用鼠标事件
    键盘事件

  • 事件对象
  • 常用鼠标事件
  • 键盘事件
  • BOM 浏览器对象模型

    window 对象的常见事件
    定时器
    执行机制
    location 对象
    navigator 对象
    history 对象

  • window 对象的常见事件
  • 定时器
  • 执行机制
  • location 对象
  • navigator 对象
  • history 对象
  • 本地存储

    本地存储特性

    window.sessionStorage
    window.localStorage

  • 本地存储特性

    window.sessionStorage
    window.localStorage

  • window.sessionStorage
  • window.localStorage

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

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

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

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

window.name

window 对象的常见事件

窗口加载事件:

load

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

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

注意:

  • window.onload 传统注册方法只能写一次,如果有多个以最后一个为准
  • 使用 addEventListener 则没有限制
window.onload = function(){}

// 或者
window.addEventListener('load', function(){})

窗口加载事件【DOM】:

DOMContentLoaded

在 DOM 加载完毕触发,不包括样式表、图片、flash …
加载比 快

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

加载比 快

DOMContentLoaded
load

注意:IE9 以上才支持

窗口尺寸调整事件:

resize

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

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

定时器

定时器

setTimeout

语法:

window.setTimeout(调用函数, 延时)
  • 延时以毫秒为单位
  • 停止定时器 window.clearTimeout(定时器标识符)

定时器

setInterval()

语法:

window.setInterval(调用函数, 间隔周期)
  • 延时以毫秒为单位
  • 会周期性执行
  • 停止定时器 window.clearInterval(定时器标识符)

执行机制

同步任务

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

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

异步任务

JS 的异步是通过回调函数实现
一般分为:

普通事件
资源加载
定时器

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

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

一般分为:

  • 普通事件
  • 资源加载
  • 定时器

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

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

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

location 对象

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

window.location

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

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

存储数据:

localStorage.setItem(key, value)

获取数据:

localStorage.getItem(key)

删除数据:

localStorage.removeItem(key)

清空:

localStorage.clear()