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)	顯示一個帶有提示信息，確定和取消按鈕的確認框，確認返回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)容滾動到指定坐標，即設(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	鼠標點擊
onload	頁面加載完成
onscroll	窗口滾動條滑動

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

<script>
//點擊窗口后執(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，實現(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()	前進,加載history列表中的下一個url
go(number)	瀏覽器移動指定的頁面數(shù)

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