JavaScript?BOM詳解

更新時間：2022年01月07日 15:20:52 作者：季布，

這篇文章主要為大家介紹了JavaScript?BOM，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1.BOM簡介

1.JavaScript由三部分組成

ECMAScript核心語法 ES
DOM文檔對象模型，核心對象是document,用來操作頁面文檔
BOM瀏覽器對象模型，核心對象是window,用來操作瀏覽器

在這里插入圖片描述

2.window對象

名稱	含義
history	有關(guān)客戶訪問過的URL信息
location	有關(guān)當(dāng)前URL信息，子級DOM對象
document	表示瀏覽器窗口的HTML文檔，字級DOM對象

常用方法：

方法名	含義
alert(text)	顯示一個帶有提示信息和確定按鈕的警告框
prompt(text)	顯示一個帶有提示信息，文本輸入框，確定和取消按鈕的輸入框
confirm(text)	顯示一個帶有提示信息，確定和取消按鈕的確認(rèn)框，確認(rèn)返回true,取消返回false
open(url,name,options)	打開具有指定名稱的新窗口，并加載給定url所指定的文檔
setTimeout(fn,delay)	設(shè)置一次性定時器，在指定毫秒值后執(zhí)行某個函數(shù)
setlnterval(fn,delay)	設(shè)置周期性定時器,周期性循環(huán)執(zhí)行某個函數(shù)
cleatTimeout(timer)	清除一次性定時器
cleatlnterval(timer)	清除一次性定時器
scrollTo(xpos,ypos)	把內(nèi)容滾動到指定坐標(biāo)，即設(shè)置滾動條的偏移位置
scrollBy(xnum,ynum)	把內(nèi)容滾動指定的像素數(shù)，即設(shè)置滾動條的偏移量

open 打開指定窗口

<script>
        function f1() {
            //這里不是css樣式，這個打開窗口大小是可以調(diào)整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
    </script>
</head>
<body>
    <button onclick="f1()">打開一個新窗口</button>
</body>

setTimeout(fn,delay)

  <script>
        function f1() {
            //這里不是css樣式，這個打開窗口大小是可以調(diào)整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
        function f2() {
            setTimeout(f1, 2000)
        }
    </script>
</head>
<body>
    <button onclick="f2()">一次性計時器</button>
</body>

cleatTimeout(timer)

關(guān)閉一次性計時器，在未執(zhí)行的時間范圍內(nèi)

```javascript
<script>
        function f1() {
            //這里不是css樣式，這個打開窗口大小是可以調(diào)整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
    </script>
</head>
<body>
    <button onclick="f1()">打開一個新窗口</button>
</body>

setTimeout(fn,delay)

  <script>
        function f1() {
            //這里不是css樣式，這個打開窗口大小是可以調(diào)整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
        var timer
        function f2() {
            timer = setTimeout(f1, 2000)
        }
        function f3(){
		clearTimerout(timer)
}
    </script>
</head>
<body>
    <button onclick="f2()">一次性計時器</button>
    <button onclick="f3()">關(guān)閉一次性計時器</button>
</body>

scrollTo(xpos,ypos)

動到指定位置

<script>
        function f1() {
            scrollTo(0, 100) //單位為px
        }
    </script>

常用事件

時間名	含義
onclick	鼠標(biāo)點(diǎn)擊
onload	頁面加載完成
onscroll	窗口滾動條滑動

注：由于window對象是BOM結(jié)構(gòu)的頂層對象，所以在調(diào)用window屬性和方法可以省略window

<script>
//點(diǎn)擊窗口后執(zhí)行
        window.onclick = function() {
            console.log(111)
        }
    </script>

3.location對象

常用屬性

href 設(shè)置或返貨地址欄中的url

常用方法reload() 重新加載當(dāng)前頁

    <script>
        function getUrl() {
            //獲取地址欄中的url
            console.log(location.href)
                //設(shè)置地址欄中的url，實(shí)現(xiàn)頁面的跳轉(zhuǎn)
                //location = 'https://www.baidu.com'
            location.
            //重新加載頁面
            location.reload();
        }
    </script>
</head>
<body>
    <button onclick="getUrl()">獲取url</button>
</body>

4.history對象

方法名	含義
back()	后退，加載history列表中的上一個url
forword()	前進(jìn),加載history列表中的下一個url
go(number)	瀏覽器移動指定的頁面數(shù)

  <script>
        function goBack() {
            history.back()
        }
        function goforward() {
            history.forward()
        }
        function goGo() {
            history.go(1) //前進(jìn)一個
        }
    </script>
</head>
<body>
    <button onclick="goBack()">后退</button>
    <button onclick="goforward()">前進(jìn)</button>
</body>