JavaScript 常用 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

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()
posted @ 2022-08-06 10:20  sha0dow  阅读(48)  评论(0)  编辑  收藏  举报