DOM 与 BOM

浏览器为页面暴露两大树形 API:**DOM(文档对象模型)**描述文档结构与内容;**BOM(浏览器对象模型)**多指 window 及其上的导航、定时器、存储等环境与能力(BOM 并非像 DOM 那样有单一 W3C「一块标准」,但术语仍常用)。

脚本通过它们驱动 UI、发起请求、与 事件机制 协作。


DOM 核心

  • document:入口,getElementByIdquerySelector(All)createElement 等。
  • 节点类型ElementTextCommentDocument 等。
  • 属性 vs 属性节点:多数场景用 element.propertygetAttribute / setAttribute;class 常用 classList

操作与性能

频繁读布局再写样式易导致强制同步布局(layout thrashing),见 性能优化。批量更新可用 DocumentFragment、暂离文档的节点或 CSS contain 等策略。


CSS 与视图

  • getComputedStyle:最终计算样式。
  • getBoundingClientRect:相对视口的几何信息。
  • elementFromPoint 等命中测试 API。

BOM / window

对象 / API作用
windowglobalThis全局对象(浏览器中多为同一引用)
locationURL 解析与跳转
history历史栈,pushState / SPA 路由
navigatorUA、在线状态、部分设备能力
screen屏幕尺寸等
setTimeout / setInterval定时器(宏任务),见 异步编程
requestAnimationFrame与刷新对齐的帧回调,见 性能优化
localStorage / sessionStorage同源键值存储(字符串)
fetch网络请求,返回 Promise

Web API 与语言核心的边界

DOM/BOM 由宿主环境实现,不是 ECMAScript 规范本体;具体可用性看浏览器支持与 MDN。语言层语法与内置对象见 ES6+数据类型


相关链接