DOM 与 BOM 的区别

BOM（Browser Object Model） 和 DOM（Document Object Model） 都是 Web 开发中非常重要的概念，它们分别涉及浏览器的不同方面。让我们逐一了解它们：

DOM（文档对象模型）

DOM 是 Document Object Model 的缩写，它是一种将 HTML 或 XML 文档结构表示为对象的接口，使得程序可以动态访问和修改网页的内容、结构和样式。

核心概念：

• DOM 代表文档的结构化表示，它把网页内容转化为树状结构（称为 "DOM 树"），每个节点代表网页的一部分，如元素、属性、文本等。
• 可以通过 JavaScript 操作 DOM 节点来修改页面内容、更新样式、响应用户的交互等。

主要功能：

• 访问文档内容：通过 document 对象，可以访问和修改网页的各个部分，例如元素（
  、）、文本、属性等。
• 修改页面内容和结构：你可以添加、删除、修改 HTML 元素，动态更新页面。
• 响应事件：通过绑定事件监听器（例如 click, mouseover, input 等）来响应用户行为，改变页面的展示和功能。

DOM 示例：

// 获取网页中的一个元素
var element = document.getElementById('myElement');

// 修改元素内容
element.innerHTML = '新内容';

// 修改元素的样式
element.style.backgroundColor = 'blue';

// 添加一个新的元素
var newElement = document.createElement('p');
newElement.textContent = '这是一个新段落';
document.body.appendChild(newElement);

DOM 树示意：

  
  
    

      
Hello, world!
    
  

在这个例子中，DOM 树会像这样：

• html（根节点）
  • head
  • body
    • div (id="container")
      • p (文本: "Hello, world!")

BOM（浏览器对象模型）

BOM 是 Browser Object Model 的缩写，它是一种浏览器相关的 API，它允许 JavaScript 与浏览器进行交互，操作浏览器窗口和其他浏览器特性（如地址栏、浏览历史、屏幕尺寸等）。

核心概念：

• BOM 不是针对页面内容的，而是针对浏览器本身的模型，它提供了对浏览器的访问接口，可以操控窗口、历史记录、浏览器位置、用户代理等。
• BOM 的中心是 window 对象，几乎所有与浏览器相关的操作都通过 window 来实现。

主要功能：

• 控制浏览器窗口：例如，打开新窗口、调整窗口大小、控制滚动条等。
• 浏览器历史记录：通过 history 对象，可以访问和操作浏览器的历史记录。
• 浏览器位置和导航：可以通过 location 对象获取或修改浏览器的 URL 地址。
• 浏览器屏幕信息：通过 screen 对象获取用户的屏幕分辨率等信息。

BOM 示例：

// 获取当前页面的 URL
console.log(window.location.href);

// 改变当前页面的 URL
window.location.href = 'https://www.example.com';

// 打开一个新窗口
window.open('https://www.example.com', '_blank');

// 控制浏览器历史记录
window.history.back();  // 回到上一个页面
window.history.forward(); // 前进到下一个页面

// 获取浏览器的屏幕分辨率
console.log(window.screen.width);  // 屏幕宽度
console.log(window.screen.height); // 屏幕高度

DOM 与 BOM 的区别

1. 功能定位不同：

   • DOM 主要操作的是网页内容的结构和样式（即 HTML/XML 文档）。
   • BOM 主要操作的是浏览器本身的功能，如浏览器窗口、地址栏、历史记录等。

2. 结构不同：

   • DOM 是关于网页内容的树状结构，操作的是页面的元素、文本、属性等。
   • BOM 并没有固定的结构，它更侧重于浏览器的对象模型，核心对象是 window，并且与浏览器的其他功能交互。

3. 关系：

   • DOM 是网页的内容模型，而 BOM 是与浏览器本身的相关模型。
   • DOM 提供了对网页内容的操作接口，而 BOM 提供了与浏览器环境的操作接口。

常用的 BOM 对象和方法

• window：提供对浏览器窗口的操作接口。
• document：提供对网页内容的操作接口（虽然 document 也可以视作 DOM 的一部分，但它是 BOM 的一部分）。
• location：提供对浏览器地址栏（URL）的操作接口。
• history：提供对浏览器历史记录的操作接口。
• navigator：提供浏览器信息（如用户代理、浏览器版本等）。
• screen：提供屏幕信息（如分辨率、色深等）。

总结：

• DOM 专注于网页内容和结构，通过 JavaScript 操作 HTML 元素。
• BOM 专注于浏览器本身的操作，提供对浏览器窗口、地址栏、历史记录等功能的访问接口。

这两者通常是一起使用的，构成了前端开发中的基本操作环境。