【JavaScript】DOM和BOM是什么？

作者 ：Yuppie001
作者主页 ： 传送
本文专栏 ：JavaScript
🌟🌟🌟🌟🌟🌟🌟🌟

一.什么是DOM

    DOM（Document Object Model)文档对象模型。
    是浏览器提供的一组函数方法（APi），它将HTML文档的各个元素转换为对象。转换为对象的HTML结构被称为DOM树，此时的JavaScript可以通过操作HTML对象来达到操作HTML元素。

在没有DOM的年代，JavaScript操作HTML的方式非常有限并且原始
DOM提供了一种可以让JavaScript访问和操作网页内容、结构和样式的方式。

DOM是如何工作

（1）首先浏览器解析HTML并创建DOM树。
（2）JS通过访问DOM API 来达到访问、修改、删除或添加 HTML 元素。
（3）每当JS操作DOM后，浏览器会重新渲染页面，并更新内容。

假设我们有以下的 HTML 结构：

<button id="myButton">点击我</button>
<p id="myParagraph">初始文本</p>

通过 JavaScript 操作 DOM，可以实现点击按钮后修改段落内容：

var button = document.getElementById('myButton');
var paragraph = document.getElementById('myParagraph');

button.addEventListener('click', function() {
    paragraph.innerText = "按钮被点击了！";
});

a）通过 document.getElementById(‘myButton’)，获取了页面中 ID 为 myButton 的按钮元素的引用，并赋值给变量 button。此时，button 变量引用了该按钮元素。

b）通过 document.getElementById(‘myParagraph’)，获取了页面中 ID 为 myParagraph 的段落元素的引用，并赋值给变量 paragraph。此时，paragraph 变量引用了该段落元素。

c）通过 button.addEventListener(‘click’, function() {…}) 绑定了一个 click 事件监听器。当按钮被点击时，回调函数执行，其中会修改 paragraph 元素的 innerText 属性，将其文本内容从 “初始文本” 更改为 “按钮被点击了！”

注： document.getElementById(‘myButton’)操作并不是“生成”新的对象。对象在渲染时早已经被创建了，上面的操作只是为了获取对象的引用，而不是创建新的对象

二.BOM（浏览器对象模型）

    在理解了DOM后，BOM的理解是非常自然的下一步。虽然 DOM 和 BOM 都是浏览器的编程接口，它们的作用和关注点有所不同。

BOM的组成

    BOM 允许开发者通过 JavaScript 与浏览器本身进行交互，而不仅仅是网页内容。具体来说，BOM 主要提供了以下功能：

1. Window 对象

• window 是 BOM 的核心对象，它代表浏览器的窗口。通过 window 对象，你可以访问到浏览器窗口的各个属性和方法。
• window.document：它是 DOM 的一部分，允许你操作网页的 DOM 树。
• window.alert()：弹出浏览器提示框。
• window.location：获取或设置当前页面的 URL。
• window.localStorage：用于存储在浏览器本地持久化的数据。
  2. Location 对象
• window.location 提供了有关当前页面的 URL 信息，允许你读取和修改页面的 URL。
• 你可以使用它来获取页面的地址，或在浏览器中重定向到另一个页面。
  例如：

console.log(window.location.href);  // 获取当前页面的 URL
window.location.href = "https://example.com";  // 跳转到另一个页面

3. Navigator 对象

• window.navigator 提供了关于浏览器本身的信息，如浏览器类型、版本、用户代理等。

console.log(window.navigator.userAgent);  // 获取用户代理信息

4. Screen 对象

• window.screen 提供了关于显示器的信息，如屏幕宽度、屏幕高度、颜色深度等。

console.log(window.screen.width);  // 获取屏幕宽度

5. History 对象

• window.history 提供了浏览器的历史记录功能，允许你访问浏览器的历史记录、后退、前进等。

window.history.back();  // 后退到上一页
window.history.forward();  // 前进到下一页

6. Console 对象

• window.console 用于在浏览器的开发者工具中输出信息（通常用于调试）。

console.log("Hello, World!");  // 输出到浏览器控制台