在 JavaScript 中，BOM（Browser Object Model）指的是浏览器对象模型，它是一种用于表示和操作浏览器窗口、文档、历史记录等对象的模型。BOM 是 JavaScript 在浏览器环境中的核心组成部分，它与 DOM（文档对象模型）一起构成了 Web 开发的基石。

BOM的分类 {#bom%E7%9A%84%E5%88%86%E7%B1%BB}

• window 对象：表示浏览器窗口，包含许多属性和方法，如 alert()、confirm()、prompt() 等。window 对象是 BOM 的核心，它代表了整个浏览器窗口，并且是所有其他 BOM 对象的父对象。

• history 对象：表示浏览器历史记录，包含许多属性和方法，如 back()、forward()、go() 等。history 对象使得 JavaScript 能够访问和操作浏览器的历史记录，从而实现页面导航功能。

• navigator 对象：表示浏览器的信息，包含许多属性和方法，如 appName、appVersion、platform 等。navigator 对象使得 JavaScript 能够获取浏览器的相关信息，从而实现浏览器检测功能。

• screen 对象：表示客户端屏幕的信息，包含许多属性和方法，如 width、height、availWidth 等。screen 对象使得 JavaScript 能够获取客户端屏幕的相关信息，从而实现页面布局功能。

• location 对象：表示当前页面的 URL 信息，包含许多属性和方法，如 href、protocol、host 等。location 对象使得 JavaScript 能够访问和操作当前页面的 URL，从而实现页面跳转功能。

>Navigator {#%3Enavigator}

用来表示浏览器的相关信息

userAgent 返回一个用来描述浏览器信息的字符串 {#useragent-%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E7%94%A8%E6%9D%A5%E6%8F%8F%E8%BF%B0%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BF%A1%E6%81%AF%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2}

<script>

    // console.log(navigator.userAgent)

    let sBrowser;
    const sUsrAg = navigator.userAgent;

    // The order matters here, and this may report false positives for unlisted browsers.

    if (sUsrAg.indexOf("Firefox") &gt; -1) {
        sBrowser = "Mozilla Firefox";
        // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
    } else if (sUsrAg.indexOf("SamsungBrowser") &gt; -1) {
        sBrowser = "Samsung Internet";
        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
    } else if (sUsrAg.indexOf("Opera") &gt; -1 || sUsrAg.indexOf("OPR") &gt; -1) {
        sBrowser = "Opera";
        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
    } else if (sUsrAg.indexOf("Trident") &gt; -1) {
        sBrowser = "Microsoft Internet Explorer";
        // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
    } else if (sUsrAg.indexOf("Edge") &gt; -1) {
        sBrowser = "Microsoft Edge (Legacy)";
        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
    } else if (sUsrAg.indexOf("Edg") &gt; -1) {
        sBrowser = "Microsoft Edge (Chromium)";
        // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64
    } else if (sUsrAg.indexOf("Chrome") &gt; -1) {
        sBrowser = "Google Chrome or Chromium";
        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
    } else if (sUsrAg.indexOf("Safari") &gt; -1) {
        sBrowser = "Apple Safari";
        // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
    } else {
        sBrowser = "unknown";
    }
    alert(`You are using: ${sBrowser}`);



`</script>`

>Location {#%3Elocation}

表示浏览器地址的详细信息

location.assign( ) 跳转到一个新的地址 {#location.assign(-)-%E8%B7%B3%E8%BD%AC%E5%88%B0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%E5%9C%B0%E5%9D%80}

location.replace( ) 跳转新的地址（无法回退） {#location.replace(-)-%E8%B7%B3%E8%BD%AC%E6%96%B0%E7%9A%84%E5%9C%B0%E5%9D%80%EF%BC%88%E6%97%A0%E6%B3%95%E5%9B%9E%E9%80%80%EF%BC%89}

location.reload( ) 刷新页面，可以通过 true 来刷新缓存 {#location.reload(-)-%E5%88%B7%E6%96%B0%E9%A1%B5%E9%9D%A2%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87-true-%E6%9D%A5%E5%88%B7%E6%96%B0%E7%BC%93%E5%AD%98}

location.href( ) 获取当前地址 {#location.href(-)-%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E5%9C%B0%E5%9D%80}

<button id="btn"> 点我一下 </button>

<script>
    const btn = document.getElementById("btn")
    btn.addEventListener("click", () => {

        // console.log(location.href)

        // location = "https://w-flac.org.cn"

        // location.assign("https://w-flac.org.cn")

        // location.replace("https://w-flac.org.cn")

        location.reload(true)
    })



`</script>`

>History {#%3Ehistory}

表示浏览器的历史记录

history.back( ) 回退按钮 {#history.back(-)-%E5%9B%9E%E9%80%80%E6%8C%89%E9%92%AE}

history.forward ( ) 前进按钮 {#history.forward-(-)-%E5%89%8D%E8%BF%9B%E6%8C%89%E9%92%AE}

history.go( ) 向前或向后 {#history.go(-)-%E5%90%91%E5%89%8D%E6%88%96%E5%90%91%E5%90%8E}

<button id="btn"> 点我一下 </button>

<script>
    const btn = document.getElementById("btn")
    btn.onclick = () => {

        // console.log(history.length)

        // history.back()

        // history.forward()

        history.go(-1)

    }



`</script>`

>定时器 {#%3E%E5%AE%9A%E6%97%B6%E5%99%A8}

通过定时器可以使代码在指定时间后执行

setTimeout( ) 代码只执行一次 {#settimeout(-)-%E4%BB%A3%E7%A0%81%E5%8F%AA%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1}

参数：

• 回调函数

• 间隔的时间

关闭定时器：

clearTimeout( )

<script>

const timer = setTimeout(()=\>{
alert("我是定时器中的代码")
}, 3000)


clearTimeout(timer)

`</script>`

setInterval( ) 代码每间隔一段时间执行一次 {#setinterval(-)-%E4%BB%A3%E7%A0%81%E6%AF%8F%E9%97%B4%E9%9A%94%E4%B8%80%E6%AE%B5%E6%97%B6%E9%97%B4%E6%89%A7%E8%A1%8C%E4%B8%80%E6%AC%A1}

参数：

• 回调函数

• 间隔的时间

关闭定时器：

clearInterval( )

<h1 id="num"></h1>

<script>

const numH1 = document.getElementById("num");


let num = 0;


const timer = setInterval(() =\> {
num++;
numH1.textContent = num;


    if (num === 200) {
        clearInterval(timer);
    }




}, 30);

`</script>`