【JavaScript】DOM和BOM详解

Peter-Lu

于 2024-09-10 10:20:06 发布

阅读量675

点赞数 4

分类专栏： # JavaScript 文章标签： javascript 前端 Material-UI ui react.js

本文链接：https://blog.csdn.net/lph159/article/details/142091282

版权

JavaScript 专栏收录该内容

89 篇文章 5 订阅

订阅专栏

在前端开发中，DOM（文档对象模型）和BOM（浏览器对象模型）是两个非常重要的概念。它们提供了操作网页和浏览器的接口，使得开发者能够动态控制页面内容和行为。本文将详细介绍DOM和BOM的基本概念、作用以及它们在前端开发中的具体应用。

一、DOM（文档对象模型）概述

1. DOM的定义

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。它将文档结构化为一个树形结构，开发者可以通过JavaScript访问和操作这棵树的节点，以动态地修改网页内容和结构。每个HTML标签都对应DOM中的一个节点。

DOM为开发者提供了操作网页元素的方式，例如添加、修改、删除元素，甚至可以改变网页的样式或事件处理。

2. DOM的基本结构

DOM的基本结构是一个节点树，包含了以下几类节点：

元素节点：对应HTML标签，例如<div>、<p>。
文本节点：表示标签内的文本内容，例如<p>文本节点</p>中的"文本节点"部分。
属性节点：表示标签的属性，例如id="main"。
文档节点：整个HTML文档的根节点，通常是document对象。

3. DOM的主要功能

DOM允许开发者通过JavaScript来：

访问节点：获取页面中的某个元素，例如通过getElementById()或querySelector()。
修改节点：动态改变元素的属性、内容或样式，例如element.innerHTML = '新内容'。
创建或删除节点：例如通过document.createElement()创建新的元素，或者通过removeChild()删除现有元素。
处理事件：为页面元素绑定事件处理函数，例如addEventListener()。

// 获取元素并修改其内容
const heading = document.getElementById('myHeading');
heading.innerHTML = 'DOM 操作演示';

4. DOM 操作的常见方法

getElementById(id)：通过元素的ID获取DOM元素。
getElementsByClassName(className)：通过类名获取元素集合。
querySelector(selector)：通过CSS选择器获取第一个匹配的元素。
createElement(tagName)：创建新元素。
appendChild(node)：向父节点添加子节点。
removeChild(node)：从父节点移除子节点。

5. DOM的实际应用场景

1. 动态更新页面内容

DOM操作可以让页面根据用户操作或服务器返回的数据动态更新内容，而无需重新加载整个页面。例如，在表单提交后，页面可以通过JavaScript直接更新提示信息。

const message = document.getElementById('message');
message.innerHTML = '表单提交成功！';

2. 动态添加或删除元素

通过DOM，可以根据用户交互或数据变化动态生成新的HTML元素。一个常见的例子是创建动态列表：

const ul = document.createElement('ul');
const li = document.createElement('li');
li.textContent = '新列表项';
ul.appendChild(li);
document.body.appendChild(ul);

3. 事件处理

DOM事件是网页交互的核心。通过为DOM元素绑定事件监听器，可以捕捉用户的操作，例如点击、输入或滚动，并做出响应。

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('按钮被点击了！');
});

二、BOM（浏览器对象模型）概述

1. BOM的定义

BOM（Browser Object Model，浏览器对象模型）是指浏览器提供的接口，用于与浏览器窗口进行交互。与DOM不同，BOM并不直接与页面内容相关，而是用于操作浏览器本身的功能，例如浏览器窗口、导航、历史记录等。

BOM通过全局对象window暴露给开发者，window对象包含了一些常用的子对象，例如navigator、history、location和screen，每个子对象负责不同的浏览器功能。

2. BOM的主要组成部分

window对象：浏览器的全局对象，包含所有BOM相关的功能和全局变量。DOM的document对象实际上是window的一个属性。
navigator对象：提供关于浏览器的信息，例如浏览器类型和版本、操作系统等。
location对象：用于获取或操作当前页面的URL，常用于页面跳转或刷新。
history对象：用于访问浏览器的历史记录，可以前进、后退等。
screen对象：提供关于用户屏幕的信息，例如屏幕的宽度和高度。

// 通过 location 对象跳转页面
window.location.href = 'https://www.example.com';

3. BOM的常见操作

1. 操作浏览器窗口

通过BOM，开发者可以控制浏览器窗口，例如打开新窗口、关闭窗口、调整窗口大小等。

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

2. 获取浏览器和设备信息

使用navigator对象可以获取关于浏览器的详细信息，例如用户代理字符串、浏览器语言等。

console.log(navigator.userAgent);
console.log(navigator.language);

3. URL 操作

通过location对象，开发者可以获取当前页面的URL信息，或者跳转到新页面。

console.log(location.href);  // 获取当前页面URL
location.href = 'https://www.newpage.com';  // 跳转到新页面

4. 历史记录操作

history对象允许开发者控制浏览器的历史记录，常用于实现"前进"和"后退"功能。

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

三、DOM与BOM的区别

虽然DOM和BOM都用于操作浏览器中的网页，但它们有着明确的区别：

DOM主要用于操作页面中的内容（HTML文档），它允许开发者动态修改网页结构、内容和样式。
BOM则主要用于操作浏览器本身的功能，例如窗口、导航和历史记录等，它侧重于与浏览器的交互。

在实际开发中，DOM和BOM常常一起使用。例如，你可以通过DOM修改页面内容，通过BOM刷新页面或获取浏览器信息。

四、DOM与BOM的实际应用

在一个实际的前端应用中，DOM和BOM通常结合使用。例如，当用户点击一个按钮时，可以通过DOM改变页面内容，通过BOM重定向到另一个页面：

const button = document.getElementById('submit');
button.addEventListener('click', () => {
  // 修改DOM内容
  document.getElementById('message').innerHTML = '即将跳转...';
  
  // 使用BOM进行页面跳转
  window.location.href = 'https://www.newpage.com';
});