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:;
- 捕获阶段
- 当前目标
-
冒泡阶段
-
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
窗口加载事件： 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)
window.location 对象用于获得或设置窗体的 URL 并且可以用于解析 URL
location 对象属性
- href: 获取或设置 整个 URL
- host: 返回主机名
- port: 返回端口号
- pathname: 返回路径
- search: 返回参数
- hash: 返回片段
location 对象方法
- assign(): 重定向
- replace(): 替换页面，不能回退，不记录历史
- reload(): 重新加载，等价 F5；如果参数为 true 强制刷新 ctrl + F5
window.navigator 对象包含有浏览器相关的信息
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
- navigator 数据可被浏览器使用者更改
- 一些浏览器对测试站点会识别错误
- 浏览器无法报告晚于浏览器发布的新操作系统
window.history 对象包含浏览器的历史
history 对象方法
- back(): 后退
- forward(): 前进
- go(n): 前进或后退 n 个页面，通过参数 n 正负区分前进或后退
本地存储
HTML5 规范提出相关解决方案
- 数据存储在用户浏览器中
- 设置或读取方便，且页面刷新不会丢失
- 容量大，sessionStorage: 约 5M, localStorage: 约 20M
-
只能存储字符串，可以将对象 JSON.stringify() 编码存储
-
生命周期为关闭窗口
- 在同一个窗口下数据共享
- 以键值对存储
存储数据:
sessionStorage.setItem(key, value)
获取数据:
sessionStorage.getItem(key)
删除数据:
sessionStorage.removeItem(key)
清空:
sessionStorage.clear()
- 生命周期为永久，除非主动删除
- 在多窗口下数据共享
- 以键值对存储
存储数据:
localStorage.setItem(key, value)
获取数据:
localStorage.getItem(key)
删除数据:
localStorage.removeItem(key)
清空:
localStorage.clear()
Original: https://www.cnblogs.com/shadow-/p/16556561.html
Author: shadow_D
Title: JavaScript 常用 Web APIs
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/564480/
转载文章受原作者版权保护。转载请注明原作者出处！