JavaScript BOM對象模型

BOM即浏覽器對象模型(Browser Object Model)

浏覽器對象包括

Window(視窗)

Navigator(浏覽器)

Screen (用戶端螢幕)

History(通路曆史)

Location(浏覽器位址)

1.Window對象

（1）擷取文檔顯示區域的高度和寬度。

一旦頁面加載，就會自動建立window對象，是以無需手動建立window對象。

通過window對象可以擷取文檔顯示區域的高度和寬度。

通過調用innerWidth和innerHeight擷取。（注意，不能加括号！！不是一個方法）。

<script>
    document.write("該文檔的寬度為：" + window.innerWidth);
    document.write("<br>");
    document.write("該文檔的寬度為：" + window.innerHeight);
</script>

變換視窗大小，重新整理頁面會擷取到相應的參數。

（2）擷取外部窗體的高度和寬度。這個是針對浏覽器視窗的。

通過outerWidth和outerHeight調用。（不包含工具欄和滾動條）。

<script>
    document.write("浏覽器的寬度:"+window.outerWidth);
    document.write("<br>");
    document.write("浏覽器的高度:"+window.outerHeight);
  </script>

同樣，變換浏覽器大小也改變相應的參數。

（3）打開新的視窗。

通過window的open方法實作。

一般不建議使用，如果需要打開一個新的網站，應該通過超級連結等方式讓使用者主動打開，在沒有告知使用者的前提下就打開一個新的網站會影響使用者的體驗。

<script>
    //定義一個打開新視窗的位址
    function openNewWindow(){
      alert("即将打開百度")
      //window.open()填寫跳動的位址。
      myWindow=window.open("https://www.baidu.com");
    }
    </script>
    
<button onclick="openNewWindow()">打開一個新的視窗</button>

上面通過按鈕同時提示進入百度頁面。

2.Navigator對象。

Navigator即浏覽器對象，提供浏覽器相關的資訊。

有時候需要通過 Navigator後去使用者使用的是什麼浏覽器型号，然後做出不同的跳轉。

<head>
   <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<script type="text/javascript">
    //浏覽器名稱
    document.write("<p>浏覽器産品名稱：");
    document.write(navigator.appName + "</p>");
    //浏覽器版本号
    document.write("<p>浏覽器的版本号：");
    document.write(navigator.appVersion + "</p>");
    //浏覽器内部代碼
    document.write("<p>浏覽器内部的代碼：");
    document.write(navigator.appCodeName + "</p>");
    //作業系統
    document.write("<p>作業系統：");
    document.write(navigator.platform + "</p>");
    //是否啟用cookies
    document.write("<P>是否啟用cookies：");
    document.write(navigator.cookieEnabled + "</p>");
    //浏覽器的使用者代理報頭
    document.write("<P>浏覽器的使用者代理報頭：");
    document.write(navigator.userAgent + "</p>");
</script>

3.Screen對象

傳回使用者的螢幕大小以及可用區域的大小。一般可用區域大小會小于螢幕大小，因為有菜單欄的存在。

<head>
   <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<script type="text/javascript">
    //螢幕分辨率
    document.write("使用者的螢幕分辨率：");
    document.write(screen.width +"*"+ screen.height + "<br>");
    //可用區域大小
    document.write("可用區域大小：");
    document.write(screen.availWidth + "*" + screen.availHeight);
</script>

4.History對象

（1）傳回上一個頁面。

<head>
    <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<script>
    function goBack(){
        history.back();
    }
</script>

<button onclick="goback()">傳回</button>

（2）傳回上上個頁面。

<head>
    <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<script>
    function goBack()
      {
         history.go(-2); //-1表示上次，-2表示上上次，以次類推
      }
</script>
     
<button onclick="goBack()">傳回上上次</button>

可以以此類推。

同時，History使用有前提，無論你使用的是a标簽還是button， target不可以是_blank，其餘屬性(_self、_parent、_top、framename)都可以。

5.location對象。

（1）reload()方法重新整理目前頁面。

<head>
    <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<span>目前時間：</span>
<script>
    var d = new Date();
    document.write(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());

    function refresh(){
        location.reload();
    }
</script>
<button onclick="refresh()">擷取目前時間</button>

（2）打開另一個頁面。（可以和window的open方法比較一下）

<head>
    <meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<script>
    function jump(){
      //方法1
      //location="https://www.baidu.com";
      //方法2
      location.assign("https://www.baidu.com");
    }
    </script>
     
    <br>
<button onclick="jump()">跳轉到百度</button>
<button></button>

location.href()

和

location.assign()

都可以跳轉到新的頁面。但assign 會添加記錄到浏覽曆史，點選後退可以傳回之前頁面。

跟

window.open()

的差別在于，

window.open()

會打開一個新的頁面，而

location.assign()

在原視窗直接打開一個新的連結。

（3）Location的其他屬性

<script>
    function p(s){
      document.write(s);
      document.write("<br>");
    }
     
    p("協定 location.protocol:"+location.protocol);
    p("主機名 location.hostname:"+location.hostname);
    p("端口号 (預設是80，沒有即表示80端口)location.port:"+location.port);
     
    p("主機加端口号 location.host: "+location.host);
    p("通路的路徑  location.pathname: "+location.pathname);
     
    p("錨點 location.hash: "+location.hash);
    p("參數清單 location.search: "+location.search);
     
</script>

輸出結果如下：

協定 location.protocol:file:

主機名 location.hostname:

端口号 (預設是80，沒有即表示80端口)location.port:

主機加端口号 location.host:

通路的路徑 location.pathname: /H:/Html%20project/_test.html

錨點 location.hash:

參數清單 location.search:

6.彈出框。

浏覽器上常見的彈出框有警告框，确認框，提示框這些都是通過調用window的方法實作的。比如警告框用的是window.alert(“警告内容”)，因為很常用，是以就把window省略掉，直接使用alert()。

（1）alert()

<script>
    function assignment(){
        alert("注冊成功！")
    }
</script>

<button onclick="assignment()">注冊</button>

（2）prompt()

輸入框 prompt，用于彈出一個輸入框，供使用者輸入相關資訊。因為彈出的界面并不好看，很有可能和網站的風格不一緻，是以很少會在實際工作中用到。

<script>
    function name(){
        var name = prompt("請輸入您的名字：");
        alert("您輸入的名字是：" + name);
    }
</script>

<button onclick="name()">輸入您的名字</button>

（3）确認框

确認框 confirm，常用于危險性操作的确認提示。比如删除一條記錄的時候，彈出确認框。

<script>
    function del(){
    var d = confirm("是否要删除");
    alert(typeof d + " " + d);
    }
    </script>
     
<br>
<button onclick="del()">删除</button>

confirm傳回基本類型的Boolean true或者false。

7.計時器

（1）隻執行一次

SetTimeout(function name,seconds);

函數

setTimeout(functionname, 距離開始時間毫秒數 );

通過setTimeout在制定的毫秒數時間後，執行一次函數functionname

本例在3秒鐘後，列印目前時間。

<!-- 點選按鈕在三秒後執行函數 -->
<script>
    function printTime(){
        var d = new Date();
        var hour = d.getHours();
        var minute = d.getMinutes();
        var second = d.getSeconds();
        //innerHtml不是一個方法，不能加括号。
        //innerHtml修改元素的内容。
        document.getElementById("time").innerHTML=hour+":"+minute+":"+second;
    }
    
    function getTime(){
        setTimeout(printTime,3000);    
    }
</script>

<div id="time"></div>
<button onclick="getTime()">點選此按鈕之後三秒鐘重新整理時間</button>

（2）重複執行一個函數 setInterval(functionname,times);

<script>
    function printTime(){
        var d = new Date();
        var hour = d.getHours();
        var minute = d.getMinutes();
        var second = d.getSeconds();
        document.getElementById("time").innerHTML = hour+":"+minute+":"+second;
    }
    //單獨定義一個函數
    var time = setInterval(printTime,1000);
</script>
<div>每隔一秒重新整理時間</div>
<div id="time"></div>

（3）終止重複clearInterval(varname);

<script>
    function printTime(){
        var d = new Date();
        var hour = d.getHours();
        var minute = d.getMinutes();
        var second = d.getSeconds();
        document.getElementById("time").innerHTML = hour+":"+minute+":"+second;
        // 用clearInterval()進行重複結束
        if(second%7==0){
            clearInterval(time);//傳入參數time表示結束該函數的執行
        }
    }
    //單獨定義一個變量執行一個函數
    var time = setInterval(printTime,1000);
</script>
<div>每隔一秒重新整理時間</div>
<div id="time"></div>

（4）重複列印結果。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p id="timeid"></p>
        <script>
            var mytime = setInterval(function(){
                getTime();
            },1000);
            function getTime(){
                var d = new Date();
                var t = d.toLocaleTimeString();
                document.getElementById("timeid").innerHTML = t;
            }
        </script>
    </body>
</html>

用

document.close()

執行之後就不會重複列印了。

<p>每隔1秒鐘，通過document.write列印目前時間</p>
 
<script>
 
function printTime(){
  var d = new Date();
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  document.close();
}
 
var t = setInterval(printTime,1000);
 
</script>

備注：一般不要在setInterval調用的函數中使用

document.write();

假設setInterval調用的函數是printTime, 在printTime中調用

document.write();

隻能看到一次列印時間的效果。

這是因為

document.write()

，會建立一個新的文檔，而新的文檔裡，隻有列印出來的時間字元串，并沒有setInterval這些javascript調用，是以隻會看到執行一次的效果。

JavaScript BOM對象模型

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條