JavaScriptBOM与DOM简介

红虾程序员

于 2025-02-17 01:00:13 发布

阅读量1.3k

点赞数 29

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端 intellij-idea visual studio code pycharm

本文链接：https://blog.csdn.net/m0_70296476/article/details/145672988

版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

一、BOM

1. BOM的基本概念

JavaScript中的BOM（Browser Object Model，浏览器对象模型）是JavaScript与浏览器窗口进行交互的核心接口，它提供了一组独立于内容而与浏览器窗口进行交互的对象。通过BOM，开发者可以控制浏览器的行为，如打开和关闭窗口、导航历史记录、屏幕信息等。BOM 的核心对象是 window，它代表浏览器窗口或标签页，所有全局 JavaScript 对象、函数和变量都是 window 对象的成员。

2. BOM的主要对象

(1)Window 对象

window 对象是 BOM 的核心对象，代表浏览器窗口或标签页。它提供了许多属性和方法，例如打开和关闭窗口、操作窗口尺寸和位置、加载和导航 URL、设置定时器、处理事件等。

常用方法：

window.alert("msg")：显示带有一段消息和一个确认按钮的警告框。
window.confirm("msg")：显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则方法返回 true；如果用户点击取消按钮，则方法返回 false。
window.prompt("msg", "defaultvalue")：显示可提示用户输入的对话框。返回值为获取用户输入的值。
window.open(url, target)：打开一个新的浏览器窗口或标签页。
window.close()：关闭当前窗口。
window.setTimeout(function, ms)：设置一个定时器，在指定的毫秒数后执行一次指定的函数。
window.clearTimeout(taskid)：清除由 setTimeout 设置的定时器。
window.setInterval(function, ms)：设置一个定时器，每隔指定的毫秒数重复执行一次指定的函数。
window.clearInterval(taskid)：清除由 setInterval 设置的定时器。

示例代码：

 // 弹出警告框
 window.alert("警告！");
 
 // 弹出确认框
 if (window.confirm("你确定要继续吗？")) {
     console.log("用户点击了确定");
 } else {
     console.log("用户点击了取消");
 }
 
 // 弹出输入框
 let userInput = window.prompt("请输入你的名字：", "默认名字");
 console.log("用户输入的名字是：" + userInput);
 
 // 打开新窗口
 window.open("https://www.example.com", "_blank");
 
 // 设置定时器
 let timerId = setInterval(function () {
     console.log("定时器执行了一次！");
 }, 3000); // 每秒执行一次
 
 // 清除定时器
 clearInterval(timerId);

(2)Navigator 对象

navigator 对象提供了与浏览器相关的各种信息，如 userAgent 等公共属性。通过 navigator 对象可以获取浏览器的名称、版本、操作系统等信息。

常用属性：

navigator.userAgent：返回浏览器的用户代理字符串。
navigator.platform：返回浏览器所在的平台。
navigator.language：返回浏览器的语言。

示例代码：

 console.log("用户代理字符串: " + navigator.userAgent);
 console.log("平台: " + navigator.platform);
 console.log("语言: " + navigator.language);

(3)Location 对象

location 对象代表当前浏览器的地址栏信息，通过 location 可以获取地址栏信息，或者操作浏览器跳转界面。

常用属性和方法：

location.href：获取或设置当前页面的 URL。
location.protocol：获取当前页面的协议（如 http: 或 https:）。
location.host：获取当前页面的主机名和端口号。
location.hostname：获取当前页面的主机名。
location.port：获取当前页面的端口号。
location.pathname：获取当前页面的路径部分。
location.search：获取当前页面的查询字符串部分。
location.hash：获取当前页面的锚点部分。
location.reload(forceGet)：重新加载当前页面。如果参数为 true，则强制从服务器重新加载页面，而不是从缓存中加载。
location.assign(url)：加载新的文档。
location.replace(url)：用新的文档替换当前文档，不会在历史记录中留下记录。

示例代码：

 console.log("当前页面的 URL: " + location.href);
 console.log("协议: " + location.protocol);
 console.log("主机名: " + location.hostname);
 console.log("路径: " + location.pathname);
 console.log("查询字符串: " + location.search);
 console.log("锚点: " + location.hash);
 
 // 刷新页面
 location.reload();
 
 // 跳转到新的页面
 location.assign("https://www.example.com");
 
 // 替换当前页面
 location.replace("https://www.example.com");

(4)History 对象

history 对象用于保存浏览器的历史记录，包括向后和向前导航的记录数量。通过 history 对象可以操作浏览器的历史记录。

常用方法：

history.back()：后退到历史记录中的上一个页面。
history.forward()：前进到历史记录中的下一个页面。
history.go(delta)：根据参数 delta 的值前进或后退到历史记录中的某个页面。如果 delta 为正数，则前进；如果 delta 为负数，则后退。

示例代码：

 // 后退到上一个页面
 history.back();
 
 // 前进到下一个页面
 history.forward();
 
 // 后退两个页面
 history.go(-2);
 
 // 前进一个页面
 history.go(1);

(5)Screen 对象

screen 对象代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息。

常用属性：

screen.width：获取屏幕的宽度（以像素为单位）。
screen.height：获取屏幕的高度（以像素为单位）。
screen.availWidth：获取可用屏幕宽度（以像素为单位），不包括操作系统任务栏等不可用区域。
screen.availHeight：获取可用屏幕高度（以像素为单位），不包括操作系统任务栏等不可用区域。
screen.colorDepth：获取屏幕的颜色深度（以位为单位）。
screen.pixelDepth：获取屏幕的像素深度（以位为单位）。

示例代码：

 console.log("屏幕宽度: " + screen.width);
 console.log("屏幕高度: " + screen.height);
 console.log("可用屏幕宽度: " + screen.availWidth);
 console.log("可用屏幕高度: " + screen.availHeight);
 console.log("颜色深度: " + screen.colorDepth);
 console.log("像素深度: " + screen.pixelDepth);

3. BOM的应用场景

弹出警告框：提示用户某些操作的结果。
导航控制：实现页面跳转、刷新和历史记录管理。
窗口控制：调整窗口大小、打开新窗口、关闭当前窗口。
获取浏览器信息：用于检测浏览器兼容性。

二、DOM

1. DOM的基本概念

JavaScript中的DOM（Document Object Model，文档对象模型）是浏览器用于操作HTML和XML文档的标准编程接口。DOM将文档表示为树形结构，每个节点代表文档的一部分，如元素、属性、文本等。通过DOM，开发者可以动态地访问和操作网页的内容、结构和样式。

DOM树：浏览器在解析HTML文档时构建的树形结构，每个节点代表文档的一部分。例如，HTML文档中的每个元素、属性和文本节点都是DOM树中的一个节点。
DOM节点：DOM树中的每个节点都有特定的类型，如Element（元素）、Text（文本）、Attribute（属性）等。
DOM API：JavaScript提供了丰富的API来操作DOM节点，包括获取节点、修改节点内容、添加和删除节点等。

2. DOM的操作方法

(1)获取DOM节点

获取DOM节点是操作DOM的基础，常用的获取方法有：

通过ID获取节点：document.getElementById("id")
通过类名获取节点：document.getElementsByClassName("className")
通过标签名获取节点：document.getElementsByTagName("tagName")
通过CSS选择器获取节点：document.querySelector("selector") 和 document.querySelectorAll("selector")

 // 通过ID获取节点
 const elementById = document.getElementById("myId");
 
 // 通过类名获取节点
 const elementsByClassName = document.getElementsByClassName("myClass");
 
 // 通过标签名获取节点
 const elementsByTagName = document.getElementsByTagName("div");
 
 // 通过CSS选择器获取节点
 const elementByQuerySelector = document.querySelector("#myId .myClass");
 const elementsByQuerySelectorAll = document.querySelectorAll("div.myClass");

(2)更新DOM节点

更新DOM节点通常涉及修改节点的内容或样式。

修改文本内容：element.innerText 或 element.textContent
修改HTML内容：element.innerHTML
修改样式：element.style.property = "value"

 // 修改文本内容
 elementById.innerText = "新的文本内容";
 
 // 修改HTML内容
 elementById.innerHTML = "<p>新的HTML内容</p>";
 
 // 修改样式
 elementById.style.color = "red";
 elementById.style.fontSize = "20px";

(3)删除DOM节点

删除DOM节点需要先获取要删除的节点及其父节点，然后调用父节点的removeChild()方法。

 // 获取要删除的节点
 var childNode = document.getElementById("childId");
 
 // 获取父节点
 var parentNode = childNode.parentNode;
 
 // 删除节点
 parentNode.removeChild(childNode);

(4)创建DOM节点

创建新的DOM节点通常使用createElement()方法创建元素节点，使用createTextNode()方法创建文本节点。

 // 创建一个新的元素节点
 var newElement = document.createElement("div");
 
 // 创建一个新的文本节点
 var newText = document.createTextNode("这是一个新的文本节点");
 
 // 将文本节点添加到元素节点中
 newElement.appendChild(newText);

(5)插入DOM节点

插入DOM节点可以使用appendChild()方法将新节点添加到现有节点的末尾，或者使用insertBefore()方法在指定节点前插入新节点。

 // 获取父节点
 var parentElement = document.getElementById("parentId");
 
 // 使用appendChild()方法将新节点添加到父节点的末尾
 parentElement.appendChild(newElement);
 
 // 使用insertBefore()方法在指定节点前插入新节点
 var referenceNode = document.getElementById("referenceId");
 parentElement.insertBefore(newElement, referenceNode);

(6)操作DOM对象

DOM对象通常指的是通过DOM API获得的元素节点或其他类型的节点（如文本节点、属性节点等）。操作DOM对象可能包括更改其属性、内容、样式、事件监听器等。

示例：添加事件监听器

 // 为元素添加点击事件监听器
 elementById.addEventListener('click', function() {
     alert('Element clicked!');
 });
  
 // 或者使用命名函数作为事件处理程序
 function handleClick() {
     console.log('Element clicked!');
 }
 elementById.addEventListener('click', handleClick);
  
 // 移除事件监听器
 elementById.removeEventListener('click', handleClick);

3. 综合示例

以下是一个简单的HTML页面，展示了如何使用JavaScript操作DOM。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>DOM 操作示例</title>
 </head>
 <body>
 <h1 id="hello">欢迎来到DOM操作示例</h1>
 <p>这是一个段落。</p>
 <button onclick="function changeTitle() {
 
 }
 changeTitle()">点击改变标题
 </button>
 
 <script>
     // 获取元素
     const title = document.getElementById('hello');
 
     // 修改元素内容
     title.textContent = '新的标题';
 
     // 添加事件监听器
     document.querySelector('button').addEventListener('click', function () {
         title.textContent = '更新的标题';
     });
 </script>
 </body>
 </html>

三、BOM与DOM的区别

BOM：

定义：BOM是浏览器提供的API集合，它定义了浏览器窗口和浏览器对象的标准方法和属性。
核心对象：BOM的核心对象是window，它代表了浏览器窗口或标签页。window对象包含了浏览器窗口的各种属性和方法，如大小、位置、历史记录、定时器等。
功能：BOM主要用于操作浏览器窗口和框架，如打开新窗口、关闭窗口、调整窗口大小、访问浏览器的历史记录、书签、插件等。此外，BOM还提供了定时器功能，如setTimeout和setInterval，用于在指定的时间后执行代码或周期性地执行代码。
应用范围：BOM涉及浏览器窗口的各个方面，包括窗口、历史记录、定时器等，不局限于文档内容。
标准化：BOM没有统一的标准，不同浏览器的实现可能有所不同，因此在使用BOM时，需要注意不同浏览器之间的兼容性差异。

DOM：

定义：DOM是HTML和XML文档的编程接口，它定义了访问和操作网页的标准方法。DOM将整个网页视为一个文档对象，并将网页中的元素、属性、文本等表示为节点，构建了一个树状的文档结构。
核心对象：DOM的核心对象是document，它代表了整个HTML文档。通过document对象，开发者可以访问和修改网页的结构、样式和内容。
功能：DOM主要用于操作网页内容，如获取、创建、修改和删除网页中的元素，为网页中的元素添加事件监听器以响应用户的交互操作，以及遍历和修改文档的结构等。
应用范围：DOM只关注于文档本身，不涉及浏览器窗口的其他部分，如窗口大小、位置、浏览器功能等。
标准化：DOM是W3C（World Wide Web Consortium）制定的标准，所有主流浏览器都遵循这个标准，因此DOM在不同浏览器之间具有较好的兼容性。