一文帶你瞭解BOM基本知識

時間 2019-12-18

標籤一文瞭解 bom 基本知識简体版

原文原文鏈接

1.1. BOＭ和ＤOM的區別

DOM就是一套操做HTML標籤的API(接口/方法/屬性)html

BOM就是一套操做瀏覽器的API(接口/方法/屬性)正則表達式

1.2. BOM中常見的對象

window: 表明整個瀏覽器窗口注意: window是BOM中的一個對象, 而且是一個頂級的對象(全局),下面的對象都能經過它找到chrome
Navigator: 表明當前瀏覽器的信息, 經過Navigator咱們就能判斷用戶當前是什麼瀏覽器瀏覽器
Location: 表明瀏覽器地址欄的信息, 經過Location咱們就能設置或者獲取當前地址信息ui
History: 表明瀏覽器的歷史信息, 經過History來實現刷新/上一步/下一步注意點: 出於隱私考慮, 咱們並不能拿到用戶全部的歷史記錄, 只能拿本次使用時的歷史記錄spa
Screen: 表明用戶的屏幕信息firefox

1.3. history

history應該是屬於最經常使用的BOM對象之一了，我把它寫在最前面code

最重要的方法：window.history.go(x);regexp

x>0 前進x個當前標籤頁的歷史記錄
x<0 後退x個當前標籤頁的歷史記錄
x=0 刷新

<body>
<h1>我是第一個界面</h1>
<button id="btn1">前進</button>
<button id="btn2">刷新</button>
<a href="52-JavaScript-History2.html">新的界面222</a>
<script
    // 注意點: 出於隱私考慮, 咱們並不能拿到用戶全部的歷史記錄, 只能拿到當前的歷史記錄
    let oBtn1 = document.querySelector("#btn1");
    let oBtn2 = document.querySelector("#btn2");
    // 前進
    /*
    注意點:
    只有當前訪問過其它的界面, 才能經過go方法前進
    */
    oBtn1.onclick = function () {
        // window.history.forward();
        window.history.go(1);
    }
    // 刷新
    oBtn2.onclick = function () {
        window.history.go(0);
    }
</script>
</body>
複製代碼

<body>
<h2>我是第2222個界面</h2>
<button id="btn1">後退</button>
<script>
    let oBtn1 = document.querySelector("#btn1");
    // 後退
    oBtn1.onclick = function () {
        // window.history.back();
        window.history.go(-1);
    }
</script>
</body>
複製代碼

1.4. navigator

Navigator: 表明當前瀏覽器的信息, 經過Navigator咱們就能判斷用戶當前是什麼瀏覽器htm

經過console.log(window.navigator)能夠直接在控制檯輸入當前的瀏覽器信息，其中你會發現 userAgent: "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36" vendor: "Google Inc."這一個屬性中描述了瀏覽器信息，咱們能夠用正則表達式的形式判斷是哪一款瀏覽器

var agent = window.navigator.userAgent;
    if(/chrome/i.test(agent)){
        alert("當前是谷歌瀏覽器");
    }else if(/firefox/i.test(agent)){
        alert("當前是火狐瀏覽器");
    }else if(/msie/i.test(agent)){
        alert("當前是低級IE瀏覽器");
    }else if("ActiveXObject" in window){
        alert("當前是高級IE瀏覽器");
    }s
複製代碼

1.4.1. 順道給你補習一下這兩個正則表達式的用法

/chrome/i是一個正則表達式，表示不分大小寫匹配句子中的chrome，正則表達式.test(str)是在利用js中正則對象的test方法，檢測句子中是否包含這個要求的單詞
「ｓｔｒ」 in 變量/obj 利用的是in語法，判斷這個變量或者obj中是否有這個str

1.5. location

紙上看來終覺淺，絕知此事要躬行。

<body>
<button id="btn1">獲取當前地址</button>
<button id="btn2">設置地址</button>
<button id="btn3">刷新</button>
<button id="btn4">強制刷新</button>
<script>
    // Location:  表明瀏覽器地址欄的信息, 經過Location咱們就能設置或者獲取當前地址信息
    let oBtn1 = document.querySelector("#btn1");
    let oBtn2 = document.querySelector("#btn2");
    let oBtn3 = document.querySelector("#btn3");
    let oBtn4 = document.querySelector("#btn4");
    // 獲取當前地址欄的地址
    oBtn1.onclick = function(){
        console.log(window.location.href);
    }
    // 設置當前地址欄的地址
    oBtn2.onclick = function(){
        window.location.href = "http://www.it666.com";
    }
    // 從新加載界面
    oBtn3.onclick = function(){
        window.location.reload();
    }
    oBtn4.onclick = function(){
        window.location.reload(true);
    }
</script>
</body>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。