Javascript 红宝书(中)¶

BOM¶

window 对象 (核心)¶

• 是什么

  • window 对象是浏览器的实例，被复用为 ECMAScript 的 Global 对象。

• Global 作用域

• 窗口关系

  • top 对象始终指向最上层窗口，及浏览器窗口本身。
  • parent 对象始终指向当前窗口的父窗口。若当前窗口是最上层，则 parent === top。
  • self 始终会指向 window。

• 窗口位置与像素比

  • window.moveTo/moveBy

• 窗口大小

  • window.innerHeight/innerWith
  • document.documentElement.clientHeight/clientWidth

• 视口位置

  • window.scrollTo/scrollBy

• 导航与打开新窗口

  • 弹出窗口：window.open()

• 定时器

• 系统对话框

location 对象¶

• 查询字符串

  • location.search
  • URLSearchParams

• 操作地址

  • location.assign(): 启动导航到新 URL，同时在浏览器历史记录中增加一条记录。
  • location.reload(true); // 重新加载 (从服务器)

navigator 对象¶

• 检测插件

  • navigator.plugins

• 注册处理程序

  • navigator.registerProtocolHandler()

Screen 对象¶

• 保存客户端的能力。

history 对象¶

• 导航

  • history.go(): 可以在用户历史记录中沿任何方向导航。
  • history.back()/history.forward()
  • history.length

• 历史状态管理

  • 以下不刷新页面。
  • history.pushState(): 浏览器地址栏改变为新的相对 UR，并创建新的历史记录。
  • history.popState(): 触发 popstate 事件
  • history.replaceState(): 不创建新历史记录，只覆盖当前状态。
  • history.state: 当前状态。

客户端检测¶

能力检测¶

• 安全能力检测
• 基于能力检测进行浏览器分析

用户代理检测¶

• navigator.userAgent
• 用户代理的历史
• 浏览器分析

软件与硬件检测¶

• 识别浏览器与操作系统

• 浏览器元数据

  • Geolocation API
  • Connection State 和 NetworkInformation API
  • Battery Status API

DOM¶

概念¶

• DOM 是 HTML 和 XML 文档的编程接口，现在已是真正跨平台、语言无关的表示和操作网页的方式。

节点层级¶

• Node 类型

  • DOMLevel 1 描述了名为 Node 的接口，Node 接口在 Javascript 中被实现为 Node 类型。所有节点都继承 Node 类型。
  • nodeType：由定义在 Node 类型上的 12 个数值常量表示。
  • nodeName/nodeValue

  • 节点关系

    • 每个节点都有 childNodes 属性，包含 NodeList 实例。
    • parentNode/previousSibling/nextSibling/firstChild/lastChild
    • 所有节点共享 ownerDocument 属性。

  • 操纵节点

    • appendChild

      • 在childNodes 列表末尾添加节点。
      • 将文档中已存在的节点传给 appendChild()，会移动该节点位置。

    • insertBefore

      • 参数：要插入的节点和参照节点。
      • 若参照节点是 null，则 insertBefore 与 appendChild 效果相同。

    • replaceChild

      • 参数：要插入的节点和要替换的节点。

    • removeChild

      • 参数：要移除的节点。

    • cloneNode

      • 参数：是否深复制。
      • 返回：一个孤儿 (orphan) 节点。

    • normalize

      • 处理文档子树中的文本节点。

• Document 类型

  • 概念

    • nodeType: 9
    • nodeName: '#document'
    • ownerDocument: null

  • 文档子节点

    • document.documentElement === document.firstElementChild; // true

  • 文档信息

  • 定位元素
  • 特殊集合
  • DOM 兼容性检测
  • 文档写入

• Element 类型

  • 概念

    • nodeType: 1
    • nodeName: 'div'

  • HTML 元素

    • 所有 HTML 元素都通过 HTMLElement 表示。
    • HTMLElement 继承 Element，并增加一些属性。

  • getAttribute/setAttribute/removeAttribute

  • atrributes 属性

    • 例子：NamedNodeMap {0: id, id: id, length: 1}

  • 创建元素

    • document.createElement

  • 元素后代

• Text 类型

  • 概念

    • nodeType: 3
    • nodeName: '#text'

  • 创建文本节点

    • document.createTextNode

  • 规范化文本节点

    • normalize()

  • 拆分文本节点

    • splitText()

• Comment 类型

  • 概念

    • nodeType: 8
    • nodeName: '#comment'

• CDATASection 类型

  • 概念

    • nodeType: 4
    • nodeName: '#cdata-section
    • 表示 XML 中特有的 CDATA 区块。

• DocumentType 类型

  • 概念

    • nodeType: 10
    • nodeName: 文档类型名称

  • document.doctype

• DocumentFragment 类型

  • 概念

    • nodeType: 11
    • nodeName: '#document-fragment'

  • “轻量级“ 文档

  • 添加到文档片段的新节点不属于文档树，不会被浏览器渲染。

• Attr 类型

  • 概念

    • nodeType: 2
    • nodeName: 属性名

DOM 编程¶

• 动态脚本
• 动态样式
• 操作表格
• 使用 NodeList

MutationObserver 接口¶

• 用于观察整个文档、DOM 树的一部分，或某个元素。

• 基本用法

  • observe() 方法

  // 选择需要观察变动的节点
  const targetNode = document.getElementById('some-id');
  
  // 观察器的配置（需要观察什么变动）
  const config = { attributes: true, childList: true, subtree: true };
  
  // 当观察到变动时执行的回调函数
  const callback = (mutationsList, observer) => {};
  
  // 创建一个观察器实例并传入回调函数
  const observer = new MutationObserver(callback);
  
  // 以上述配置开始观察目标节点
  observer.observe(targetNode, config);
  
  // 之后，可停止观察
  observer.disconnect();
  

  • 回调与 MutationRecord

    • 每个回调都会收到一个 MutationRecord 实例的数组。
    • 连续多次修改会生成多个 MutationRecord 实例，下次回调时执行时会收到包含所有这些实例的数组。

  • disconnect() 方法

  • 复用 MutationObserver
  • 重用 MutationObserver

• MutationObserverInit 与观察范围

  • 概念

    • MutationObserverInit
    • observe() 方法的第二个参数

  • 观察属性

  • 观察字符数据
  • 观察子节点

  • 观察子树

    • 注意：已经脱离的子树，仍能触发变化事件。

• 异步回调与记录队列

  • 记录队列

    • 当仅当队列中微任务长度为 0 时，才会将 observer 注册的回调放到微任务队列中去。

  • takeRecords() 方法

• 性能、内存与垃圾回收

  • 用于取代性能不好的 MutationEvent

  • MutationObserver 的引用

    • MutationObserver 实例与目标节点之间的引用关系是非对称的。
    • MutationObserver 弱引用 目标节点。不妨碍 GC 回收目标节点。
    • 目标节点 强引用 MutationObserver。若目标节点被 GC 回收，则 MutationObserver 也会被回收。

  • MutationRecord 的引用

    • MutationRecord 实例至少包含对目标节点的一个引用。
    • 如果保存 MutationRecord 实例，会妨碍被引用节点被回收；故，建议从 MutationRecord 中抽取信息，保存到新对象。

DOM 扩展¶

Selector API¶

• querySelector()
• querySelectorAll()
• matches()

Element Traversal¶

• childElementCount
• firstElementChild/lastElementChild
• previousElementSibling/nextElementSibling

HTML 5¶

• CSS 类扩展
• 焦点管理

• HTMLDocument 扩展

  • document.readyState
  • 值：loading/complete

• 自定义数据属性

  • 前缀 data-
  • 通过元素的 dataset 属性来访问

• 插入标记

  • innerHTML
  • outerHTML
  • insertAdjacentHTML()/insertAdjacentText()
  • 内存与性能问题

• scrollIntroView()

专有扩展¶

• children 属性
• contains() 方法

• 插入标记

  • innerText
  • outerText

• 滚动

  • scrollIntroViewIfNeeded()

DOM2 和 DOM3¶

DOM 的演进¶

• XML 命名空间

• 其他变化

  • Document 变化： importNode

  • Node 变化

    • isSameNode()
    • isEqualNode()
    • setUserData()/getUserData()

样式 (Style 模块)¶

• 存取元素样式
• 操作样式表

• 元素尺寸

  • 偏移尺寸：相对于 offsetParent 的偏移量。
  • 客户端尺寸：包含元素内容及其内边距所占用的空间。
  • 滚动尺寸：元素内容滚动距离的信息。
  • getBoundingClientRect()

遍历 (Traversal 模块)¶

• NodeIterator/TreeWalker:以 document 为根节点，深度优先遍历。

• NodeIterator

  • document.createNodeIterator()
  • nextNode()
  • previousNode()

• TreeWalker

  • NodeIterator 的高级版，包含 nextNode()、previousNode()。
  • document.createTreeWalker()
  • parentNode()
  • firstChild()
  • lastChild()
  • nextSibling()
  • previousSibling()

范围 (Range 模块)¶

• DOM 范围

  • document.createRange()
  • 用于实现对底层 DOM 树更精细的控制。

• 简单选择

  • selectNode() 方法：选择整个节点
  • selectNodeContents() 方法：选择整个节点的后代。

• 复杂选择

  • setStart()
  • setEnd()

• 操作范围

  • 创建范围后，浏览器会创建一个文档片段节点，用户包含范围选中区域的节点。
  • deleteContents()
  • extractContents()
  • cloneContents()

• 范围插入

  • insertNode(): 在选区开始插入节点
  • surroundContents(): 插入包含范围的内容。

• 范围折叠

  • 如果范围没有选择文档的任何部分，则称为折叠。

• 范围比较

  • compareBoundaryPoints() 确定范围之间是否存在公共的边界。

• 复制范围

  • cloneRange()

• 清理

  • range.detach(); // 从文档中剥离范围
  • range = null; // 解除引用

事件¶

事件流¶

• 概念

  • 事件流描述流页面接收事件的顺序。

• 事件冒泡

• 事件捕获

• DOM 事件流

  • DOM2 Events 规定事件流分 3 阶段：事件捕获、到达目标和事件冒泡。

事件处理程序¶

• HTML 事件处理程序
• DOM0 事件处理程序

• DOM2 事件处理程序

  • addEventListener
  • removeEventListener

• IE 事件处理程序

  • attachEvent
  • detachEvent

事件对象¶

• DOM 事件对象
• IE 事件对象

事件类型¶

• 用户界面事件(UIEvent)

  • load

    • 页面完全加载后触发。

  • unload

  • resize
  • scroll

  • DOMContentLoaded

    • DOM 树构建完成成后立即触发，不必等图片，jS 文件，CSS文件等加载完成。

  • readystatechange

  • pageshow/pagehide
  • hashchange

• 焦点事件(FocusEvent)

• 鼠标事件(MouseEvent)
• 滚轮事件(WheelEvent)
• 输入事件(InputEvent)
• 键盘事件(KeyboardEvent)
• 合成事件(CompositionEvent)

内存与性能¶

• 事件委托
• 删除事件处理程序

模拟事件¶

• DOM 事件模拟

  • document.createEvent()

• IE 事件模拟

动画与 Canvas¶

requestAnimationFrame¶

• 在重绘屏幕前调用
• cancelAnimationFrame
• 通过 requestAnimationFrame 节流

基本的画布功能¶

2D 绘图上下文¶

WebGL¶

• 画布的 3D 上下文。

表单脚本¶

表单基础¶

文本框编程¶

选择框编程¶

表单序列化¶

富文本编程¶