DOM与BOM操作场景

考察点分析 link

本题主要考核以下核心能力维度：

1. 核心概念理解：区分DOM（Document Object Model）与BOM（Browser Object Model）的职责边界
2. API掌握程度：对基础DOM操作方法的熟练运用能力
3. 浏览器环境应用：利用BOM对象解决实际场景问题的能力

具体技术评估点：

• DOM树形结构模型的理解
• 节点操作方法（增删改查）
• BOM核心对象（window/location/screen）的运用
• 页面跳转的多种实现方式差异
• 设备尺寸与视口尺寸的区分

技术解析 link

关键知识点 link

DOM操作 > BOM对象 > 尺寸计算原理

原理剖析 link

DOM以树形结构映射HTML文档，提供节点操作接口。BOM通过window对象统领浏览器相关功能，location控制URL，screen获取物理设备信息。页面跳转本质是修改浏览器地址，尺寸获取需区分设备物理分辨率与CSS像素布局视口。

常见误区 link

• 混淆screen.width与window.innerWidth（前者是显示器物理宽度，后者是视口CSS像素宽度）
• 使用location.replace()时忽略历史记录被替换的特性
• 误将localStorage归为BOM（实际属于Web API）

问题解答 link

DOM定义：文档对象模型，将HTML文档抽象为节点树结构，提供操作页面元素的API。核心操作包括：

1. document.getElementById() 根据ID获取元素
2. element.appendChild() 插入子节点
3. document.createElement() 创建新元素
4. element.addEventListener() 绑定事件监听
5. node.cloneNode() 克隆节点

BOM定义：浏览器对象模型，提供与浏览器交互的接口。页面跳转可通过：

  // 普通跳转（保留历史记录）
window.location.href = 'https://new.url';
// 替换当前历史记录
window.location.replace('https://new.url');
  

屏幕尺寸获取：

  // 屏幕物理尺寸
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
  

解决方案 link

编码示例 link

  // 安全跳转封装
function safeRedirect(url) {
  try {
    // 使用assign方法保持可回溯性
    window.location.assign(new URL(url, window.location.origin));
  } catch (e) {
    console.error('Invalid URL format');
  }
}

// 响应式布局尺寸获取
function getViewportSize() {
  return {
    // 视口尺寸（包含滚动条）
    width: window.innerWidth,
    height: window.innerHeight,
    // 设备物理分辨率
    deviceWidth: window.screen.width * window.devicePixelRatio
  };
}
  

优化建议 link

• 高频操作使用文档片段（DocumentFragment）减少重排
• 移动端使用window.matchMedia()实现响应式断点监听
• 跳转前使用navigator.onLine检测网络状态

深度追问 link

1. 如何阻止单页面应用跳转时的页面刷新？

   • 使用History API的pushState/replaceState方法

2. DOM操作导致强制同步布局的场景有哪些？

   • 连续读取布局属性（如offsetHeight）后立即修改样式

3. 怎样获取不包括滚动条的视口尺寸？

   • 使用document.documentElement.clientWidth/clientHeight