JavaScript BOM詳解

阿新 • • 發佈：2021-12-29

1.BOM簡介

1.Script由三部分組成

ECMAScript核心語法 ES
DOM文件對www.cppcns.com象模型，核心物件是document,用來操作頁面文件
BOM瀏覽器物件模型，核心物件是window,用來操作瀏覽器

在這裡插入圖片描述

2.window物件

名稱	含義
history	有關客戶訪問過的URL資訊
location	有關當前URL資訊，子級DOM物件
document	表示瀏覽器視窗的HTML文件，字級DOM物件

常用方法：

方法名	含義
alert(text)	顯示一個帶有提示資訊和確定按鈕的警告框
prompt(text)	顯示一個帶有提示資訊，文字輸入框，確定和取消按鈕的輸入框
confirm(text)	顯示一個帶有提示資訊，確定和取消按鈕的確認框，確認返回true,取消返回false
open(url,name,options)	開啟具有指定名稱的新視窗，並載入給定url所指定的文件
setTimeout(fn,delay)	設定一次性定時器，在指定毫秒值後執行某個函式
setlnterval(fn,delay)	設定週期性定時器,週期性迴圈執行某個函式
cleatTimeout(timer)	清除一次性定時器
cleatlnterval(timer)	清除一次性定時器
scrollTo(xpos,ypos)	把內容滾動到指定座標，即設定滾動條的偏移位置
scrollBy(xnum,ynum)	把內容滾動指定的畫素數，即設定滾動條的偏移量

open 開啟指定視窗

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

setTimeout(fn,delay)

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

cleatTimeout(timer)

關閉一次性計時器，在未執行的時間範圍內

```javascript
<script>
        function f1() {
            //這裡不是css樣式，這個開啟視窗大小是可以調整的
            open('test.html',height=500px')
        }
        var timer
        function f2() {
            timer = setTimeout(f1,2000)
        }
        function f3(){
		clearTimerout(timer)
}
    </script>
</head>
<body>
    <button onclick="f2()">一次性計時器</button>
    <button onclick="f3()">關閉一次性計時器</button>
</body>

scrollTo(xpos,ypos)

動到指定位置

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

常用事件

客棧

時間名	含義
onclick	滑鼠點選
onload	頁面載入完成
onscroll	視窗程式設計客棧滾動條滑動

注：由於window物件是BOM結構的頂層物件，所以在呼叫window屬性和方法可以省略window

<script>
//點選視窗後執行
        window.onclick = function() {
            console.log(111)
        }
    </script>

3.location物件

常用屬性

href 設定或返貨位址列中的url

常用方法reload() 重新載入當前頁

    <script>
        function getUrl() {
            //獲取位址列中的url
            console.log(location.href)
                //設定位址列中的url，實現頁面的跳轉
                //location = 'https://www.baidu.com'
            location.href = 'https://www.baidu.com'
            //重新載入頁面
            location.reload();
        }
    </script>
</head>
<body>
    <button onclick="getUrl()">獲取url</button>
</body>

4.history物件

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

  <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>