JavaScirpt(JS)——BOM瀏覽器對象模型

時間 2019-11-16

標籤 javascirpt bom 瀏覽器對象模型欄目 Java 简体版

原文原文鏈接

1、BOM概念

　　BOM（Browser Object Model）即瀏覽器對象模型。能夠對瀏覽器窗口進行訪問和操做。使用 BOM，開發者能夠移動窗口、改變狀態欄中的文本以及執行其餘與頁面內容不直接相關的動做。javascript

　　BOM缺少標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C，BOM最初是Netscape瀏覽器標準的一部分。css

　　BOM提供了獨立於內容而與瀏覽器窗口進行交互的對象。因爲BOM主要用於管理窗口與窗口之間的通信，所以其核心對象時window。html

　　BOM由一系列相關的對象(Window\Navigator\Screen\History\Location)構成，而且每一個對象都提供了不少方法與屬性。java

2、BOM內容

　　與瀏覽器窗口交互的一些對象，例如能夠移動、調整瀏覽器大小的window對象，能夠用於導航的location對象與history對象，能夠獲取瀏覽器、操做系統與用戶屏幕信息的navigator與screen對象，可使用document做爲訪問HTML文檔的入口，管理框架的frames對象等。瀏覽器

　　一般瀏覽器特定的JavaScript擴展都被看作BOM的一部分，這些擴展包括：緩存

彈出新的瀏覽器窗口
移動、關鍵瀏覽器窗口以及調整窗口大小
提供Web瀏覽器詳細信息的定位對象
提供用戶屏幕分辨率詳細信息的屏幕對象
對cookie的支持
IE擴展了BOM，加入ActiveXObject類，能夠經過JavaScript實例化ActiveX對象

　　上圖爲BOM結構圖，window對象是BOM的頂層（核心）對象，全部對象都是經過它延伸出來的，也能夠稱爲window的子對象；BOM也是BOM的一部分。服務器

3、window對象

　　window對象是js中的頂級對象；全部定義在全局做用域中的變量、函數都會變成window對象的屬性和方法；window對象下的屬性和方法在調用時，能夠省略window。cookie

一、系統對話框及BOM輸出

（1）alert(message)：顯示帶有一段消息和一個肯定按鈕的警告框框架

　　alert(11)是window.alert(11)的簡寫，它是window的子方法。經常使用於瀏覽器調試dom

（2）prompt('message', defaultValue): 顯示可提示用戶輸入的對話框

// prompt('message',defaultValue)
var pro = prompt('路飛學城',443);
console.log(pro);  // 顯示輸入在對話框的內容

（3）confirm(message)：顯示帶有一段消息以及確認按鈕和取消按鈕的對話框

// confirm() :若是點擊肯定返回true，若是點擊取消，就返回false
var m = confirm("學習BOM");
console.log(m);

（4）print()：打印當前窗口的內容

function printLuffy() {
    // window.print();
    print();   // 直接調用打印機
}

（5）find()：

function findLuffy() {
    var m2 = confirm("學習");
    find(m2);
}

總結：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="printLuffy()">打印</button>
    <button onclick="findLuffy()">查找</button>
</body>
<script type="text/javascript">
    // 1.js的核心 ECMAScript  DOM  BOM
    // BOM:Browser Object Model 瀏覽器對象模型
    // 核心 瀏覽器

    // 輸出  屏幕寬高  滾動寬高  setInterval等方法  window.open() close() location

    // 1.alert()

    // 2.用於瀏覽器的調試
    console.log('路飛學城');

    // 3.prompt('message',defaultValue)
    var pro = prompt('路飛學城',443);
    console.log(pro);  // 顯示輸入在對話框的內容

    // 4.confirm() :若是點擊肯定返回true，若是點擊取消，就返回false
    var m = confirm("學習BOM");
    console.log(m);
    
    function printLuffy() {
        // window.print();
        print();   // 直接調用打印機
    }
    function findLuffy() {
        var m2 = confirm("學習");
        find(m2);
    }
</script>
</html>

BOM輸出示例代碼

　　系統對話框有三種：alert()、prompt()、confirm()。

    alert();    //不一樣瀏覽器中的外觀是不同的
    confirm();  //兼容很差
    prompt();   //不推薦使用

二、打開和關閉窗口

　　open語法：

 window.open(url,target,param)；
/*
參數解釋：
    url：要打開的地址。
    target：新窗口的位置。能夠是：_blank 、_self、 _parent 父框架。
    param：新窗口的一些設置。
    返回值：新窗口的句柄。
*/

　　open和close使用總結：

open('https://www.baidu.com');//打開百度網頁，winodow對象能夠省略
//行間的js中的window不能省略
<button onclick="window.open('https://www.luffycity.com/')">路飛學城</button>

//打開空白頁面
open('about:blank',"_self")

//關閉當前頁面
close();
//行間js中的window仍是不能省略
<button onclick="window.close()">關閉</button>

　　使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM中open和close方法</title>
</head>
<body>
    <!--行間js中的open() window不能省略-->
    <button onclick="window.open('http://www.sina.com.cn/')">新浪網站</button>

    <button>打開百度</button>

    <button>打開空白頁面</button>

    <!--<button onclick="window.close()">關閉</button>-->
    <!--腳本不得關閉非腳本打開的窗口。-->

    <button>關閉</button>
</body>
<script type="text/javascript">

    var oBtn = document.getElementsByTagName('button')[1];  // button標籤第二個
    // 這次windos對象能夠省略
    oBtn.onclick = function () {
        open("https://www.baidu.com");
    }

    var oBtnBlank = document.getElementsByTagName('button')[2];
    oBtnBlank.onclick = function () {
        // 原頁面，打開一個空白頁面
        open('about:blank', "_self");
    }

    var CloseBtn = document.getElementsByTagName('button')[3];
    CloseBtn.onclick = function () {
        if (confirm("是否關閉")) {
            close();
        }
    }
</script>
</html>

open_close使用示例

4、location對象

　　location對象包含有關當前URL的信息。location對象是Window對象的一個部分，能夠經過window.location屬性來訪問。

location對象的屬性：

屬性	描述
hash	設置或返回從井號 (#) 開始的 URL（錨）。
host	設置或返回主機名和當前 URL 的端口號。
hostname	設置或返回當前 URL 的主機名。
href	設置或返回完整的 URL。
pathname	設置或返回當前 URL 的路徑部分。
port	設置或返回當前 URL 的端口號。
protocol	設置或返回當前 URL 的協議。
search	設置或返回從問號 (?) 開始的 URL（查詢部分）。

location對象的方法：

屬性	描述
assign()	加載新的文檔。
reload()	從新加載當前文檔。
replace()	用新的文檔替換當前文檔。

　　location.assign('http://www.baidu.com'); 等同於 window.location = 'http://www.baidu.com' 這種方式會講新地址放到瀏覽器歷史棧中，意味着轉到新頁面後「後退按鈕」仍能夠回到該頁面。

　　location.replace( url )與assign方法同樣，但會從瀏覽器歷史棧中刪除本頁面，也就是說跳轉到新頁面後「後退按鈕」不能回到該頁面。目前IE、Chrome只是簡單的跳轉，只有Firefox會刪除本頁面的歷史記錄。

　　location.reload( force )從新載入當前頁面。force爲true時從服務器端重載；false則從瀏覽器緩存中重載，默認值false。

// 返回瀏覽器的用戶設備信息
console.log(window.navigator.userAgent);

// 獲取用戶本地信息
console.log(window.location);
// 常用的一個方法————href，直接打開網址
window.location.href = 'https://www.luffycity.com';

// 全局刷新 ====> 儘可能少用這種方法  對應局部刷新
setTimeout(function () {
    window.location.reload();
},3000)
// window.location.reload();

5、navigator對象

　　Navigator對象包含有關瀏覽器的信息。（沒有公開的標準，可是全部瀏覽器都支持該對象）

// 返回瀏覽器的用戶設備信息
console.log(window.navigator.userAgent);

6、Screen對象和History對象

　　Screen 對象包含有關客戶端顯示屏幕的信息。

　　History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

　　History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。

7、client系列

一、clientWidth/clientHeight：獲取網頁可視區域寬高

　　調用者不一樣，意義不一樣：

　　（1）盒子調用：用來檢測盒子的寬高+padding;

　　　　clientWidth = width+padding;不包含border和margin,並且不會被內容左右

　　（2）body/htm調用：可視區域大小；

二、clientTop/clientLeft：內容區域到邊框頂（左）部距離

　　clientTop:檢測盒子的上border
　　clientLeft:檢測盒子的左border

三、clientX/clientY：調用者爲event，檢測鼠標距離可視區域的寬高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>client系列</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            position: absolute;
            border: 20px solid red;
            margin: 10px 0px 0px 0px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
    <script type="text/javascript">
        /*style
            top
            left
            right
            bottom
        client
            clientTop   內容區域到邊框頂部距離
            clientLeft    內容區域到邊框左部的距離
            clientWidth     內容區域+左右padding  可視寬度
            clientHeight    內容區域+上下padding  可視高度
         */
        var oBox = document.getElementsByClassName('box')[0];

        console.log(oBox.clientTop);
        console.log(oBox.clientLeft);
        console.log(oBox.clientWidth);
        console.log(oBox.clientHeight);
    </script>
</html>

運用案例：獲取屏幕的可視區域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕可視區域</title>
</head>
<body>

</body>
<script type="text/javascript">
    /*

     */
    // onload事件會在全部dom元素所有加載完成後才調用裏面的方法
    window.onload = function () {
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);

        // 監聽可視區域寬高
        window.onresize = function () {
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
        }

    }
</script>
</html>

8、offset系列

　　offset() 方法返回或設置匹配元素相對於文檔的偏移（位置）

offsetWidth和offsetHeight	offsetHeight的構成	offsetHeight = height + padding + border offsetWidth相同
	offsetHeight和style.height的區別	1. demo.style.height只能獲取行內樣式，不然沒法獲取到 2. .style.height是字符串（有單位px）， offsetHeight是數值（無單位） 3. .style.height能夠設置行內樣式，但offsetHeight是隻讀屬性，不可設置因此：demo.style.height獲取某元素的真實高度/寬度，用.style.height來設置高度/寬度
offsetLeft和offsetTop	offsetLeft的構成	1，到距離自身最近的（帶有定位的）父元素的左側/頂部 2，若是全部父級元素都沒有定位，則以body爲準 3，offsetLeft是自身border左側到父級padding左側的距離
	offsetLeft和style.left的區別	1，style.left只能獲取行內樣式 2，offsetLeft只讀，style.left可讀可寫 3，offsetLeft是數值，style.left是字符串而且有單位px 4，若是沒有定位，style.left獲取的數值多是無效的 5，最大的區別：offsetLeft以border左上角爲基準， style.left以margin左上角爲基準
offsetParent	構成	1. 返回該對象距離最近的帶有定位的父級元素 2. 若是當前元素的全部父級元素都沒有定位（position爲absolute或relative），那麼offsetParent爲body 3. offsetLeft獲取的就是相對於offsetParent的距離
	與parentNode的區別	parentNode始終指向的是當前元素的最近的父元素，不管定位與否

offset示意圖：

offset示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offset系列</title>
    <style type="text/css">
        #box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            padding: 10px;
            margin: 10px;
            position: absolute;
            top: 20px;
            left: 30px;
        }
    </style>
</head>
<body>
    <!--行內樣式-->
    <!--<div id="box" style="width: 200px;height: 200px;border: 1px solid red;padding: 10px;margin: 10px;">-->
    <div id="box"></div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        var box = document.getElementById('box');
        // 佔位寬 高 top left
        /*
        offsetTop：若是盒子沒有設置定位  到瀏覽器的頂部距離,
                   若是盒子設置定位，以父盒子爲基準的top值
        offsetLeft: 若是盒子沒有設置定位  到瀏覽器左部的距離
                    若是盒子設置定位，以父盒子爲基準的left值
        offsetWidth：內容+padding+border
        offsetHeight: 內容+padding+border
         */
        console.log(box.offsetTop);  //10
        console.log(box.offsetLeft);  //18
        console.log(box.offsetWidth); //222  200+1+1+10+10
        console.log(box.offsetHeight);  //222


    }
</script>
</html>

offset代碼示例

9、scroll系列方法

方法：

scrollHeight和scrollWidth	對象內部的實際內容的高度/寬度（不包括border）
scrollTop和scrollLeft	被捲去部分的頂部/左側到可視區域頂部/左側的距離
onscroll事件	滾動條滾動觸發的事件
頁面滾動座標	var scrollTop = window.pageYoffset \|\| document.documentElement.scrollTop \|\| document.body.scrollTop \|\| 0;

scroll示意圖：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll系列</title>
</head>
<body style="width: 2000px;height: 2000px;">
    <div style="height: 200px;background-color: red;"></div>
    <div style="height: 200px;background-color: green;"></div>
    <div style="height: 200px;background-color: yellow;"></div>
    <div style="height: 200px;background-color: blue;"></div>
    <div style="height: 200px;background-color: gray;"></div>

    <div id='scroll' style="width: 200px;height: 200px;border: 1px solid red;
    overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
        <p>
            路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
            路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
            路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
            路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
            路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城
        </p>
    </div>

</body>
<script type="text/javascript">
    window.onload = function () {
        // 實時監聽滾動事件
        window.onscroll = function () {
            // console.log(111);
            // console.log('上邊'+ document.documentElement.scrollTop);
            // console.log('左邊'+ document.documentElement.scrollLeft);
            // console.log('寬'+ document.documentElement.scrollWidth);
            // console.log('高'+ document.documentElement.scrollHeight);
        }

        var s = document.getElementById('scroll');

        s.onscroll = function () {
            console.log('上邊'+ s.scrollTop);
            console.log('左邊'+ s.scrollLeft);
            console.log('寬'+ s.scrollWidth);
            // scrollHeight：內容的高度+padding  不包含邊框和margin
            console.log('高'+ s.scrollHeight);
        }
    }

</script>
</html>