目录

前言:

1. BOM组成：

1.1Window 对象：

1.1Location 对象：

1.2Navigator 对象：

1.2.1 navigator 对象包含了关于浏览器的信息包括：

1.3History 对象：

1.4常用的history的方法和属性:

1.4Document 对象：

1.5Screen 对象：

1.6console 对象：

1.6.1常用的console的用法:

1.6.1.1console.log():

1.6.1.2console.assert(condition, message):

1.6.1.3console.clear():

1.6.1​​​​​​​.4console.count(label):

1.6.1​​​​​​​.5console.countReset(label):

1.6.1​​​​​​​.6console.warn(message):

1.6.1​​​​​​​.7console.error(message):

1.6.1​​​​​​​.8console.dir(object):

1.6.1​​​​​​​.9console.group(title) 和 console.groupEnd():

1.6.1​​​​​​​.10.console.time(label) 和 console.timeEnd(label):

2.定时器详解:

2.1setTimeout:

2.2setInterval:

2.3清除定时器:

2.4注意事项:

2.5BOM的其他常用功能

2.5.1window.location：

2.5.2window.history：

2.5.3window.navigator：

2.5.4window.document：

2.5.5window.screen：

3.浏览器窗口及与窗口交互的元素:

3.1浏览器的尺寸数据和方法:

3.1.1.innerWidth 和 innerHeight：

3.1.2.screenLeft 和 screenTop（或 screenX 和 screenY）：

3.1.3.outerHeight 和 outerWidth：

3.1.4.scrollX 和 scrollY（或 pageXOffset 和 pageYOffset）：

3.2名词解释:

3.2.1screen：

3.2.2client：

3.2.3offset：

3.2.4scroll：

3.2.5inner：

3.3.JavaScript中的浏览器交互和用户输入相关:

3.3.1alert(str):

3.3.2confirm(str):

3.3.3prompt(message, placeholder):

3.3.4close():

3.3.5blur():

3.3.6scrollBy(x, y):

3.3.7scrollTo(x, y):

3.4location位置:

3.4.1host：

3.4.2hostname：

3.4.3port：

3.4.4pathname：

3.4.5protocol：

3.4.6search：

3.4.7href：

3.4.8window.location 还有一些方法，允许您进行页面导航，

3.4.8.1assign(URL)：

3.4.8.2replace(URL)：

3.4.8.3reload(forceReload)：

 结语:

---

前言:

今天我们开始学习了BOM,在这之前我们已经学习了关于JavaScript的DOM的内容了什么事BOM呢?

BOM即Browser Object Model（浏览器对象模型），提供了独立于任何特定文档的对象，用于浏览器窗口和脚本之间进行交互。通过BOM，开发者可以操作浏览器窗口及与窗口交互的元素，比如浏览器窗口的大小、导航、定位、历史记录等。

1. BOM组成：

主要由以下几部分:
 

1.1Window 对象：

代表整个浏览器窗口，是BOM的主要对象，所有全局JavaScript对象、函数和变量自动成为window对象的成员。Window对象包含了许多属性和方法，可以用于控制浏览器窗口和窗口中的内容:

• 代表浏览器窗口，是BOM的核心对象。
• 包含了浏览器窗口的尺寸、位置等信息，以及操作浏览器窗口的方法。
• 可以绑定事件，因为它继承了EventTarget的原型。
• window.name 属性可以在页面跳转时保持不变，可用于跨页面通信。

1.1Location 对象：

包含有关当前URL的信息，并提供了一些方法来进行URL的操作，如跳转、刷新等。

• 描述当前文档在网络中的位置信息。
• 提供了主机名、端口、路径、协议等属性，方便开发者了解当前页面的URL结构。
• 通过修改location.href可以导航到新的页面。

1.2Navigator 对象：

包含了有关浏览器的信息，比如浏览器的名称、版本、操作系统等。

• 包含了关于浏览器的信息，如浏览器名称、版本、操作系统等。
• userAgent 属性常用于服务器端的用户代理检测，以确定客户端的浏览器类型和版本。

1.2.1 navigator 对象包含了关于浏览器的信息包括：

• appVersion: 返回由浏览器声明的版本信息。这个字符串通常包含了浏览器的名称、版本号和渲染引擎等信息。
• appCodeName: 通常返回浏览器的代码名称，对于大多数现代浏览器，这个值通常是 "Mozilla"，尽管这个值的历史意义已经淡化，现在主要用于兼容性检测。
• userAgent: 返回一个字符串，表示用户代理头的值。这个字符串通常包含了浏览器的名称、版本、渲染引擎、操作系统以及是否包含某些特定的浏览器功能等信息。这个属性常被用于服务器端的用户代理检测，以确定如何为不同的浏览器或设备提供不同的内容或格式。

1.3History 对象：

让你可以与浏览器的历史记录进行交互，比如前进、后退等。

• 提供了与浏览器历史记录相关的功能。
• 可以使用back(), forward(), 和 go() 方法进行页面跳转。
• history.length 属性表示历史记录中的页面数量。

1.4常用的history的方法和属性:

• length: 表示浏览器历史列表中的 URL 数量。这个数量包含了当前加载的页面。
• back(): 相当于点击浏览器的“后退”按钮，导航到历史列表中的上一个页面。
• forward(): 相当于点击浏览器的“前进”按钮，导航到历史列表中的下一个页面。请注意，如果没有下一个页面，这个方法将不会有任何效果。
• go(n): 导航到历史列表中的一个指定页面。参数 n 是一个整数，表示相对于当前页面的位置。例如，history.go(-1) 与 history.back() 效果相同，而 history.go(1) 与 history.forward() 效果相同。

1.4Document 对象：

虽然Document对象属于DOM而非BOM，但是通过window.document可以访问到它，它是DOM树的根节点，代表了加载在窗口中的网页内容。

1.5Screen 对象：

提供了客户端屏幕的信息，如屏幕的宽度和高度等。

1.6console 对象：

• 提供了浏览器控制台的输出和控制功能。
• 常用于调试和开发过程中的信息输出。
• 包含了多种方法，如log(), warn(), error(), time(), timeEnd() 等，用于不同类型的输出和性能测量。

1.6.1常用的console的用法:
 

1.6.1.1console.log():

在控制台输出信息。这是开发者最常用的方法之一，用于打印变量、对象或其他任何数据类型的值。

1.6.1.2console.assert(condition, message):

如果condition为false，则在控制台输出指定的message。这通常用于在开发过程中进行断言检查。

1.6.1​​​​​​​.3console.clear():

清除控制台的内容。这有助于在调试过程中清理屏幕，以便更清晰地查看后续的输出。

1.6.1​​​​​​​.4console.count(label):

对以label标记的特定代码段的调用次数进行计数。每次调用此方法时，计数会增加，并显示在控制台上。

1.6.1​​​​​​​.5console.countReset(label):

重置通过console.count()方法使用相同label的计数器。这将计数器的值设置回0。

1.6.1​​​​​​​.6console.warn(message):

在控制台输出警告信息。这通常用于指示某些可能的问题或异常情况，但不会中断程序的执行。

1.6.1​​​​​​​.7console.error(message):

在控制台输出错误信息。虽然这不会停止脚本的执行，但它通常用于指示发生了严重的错误或异常情况。

1.6.1​​​​​​​.8console.dir(object):

以类似于文件系统目录列表的方式显示对象的所有属性和方法。这对于查看复杂对象的结构和内容非常有用。

1.6.1​​​​​​​.9console.group(title) 和 console.groupEnd():

这两个方法用于将控制台输出分组。console.group()开始一个新组，并可以为其提供一个可选的title。在该组内的所有后续控制台输出都将被缩进，直到调用console.groupEnd()结束该组。

1.6.1​​​​​​​.10.console.time(label) 和 console.timeEnd(label):

这两个方法用于测量代码段的执行时间。console.time()开始计时，并接受一个label作为参数。console.timeEnd()停止计时，并在控制台显示经过的时间。这两个方法通常一起使用，以评估特定代码块的性能。

例子:

// Window 对象示例：弹出警告框  
window.alert("Hello, BOM!");  
  
// Location 对象示例：跳转到新页面  
window.location.href = "https://www.example.com";  
  
// Navigator 对象示例：检测用户的浏览器类型  
var browserName = navigator.appName;  
console.log(browserName);  
  
// History 对象示例：后退到上一个页面  
window.history.back();  
  
// Screen 对象示例：获取屏幕宽度和高度  
var screenWidth = window.screen.width;  
var screenHeight = window.screen.height;  
console.log("Screen Width: " + screenWidth + ", Screen Height: " + screenHeight);

2.定时器详解:

定时器在JavaScript中是一个非常重要的功能，它允许你在指定的时间后执行某个函数或代码块，或者周期性地执行某个函数。JavaScript提供了两个主要的定时器函数：setTimeout 和 setInterval。

2.1setTimeout:

setTimeout 函数用于在指定的毫秒数后执行一个函数。它返回一个定时器ID，这个ID可以用于在之后清除定时器。

// 设置一个定时器，在2000毫秒（2秒）后执行  
var timeoutId = setTimeout(function() {  
    console.log('这个消息将在2秒后打印出来');  
}, 2000);  
  
// 如果需要取消这个定时器，可以使用clearTimeout函数  
// clearTimeout(timeoutId);

2.2setInterval:

setInterval 函数用于周期性地执行一个函数，间隔时间是指定的毫秒数。它也返回一个定时器ID。

// 设置一个周期性定时器，每隔2000毫秒（2秒）执行一次  
var intervalId = setInterval(function() {  
    console.log('这个消息将每隔2秒打印一次');  
}, 2000);  
  
// 如果需要停止这个周期性定时器，可以使用clearInterval函数  
// clearInterval(intervalId);

2.3清除定时器:

当你不再需要定时器继续执行时，可以使用 clearTimeout 或 clearInterval 函数来清除它，这样可以防止内存泄漏和不必要的计算。

// 假设你已经有了一个定时器ID：timeoutId 或 intervalId  
clearTimeout(timeoutId); // 清除setTimeout设置的定时器  
clearInterval(intervalId); // 清除setInterval设置的定时器

2.4注意事项:

• 定时器ID是唯一的，并且可以被用于清除特定的定时器。
• 如果设置的定时器回调函数执行时间较长，可能会影响定时器的准确性。
• JavaScript的定时器并不是精确的，它们受到页面的渲染、其他代码的运行和许多其他因素的影响。因此，定时器应该用于非精确的时间操作。
• 在使用定时器时要小心，避免创建大量的定时器，这可能会导致性能问题。

2.5BOM的其他常用功能

除了定时器功能外，BOM还提供了许多其他与浏览器交互的功能，例如：

2.5.1window.location：

用于获取或设置当前窗口的URL地址，并可以实现页面的刷新和跳转。window.location 对象用于获取或设置当前窗口的URL，并可以解析URL的不同部分，如协议、主机名、路径等。此外，它还提供了一些方法用于页面的跳转和刷新。

// 获取当前页面的完整URL  
var currentURL = window.location.href;  
  
// 设置新的URL，导致浏览器跳转到该地址  
window.location.href = 'https://www.example.com';  
  
// 重新加载当前页面  
window.location.reload();

2.5.2window.history：

提供了与浏览器历史记录相关的功能，如前进、后退等。window.history 对象提供了与浏览器历史记录交互的功能。可以使用它来实现页面的前进、后退，以及添加新的历史记录点。

// 后退到前一个页面  
window.history.back();  
  
// 前进到下一个页面  
window.history.forward();  
  
// 跳转到历史记录中的某个点（如果可用）  
window.history.go(-2); // 后退两步

2.5.3window.navigator：

包含了关于浏览器的信息。window.navigator 对象包含了关于浏览器的信息，比如浏览器的名称、版本、操作系统、是否启用了Cookie等。

// 获取浏览器名称  
var browserName = navigator.appName;  
  
// 获取浏览器版本  
var browserVersion = navigator.appVersion;  
  
// 检查用户代理字符串  
var userAgent = navigator.userAgent;  
  
// 检查是否启用了Cookie  
var cookiesEnabled = navigator.cookieEnabled;

2.5.4window.document：

提供了对DOM的访问。window.document 主要是DOM的一部分，但它是通过BOM的window对象来访问的。document对象代表了加载在浏览器窗口中的网页内容，并提供了许多方法和属性来操作和查询DOM。

// 获取文档的标题  
var title = document.title;  
  
// 修改文档的标题  
document.title = 'New Page Title';  
  
// 查询DOM元素  
var element = document.getElementById('myElement');

2.5.5window.screen：

提供了关于客户端屏幕的信息。window.screen 对象提供了关于客户端屏幕的信息，如屏幕的宽度、高度、可用宽度和高度等。

// 获取屏幕的宽度和高度  
var screenWidth = screen.width;  
var screenHeight = screen.height;  
  
// 获取屏幕的可用宽度和高度（减去任务栏、Dock栏等占用的空间）  
var availWidth = screen.availWidth;  
var availHeight = screen.availHeight;

3.浏览器窗口及与窗口交互的元素:

3.1浏览器的尺寸数据和方法:

3.1.1.innerWidth 和 innerHeight：

• 这两个属性分别表示浏览器视口（viewport）的宽度和高度，包括滚动条，但不包括浏览器的工具栏、标签页等界面元素。
• 这些尺寸是用来描述网页内容区域的可用空间。

3.1.2.screenLeft 和 screenTop（或 screenX 和 screenY）：

• 这两个属性（screenLeft/screenX 和 screenTop/screenY）提供浏览器窗口左上角在屏幕上的位置。
• 不同的浏览器可能会实现不同的属性名称，但功能上是等价的。

3.1.3.outerHeight 和 outerWidth：

• 这两个属性表示浏览器窗口的整体尺寸，包括所有界面元素，如书签栏、地址栏、状态栏等。
• 这些尺寸描述了浏览器窗口在屏幕上占据的总空间。

3.1.4.scrollX 和 scrollY（或 pageXOffset 和 pageYOffset）：

• 这两个属性表示当前页面在水平方向和垂直方向上的滚动量。
• 当用户滚动页面时，这些值会发生变化，反映了页面的滚动位置。

3.2名词解释:

3.2.1screen：

• “屏幕”通常指的是计算机显示器或移动设备的整个显示区域。
• 在Web开发中，screen 对象提供了访问客户端屏幕信息的接口，比如屏幕的宽度和高度（screen.width 和 screen.height），这些信息与浏览器窗口的大小或位置无关。

3.2.2client：

• “当前选中区域元素”在这个上下文中可能有些模糊，但“client”通常指的是浏览器窗口的视口（viewport），即不包括工具栏、滚动条等浏览器界面元素的显示区域。
• 在JavaScript中，clientWidth 和 clientHeight 属性通常用于获取一个元素（包括浏览器窗口本身，通过document.documentElement或window对象）的内部宽度和高度，不包括边框、滚动条等。

3.2.3offset：

• “偏移”指的是一个元素相对于其定位父元素（或相对于整个文档，如果没有定位的父元素）的位置。
• 在JavaScript中，可以通过元素的offsetLeft和offsetTop属性来获取这个偏移量。

3.2.4scroll：

• “卷轴、卷动”在这里指的是与页面滚动相关的属性和方法。
• 当页面内容超出视口大小时，浏览器会显示滚动条以允许用户滚动查看隐藏的内容。
• JavaScript中的scrollTop和scrollLeft属性表示当前滚动的位置，而scrollWidth和scrollHeight则表示整个内容的宽度和高度（包括不可见的部分）。

3.2.5inner：

• “内部”指的是一个元素的内部尺寸，不包括边框、外边距和内边距（但可能包括滚动条，这取决于具体的属性和浏览器）。
• 例如，在JavaScript中，innerWidth和innerHeight（如果是获取浏览器窗口的尺寸）通常包括滚动条的宽度或高度。而对于HTML元素，clientWidth和clientHeight则不包括滚动条，它们表示元素内容区域的宽度和高度（包括内边距，但不包括边框、外边距和滚动条）。

3.3.JavaScript中的浏览器交互和用户输入相关:

3.3.1alert(str):

• 这个方法用于在浏览器中显示一个警告对话框，其中str是要显示的消息字符串。
• 用户点击确定按钮后，对话框会关闭，且没有返回值。

3.3.2confirm(str):

• 这个方法用于在浏览器中显示一个确认对话框，其中str是要显示的消息字符串。
• 用户点击确定按钮，方法返回true；点击取消按钮，方法返回false。
• 这个方法常用于在执行某项操作前征求用户的确认。

3.3.3prompt(message, placeholder):

• 这个方法用于在浏览器中显示一个提示对话框，要求用户输入信息。
• message是显示在对话框中的提示消息，而placeholder是对话框中文本输入框的默认文本（不是所有浏览器都支持placeholder参数）。
• 用户输入的信息将作为这个方法的返回值。如果用户点击了取消或没有输入任何内容就关闭了对话框，则返回null。

3.3.4close():

• 这个方法通常用于关闭一个由脚本打开的窗口。如果是在主浏览器窗口上调用，可能不会有任何效果，因为这通常取决于浏览器的安全设置。
• 注意：现代浏览器可能会限制或阻止脚本关闭非由脚本打开的窗口。

3.3.5blur():

• 这个方法用于移除元素或窗口的焦点。对于窗口来说，调用blur()会使窗口失去焦点。
• 在HTML元素上使用blur()方法会使该元素失去焦点。

3.3.6scrollBy(x, y):

• 这个方法用于滚动窗口或元素的内容。x和y参数分别表示在水平和垂直方向上滚动的像素量。
• 正值表示向下或向右滚动，负值表示向上或向左滚动。

3.3.7scrollTo(x, y):

• 这个方法也用于滚动窗口或元素的内容，但与scrollBy不同的是，它滚动到指定的位置，而不是滚动指定的量。
• x和y参数表示滚动到的水平和垂直坐标。

3.4location位置:

3.4.1host：

包含主机名和端口号（如果存在）。例如，example.com:8080，其中example.com是主机名，8080是端口号。如果端口是默认的（例如，HTTP 的 80 或 HTTPS 的 443），则通常不显示端口号。

3.4.2hostname：

仅包含主机名，不包括端口号。继续上面的例子，这将是example.com。

3.4.3port：

URL 中指定的端口号。如果未指定端口，或者使用的是默认端口（HTTP 的 80，HTTPS 的 443），则此属性返回空字符串。

3.4.4pathname：

URL 的路径部分，从根目录/开始，到查询字符串（如果有）开始之前结束。例如，/pages/index.html。

3.4.5protocol：

页面使用的协议，通常是http:或https:。注意，字符串末尾包含冒号。

3.4.6search：

URL 的查询字符串部分，从问号?开始。例如，?key=value。这部分通常用于 GET 请求，传递参数给服务器。

3.4.7href：

完整的 URL。这是上述所有部分的组合，形成了完整的网址。

3.4.8window.location 还有一些方法，允许您进行页面导航，

例如：

3.4.8.1assign(URL)：

加载新的页面，并将当前页面添加到历史记录中。这与直接设置 location.href 的效果相同。

3.4.8.2replace(URL)：

用新的页面替换当前页面，不会在历史记录中添加新条目。这意味着用户不能用“后退”按钮返回到原始页面。

3.4.8.3reload(forceReload)：

重新加载当前页面。如果 forceReload 设置为 true，则无论当前文档是否在缓存中，都会强制重新加载页面。如果设置为 false 或者不设置，浏览器可能会从缓存中加载页面。

 结语:

今天我们学习了关于BOM的内容,BOM对象和功能使得JavaScript能够与浏览器进行丰富的交互，从而实现各种网页效果和功能。以上的内容都是我自己个人的学习成果,或许还有一点遗漏,欢迎大家的指正和在评论区和谐讨论。