什么是BOM和DOM以及他们之间有什么区别和联系

最新推荐文章于 2025-02-11 16:44:41 发布

阿尔法波

最新推荐文章于 2025-02-11 16:44:41 发布

阅读量1.3k

点赞数 26

分类专栏： javaWeb 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/weixin_65644655/article/details/142746154

版权

javaWeb 专栏收录该内容

11 篇文章

订阅专栏

什么是BOM和DOM以及他们之间有什么区别和联系

一、什么是DOM

DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。

DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。

①.文档节点：在树的顶端是文档节点，它呈现整个页面。

②.元素节点：需要访问DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。

③.属性节点：属性节点不是所在元素的子节点，它们是这个元素的一部分。当访问一个元素时，有特定的方法和属性用来读取或修改这个元素的属性。

④.文本节点：当访问元素节点，可以访问元素内部的文本。文本节点没有子节点。

常见的DOM节点主要有三种

①.元素节点：如<html>，<a>，<body>等都是元素节点，即标签

②.文本节点：向用户展示的内容，如<title>…</title>中的“文档标题”，<p>hello world</p> 中的内容

③.属性节点：元素的属性，如<a>中的href属性

通过document.getElementById 和 document.body 获取的元素就是获取元素的节点

以百度网站为例，在浏览器控制台，我们也能清晰看到DOM的层级关系

DOM树中的节点均可通过javascript进行访问，所有html节点均可被修改或删除，也可以创建新节点

下面列举一些常用的DOM操作方法

document.title // 设置页面title- document.getElementById(id) // 根据id获取元素- document.getElementsByTagName(name) // 根据tag获取元素- document.createElement(name) // 创建元素- parentNode.appendChild(node) // 向子节点列表末尾添加一个节点- parentNode.insertBefore() // 把要插入的节点放到某个特定的位置- parentNode.removeChild() // 移除节点- parentNode.cloneNode() // 对节点进行复制，接受一个布尔值参数，true为深拷贝，false为浅拷贝- element.innerHTML // 设置/获取元素内容- element.styles // 设置/获取元素样式- element.setAttribute() // 设置元素属性值- element.getAttribute() // 获取元素属性值- element.addEventListener() // 添加事件绑定

DOM事件流

事件流所描述的就是从页面中接受事件的顺序

DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

①捕获阶段：一开始从文档的根节点流向目标对象；（从上往下） ②目标阶段：然后在目标对向上被触发； ③冒泡阶段：之后再回溯到文档的根节点。（从下往上）

①事件捕获：当鼠标点击或者触发 dom 事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

在事件捕获的概念下在p元素上发生click事件的顺序应该是document -> html -> body -> div -> p

②事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -> div -> body -> html -> document

DOM标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发 dom 事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

不同的浏览器对此有着不同的实现，IE10 及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

二、什么是BOM

BOM 全称是 Browser Object Model，也就是浏览器对象模型。是JavaScript中用于表示和操作浏览器窗口及其相关组件的对象模型。

BOM提供了一组API（Application Programming Interface，应用程序编程接口），允许开发者通过JavaScript与浏览器进行交互。BOM的核心对象是window对象，它代表了浏览器窗口，并提供了许多属性和方法来操作窗口、导航、处理事件等。

window 对象的主要方法

方法描述 |------ `window.alert()`在浏览器中显示一个带有消息和确定按钮的警告框。 `window.prompt()`在浏览器中显示一个带有消息和输入框的提示框，接收用户输入的文本。 `window.confirm()`在浏览器中显示一个带有消息和确定/取消按钮的确认框，返回用户的选择结果。 `window.open()`打开一个新的浏览器窗口或标签页，并加载指定的URL。 `window.close()`关闭当前浏览器窗口或标签页。 `window.setTimeout()`在指定的延迟时间后执行一次指定的函数或一段代码。 `window.setInterval()`每隔指定的时间间隔重复执行指定的函数或一段代码。 `window.clearTimeout()`取消之前通过`setTimeout()`方法设置的定时器。 `window.clearInterval()`取消之前通过`setInterval()`方法设置的定时器。 `window.scrollTo()`在窗口中滚动到指定的位置。 `window.scrollBy()`在窗口中相对于当前滚动位置滚动指定的偏移量。 `window.innerWidth`返回窗口的内部宽度（不包括滚动条）。 `window.innerHeight`返回窗口的内部高度（不包括滚动条）。 `window.outerWidth`返回窗口的外部宽度（包括边框和滚动条）。 `window.outerHeight`返回窗口的外部高度（包括边框和滚动条）。 `window.location.reload()`重新加载当前页面。 `window.location.href`获取或设置当前页面的URL。 `window.location.assign()`加载指定的URL。 `window.location.replace()`用指定的URL替换当前页面，无法通过后退按钮返回。

这只是window对象的一部分方法，还有许多其他方法可用于操作窗口、处理定时器、导航等。请注意，某些方法可能在移动设备上具有不同的行为或受限制。

document 对象主要方法

这些方法可以对文档进行访问、创建、修改、删除等操作。

history 对象主要方法

方法描述 |------ `history.back()`加载历史记录中的上一个页面。 `history.forward()`加载历史记录中的下一个页面。 `history.go()`根据历史记录中的相对位置加载页面。 go(0) 刷新页面，go(1) 向前跳转，go(-1) 向后跳转 `history.pushState()`向浏览器历史记录添加一个状态，并且不触发页面刷新。 `history.replaceState()`替换当前的历史记录状态，并且不触发页面刷新。

这些方法允许开发者在不导致页面刷新的情况下，通过JavaScript代码控制浏览器的历史记录，实现前端路由和状态管理等功能。

location 对象主要方法

这些方法可以用来获取或设置location对象的不同部分，如主机名、路径、查询字符串等，并且可以通过调用这些方法来导航到其他页面或重新加载当前页面。

navigator 对象主要方法

不同浏览器的navigator对象可能会提供不同的方法和属性。因此，在使用特定方法或属性时，请务必进行兼容性检查，以确保代码在各种浏览器中正常运行。

screen 对象主要方法

这些方法提供了关于用户屏幕的一些信息，例如屏幕的尺寸、可用空间和颜色深度。通过这些方法，可以根据屏幕的特性来调整页面布局或显示不同的内容。

总结：在前端开发中，DOM和BOM通常一起使用，通过DOM操作文档内容，而通过BOM与浏览器进行交互，实现与用户界面和浏览器环境的交互效果。

注意：使用BOM时应考虑兼容性、安全性、性能和异步操作等方面的注意事项。合理使用BOM的功能，可以实现与浏览器窗口、历史记录、屏幕尺寸等相关的交互，提供更好的交互体验。

那么好我们来一个小总结：

BOM和DOM有什么区别和联系
BOM (Browser Object Model) 和 DOM (Document Object Model) 都是与 Web 开发相关的术语，它们分别代表了浏览器对象模型和文档对象模型。

BOM 是浏览器对象模型的缩写，它提供了一组用于操作浏览器窗口、浏览器历史记录、浏览器的位置等浏览器相关对象的接口。BOM 的核心对象是 window 对象，它代表了浏览器窗口或标签页。通过 BOM，开发者可以获取和操作浏览器的一些属性和方法，例如打开新窗口、改变浏览器的位置和尺寸、操作浏览器历史记录等。

而 DOM 是文档对象模型的缩写，它代表了以层次结构组织的 HTML 或 XML 文档，并提供了一组用于访问和操作文档内容的接口。DOM 将文档表示为一个由节点组成的树结构，每个节点代表文档中的一个元素、属性、文本等。通过 DOM，开发者可以使用 JavaScript 动态地访问、添加、删除或修改文档中的元素和内容。

BOM 和 DOM 之间有一些联系和交互，因为两者都是 Web 开发中重要的 API。例如，BOM 中的 document 对象就是可以用于访问和操作 DOM 的入口点。通过 document 对象，开发者可以获取文档中的元素、修改元素的样式、添加事件监听等。此外，BOM 的一些方法也可以用于操作或修改 DOM，例如 window.open() 方法可以用于打开一个新的浏览器窗口，并加载指定的 URL。

总结起来，BOM 主要用于操作浏览器窗口和浏览器功能，而 DOM 则用于访问和操作文档内容。它们是紧密相关的概念，但又有各自独立的功能和使用方式。

BOM (浏览器对象模型) 提供了一组用于操作浏览器窗口和浏览器功能的对象和方法。下面是一些常见的 BOM 对象：

window 对象：代表浏览器的窗口或标签页，是 BOM 的核心对象。它提供了许多属性和方法，例如打开和关闭窗口、操作窗口尺寸和位置、加载和导航 URL、设置定时器、处理事件等。 1. document 对象：表示当前窗口或标签页中加载的文档。它提供了许多方法和属性，用于访问和操作文档内容，例如获取和修改元素、添加和删除节点、修改文档的标题等。 1. navigator 对象：提供了关于浏览器和用户代理的信息，如浏览器的名称、版本、平台等。它还可以判断浏览器的属性和功能，从而进行浏览器兼容性处理。 1. history 对象：用于操作浏览器的历史记录。通过 history 对象，可以在用户浏览历史中向前或向后导航，以及在历史记录中添加新的 URL。 1. location 对象：提供了访问和操作当前页面 URL 的接口。通过 location 对象，可以获取当前页面的 URL、修改页面的 URL、导航到新的 URL 等操作。 1. screen 对象：表示用户屏幕的信息，如屏幕的尺寸、分辨率等。它提供了一些属性，用于获取关于屏幕的信息，例如获取屏幕的宽度和高度。
在 JavaScript 中，可以通过直接使用这些对象来访问和操作浏览器功能。例如，使用 window.open() 方法打开新窗口，使用 document.getElementById() 方法获取文档中的元素，使用 navigator.userAgent 属性获取浏览器的用户代理等。

DOM (文档对象模型) 提供了一组用于访问和操作文档内容的接口和方法。下面是一些常见的 DOM 操作：

选择元素:
1. document.getElementById(id): 通过元素的 id 获取单个元素。1. document.getElementsByClassName(className): 通过类名获取一组元素。1. document.getElementsByTagName(tagName): 通过标签名获取一组元素。1. document.querySelector(selector): 通过 CSS 选择器获取单个元素。1. document.querySelectorAll(selector): 通过 CSS 选择器获取一组元素。
2. 操作元素内容:
3. element.innerHTML: 获取或设置元素的 HTML 内容。1. element.textContent: 获取或设置元素的文本内容。1. element.setAttribute(name, value): 设置元素的属性。1. element.getAttribute(name): 获取元素的属性值。1. element.classList: 获取元素的类名列表，可以进行添加、删除、切换类名等操作。
4. 操作元素结构:
5. document.createElement(tagName): 创建一个新的元素节点。1. element.appendChild(child): 将子节点添加到元素的末尾。1. element.removeChild(child): 从元素中移除一个子节点。1. element.replaceChild(newChild, oldChild): 将旧的子节点替换为新的子节点。1. element.parentNode: 获取元素的父节点。1. element.childNodes: 获取元素的所有子节点列表。
6. 事件处理:
7. element.addEventListener(event, handler): 绑定元素的事件监听器。1. element.removeEventListener(event, handler): 移除元素的事件监听器。
8. - element.innerHTML: 获取或设置元素的 HTML 内容。- element.textContent: 获取或设置元素的文本内容。- element.setAttribute(name, value): 设置元素的属性。- element.getAttribute(name): 获取元素的属性值。- element.classList: 获取元素的类名列表，可以进行添加、删除、切换类名等操作。- element.addEventListener(event, handler): 绑定元素的事件监听器。- element.removeEventListener(event, handler): 移除元素的事件监听器。
  这些只是 DOM 操作的一小部分，实际上还有更多的方法和属性可用于访问和操作文档的结构和内容。通常情况下，可以结合这些方法和属性来创建交互性更强的网页，动态地修改和展示内容。