BOM概述

目录

一. BOM和DOM的区别

二. BOM概述

核心对象

#window对象

#document对象

#location对象

#history对象

#navigator对象 

窗口和框架

定时器

Cookie

浏览器历史记录

三. 基本操作

 

---

在前端开发中，BOM（Browser Object Model）是一个重要的概念。它是指浏览器对象模型，提供了一组JavaScript API，用于管理浏览器窗口和框架。BOM与DOM（Document Object Model）一样，是JavaScript中的一部分，但与DOM不同，BOM主要关注于管理浏览器的窗口和框架，而DOM则关注于处理网页内容的结构。

一. BOM和DOM的区别

BOM是指浏览器对象模型，它提供了访问和操作浏览器窗口和浏览器本身的方法和属性，包括浏览器窗口的大小和位置、浏览器的历史记录、浏览器的插件和工具栏、浏览器的地址栏和状态栏等。BOM的核心对象是window对象，它代表了浏览器窗口或框架，提供了操作BOM的方法和属性。

DOM是指文档对象模型，它提供了访问和操作HTML或XML文档的方法和属性，包括HTML或XML文档的结构、内容和样式等。DOM的核心对象是document对象，它代表了整个HTML或XML文档，提供了操作DOM的方法和属性。

BOM和DOM之间的联系是它们共同组成了Web应用程序的核心对象模型，BOM和DOM都是通过JavaScript来访问和操作的。通常情况下，我们使用JavaScript来操作DOM元素来修改网页的结构和内容，同时使用BOM来管理浏览器窗口和提供更好的用户体验。例如，我们可以使用DOM来添加新的HTML元素和样式，使用BOM来创建新的浏览器窗口或标签页。

二. BOM概述

核心对象

在JavaScript中，BOM主要由window对象和其它对象组成。window对象是BOM的核心对象，代表浏览器的一个窗口或一个框架。可以使用window对象来访问和操作浏览器窗口或框架中的所有内容，例如文档、表单、链接、图像等等。

除了window对象，BOM还提供了许多其它对象，如下所示：

1. Location对象：代表当前文档的URL，可以通过它来获取和操作URL中的各个部分。

2. Navigator对象：提供有关浏览器的信息，如名称、版本、厂商等等。

3. Screen对象：代表用户的屏幕，提供有关屏幕大小、分辨率等信息。

4. History对象：代表浏览器的历史记录，可以使用它来在不同的历史记录条目之间进行导航。

#window对象

window对象是BOM的核心对象，它代表了整个浏览器窗口或框架。可以使用window对象来访问和操作BOM的方法和属性，也可以使用它来操作DOM元素。下面是一些常用的window对象的基本操作：

     1. 打开一个新的窗口或标签页：

window.open("http://www.example.com", "_blank");

     2. 获得当前窗口或标签页的大小： 

var width = window.innerWidth;
var height = window.innerHeight;

     3. 滚动到页面的顶部或底部： 

window.scrollTo(0, 0); // 滚动到页面顶部
window.scrollTo(0, document.body.scrollHeight); // 滚动到页面底部

#document对象

document对象代表了整个HTML或XML文档，它是DOM的核心对象。可以使用document对象来访问和操作文档的方法和属性。下面是一些常用的document对象的基本操作： 

• 获取文档中的某个元素：

  var element = document.getElementById("myElement");
  

• 创建新的HTML元素： 

var newElement = document.createElement("div");
newElement.innerHTML = "This is a new element";
document.body.appendChild(newElement);

• 修改元素的样式：

  var element = document.getElementById("myElement");
  element.style.backgroundColor = "red";
  

• 添加或移除元素的类： 

  var element = document.getElementById("myElement");
  element.classList.add("myClass");
  element.classList.remove("myClass");
  

#location对象

location对象代表了当前浏览器窗口的URL地址，它提供了访问和操作URL的方法和属性。下面是一些常用的location对象的基本操作：

• 获取当前URL地址：

  var currentURL = location.href;
  

   

• 跳转到新的URL地址：

  location.href = "http://www.example.com";
  

•  重载当前页面：

  location.reload();
  

• 获取当前URL的查询参数： 

  var queryString = location.search;
  

#history对象

history对象代表了当前浏览器窗口的浏览历史记录，它提供了访问和操作历史记录的方法和属性。下面是一些常用的history对象的基本操作： 

• 返回上一个历史记录：

  history.back();
  

•  前进到下一个历史记录：

  history.forward();
  

• 获取当前历史记录的数量：

  var length = history.length;
  

   

#navigator对象 

navigator对象提供了关于浏览器的信息，如浏器的名称、版本、操作系统等。下面是一些常用的navigator对象的基本操作：

• 获取浏览器的名称和版本：

  var browserName = navigator.appName;
  var browserVersion = navigator.appVersion;
  

• 获取操作系统的名称和版本：

  var OSName = navigator.platform;
  var OSVersion = navigator.oscpu;
  

   
• 获取浏览器的语言设置： 

  var language = navigator.language;
  

窗口和框架

在JavaScript中，每个窗口和框架都有一个window对象。可以使用window对象来访问和操作窗口和框架中的各种元素。

    1. 打开窗口：可以使用window.open()方法打开一个新窗口或一个新的浏览器选项卡。

window.open("http://www.example.com", "example", "width=500,height=400");

 该方法接受三个参数：URL、窗口名称和窗口属性。

     2. 关闭窗口：可以使用window.close()方法关闭当前窗口。

window.close();

     3. 调整窗口大小和位置：可以使用window.resizeTo()和window.moveTo()方法调整窗口的大小和位置。

window.resizeTo(500, 400); // 设置窗口大小为500x400
window.moveTo(100, 100); // 将窗口移动到坐标(100, 100)

    4. 访问窗口属性：可以使用window对象的属性来访问窗口的各种属性。

console.log(window.innerWidth); // 窗口的宽度
console.log(window.innerHeight); // 窗口的高

   5. 访问父窗口和子窗口：在包含框架的页面中，可以使用window.parent对象来访问父窗口，使用window.frames对象来访问子窗口。

console.log(window.parent.location.href); // 父窗口的URL
console.log(window.frames[0].location.href); // 第一个子窗口的URL

定时器

JavaScript中的定时器可以用来延迟代码执行或定期执行代码。BOM提供了两个定时器方法：setTimeout()和setInterval()。

      1. setTimeout()方法：用于在指定的毫秒数后执行一次代码。

setTimeout(function() {
  console.log("Hello World!");
}, 1000); // 延迟1秒执行

      2. setInterval()方法：用于在指定的毫秒数后重复执行一次代码。

let timer = setInterval(function() {
  console.log("Hello World!");
}, 1000); // 每隔1秒执行一次

// 取消定时器
clearInterval(timer);

Cookie

Cookie是一种在客户端存储数据的方式，常用于在浏览器和服务器之间传递数据。BOM提供了两个用于操作Cookie的方法：document.cookie和navigator.cookieEnabled。

      1. document.cookie：用于读取、写入和删除Cookie。

// 写入Cookie
document.cookie = "username=赵赵赵; expires=Sun, 7 Dec 2028 12:00:00 UTC; path=/";

// 读取Cookie
console.log(document.cookie);

// 删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 2011 00:00:00 UTC; path=/;";

    2. navigator.cookieEnabled：用于检测浏览器是否启用了Cookie。

if (navigator.cookieEnabled) {
  console.log("Cookies are enabled");
} else {
  console.log("Cookies are disabled");
}

浏览器历史记录

BOM提供了History对象，用于管理浏览器的历史记录。

     1. 前进和后退：可以使用History对象的back()和forward()方法来实现浏览器的后退和前进操作。

// 后退一页
history.back();

// 前进一页
history.forward();

    2. 跳转到指定历史记录：可以使用History对象的go()方法来跳转到指定的历史记录条目。

// 跳转到前两个历史记录条目
history.go(-2);

三. 基本操作

 

       1. 创建新窗口或标签页：可以使用window.open()方法创建新窗口或标签页。

// 在新窗口中打开URL
window.open("http://www.example.com");

// 在新标签页中打开URL
window.open("http://www.example.com", "_blank");

       2.  改变窗口大小和位置：可以使用window.resizeTo()和window.moveTo()方法改变窗口的大小和位置。

// 将窗口移动到屏幕左上角，并设置大小为500x500像素
window.moveTo(0, 0);
window.resizeTo(500, 500);

      3.  获取屏幕大小和浏览器窗口大小：可以使用screen对象和window.innerWidth、window.innerHeight属性获取屏幕大小和浏览器窗口大小。

// 获取屏幕宽度和高度
var screenWidth = screen.width;
var screenHeight = screen.height;

// 获取浏览器窗口宽度和高度
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

     4. 获取当前网页的URL和重定向到新的URL：可以使用location对象获取当前网页的URL，使用location.href属性来重定向到新的URL。

// 获取当前网页的URL
var currentUrl = location.href;

// 重定向到新的URL
location.href = "http://www.example.com";

     5. 显示对话框和确认框：可以使用window.alert()、window.prompt()和window.confirm()方法在浏览器中显示对话框和确认框。

// 显示提示框
window.alert("Hello World!");

// 显示输入框
var name = window.prompt("Please enter your name:");

// 显示确认框
var confirmed = window.confirm("Are you sure you want to delete this file?");