JS 浏览器BOM学习笔记

什么是BOM？

BOM（Browser Object Model）即浏览器对象模型。它是JavaScript操作浏览器窗口的一个API，提供了一组对象来处理浏览器窗口和文档的相关行为。BOM包括了window、document、location、navigator、screen等对象。

window对象

window对象代表着浏览器中打开的一个窗口或者是一个框架。这个对象可以通过JS中的window关键字直接访问。window对象有很多属性和方法，下面列举几个常用的：

setInterval() 和 clearInterval()

setInterval() 方法会按照指定的周期（以毫秒计）来调用函数或执行代码片段，直到 clearInterval() 被调用或窗口被关闭。

javascriptCopy Code
let myVar = setInterval(myTimer ,1000);

function myTimer() {
  let d = new Date();
  let t = d.toLocaleTimeString();
  console.log(t);
}

function stopTimer() {
  clearInterval(myVar);
}

setTimeout() 和 clearTimeout()

setTimeout() 方法会在指定的毫秒数后调用函数或执行代码片段，只会执行一次。如果要重复执行函数，需要使用 setInterval() 方法。clearTimeout() 方法用于停止 setTimeout() 方法设置的时间间隔。

javascriptCopy Code
function myFunction() {
  setTimeout(function(){ alert("Hello"); }, 3000);
}

function stopFunction() {
  clearTimeout(myVar);
}

open() 和 close()

open() 方法打开一个新的浏览器窗口或查找一个已命名的窗口。close() 方法用于关闭窗口。

javascriptCopy Code
function openWindow() {
  window.open("https://www.baidu.com", "_blank", "width=500,height=500");
}

function closeWindow() {
  myWindow.close();
}

location对象

location对象包含了当前文档的URL等信息，可以通过window.location来访问。下面列举几个常用属性和方法：

href

href 属性返回当前页面的 URL。

javascriptCopy Code
let currentUrl = location.href;
console.log("当前页面的 URL 是: " + currentUrl);

assign()

assign() 方法用于把当前窗口加载一个新的文档。

javascriptCopy Code
location.assign("https://www.baidu.com");

navigator对象

navigator对象包含了浏览器相关的信息，如浏览器名称、版本等信息，可以通过window.navigator来访问。下面列举一些常用的属性和方法：

appName

appName 属性返回浏览器应用程序的名称。

javascriptCopy Code
let browserName = navigator.appName;
console.log("当前浏览器的名称是: " + browserName);

总结

以上就是BOM中常用的几个对象和方法。它们可以帮助我们更好地操作浏览器窗口和文档，实现一些常见的功能。