JS中BOM相關(guān)知識(shí)點(diǎn)總結(jié)(必看篇)

更新時(shí)間：2016年11月22日 08:37:39 投稿：jingxian

下面小編就為大家?guī)硪黄狫S中BOM相關(guān)知識(shí)點(diǎn)總結(jié)(必看篇)。小編覺得挺不錯(cuò)的，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦

window對(duì)象

ECMAScript是JavaScript的核心，但是如果要在web中使用javascript，那么BOM(瀏覽器對(duì)象模型)才是真正的核心。BOM提供了很多對(duì)象，用于訪問瀏覽器的功能，這些功能與任何網(wǎng)頁內(nèi)容無關(guān)。

window對(duì)象：BOM的核心對(duì)象是window，它表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對(duì)象有雙重角色，它既是通過javascript訪問瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。

因此，所有全局作用域中聲明的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法。

<script type="text/javascript">
  var age=26;//這里定義的全局變量和全局函數(shù)被自動(dòng)歸在了window對(duì)象名下
  function sayAge(){
    console.log(this.age);
  }
  console.log(window.age);//26
  sayAge();//26 相當(dāng)于window.sayAge()
  window.sayAge();//26

  //全局變量和在window對(duì)象上直接定義屬性的唯一區(qū)別：全局變量不能夠通過delete操作符刪除，而直接在window對(duì)象上定義的屬性可以
  window.color='red';
  delete window.age;
  delete window.color;
  console.log(window.age);//26
  console.log(window.color);//undefined
  </script>

<script type="text/javascript">
    /*
    還要注意：嘗試訪問未聲明的變量會(huì)拋出錯(cuò)誤，但是通過查詢window對(duì)象，可以知道某個(gè)可能未經(jīng)聲明的變量是否存在
     */
    //這會(huì)拋出錯(cuò)誤，因?yàn)閛ldValue未定義
    var newValue=oldValue;
    //這不會(huì)拋出錯(cuò)誤，因?yàn)槭且淮螌傩圆樵?
    var newValue=window.oldValue;
  </script>

窗口關(guān)系和框架

如果頁面中包含框架，則每個(gè)框架都擁有自己的window對(duì)象，并且保存在frames集合中。在frames集合中，可以通過數(shù)值索引(從0開始，從左到右，從上到下)或者框架名稱來訪問相應(yīng)的window對(duì)象。每個(gè)window對(duì)象都有一個(gè)name屬性，其中包含著框架的名稱。

可以通過window.frames[0]或者window.frames[“topFrame”]來引用上方的框架。不過，最好使用top，而不是window來引用這些框架。因?yàn)?，top對(duì)象始終指向最高(最外)層的框架，也就是瀏覽器窗口。使用它可以確保在一個(gè)框架中正確地訪問另一個(gè)框架。因?yàn)閷?duì)于一個(gè)在框架中編寫的任何代碼來說，其中的window對(duì)象指向的都是那個(gè)框架的特定實(shí)例，而不是最高層的框架。

與top相對(duì)的另一個(gè)window對(duì)象是parent。parent對(duì)象始終指向當(dāng)前框架的直接上層框架。

與框架有關(guān)的最后一個(gè)對(duì)象是self，它始終指向window。self和window對(duì)象可以互換使用。

在使用框架的情況下，瀏覽器中會(huì)存在多個(gè)Global對(duì)象。在每個(gè)框架中定義的全局變量會(huì)自動(dòng)成為框架中window對(duì)象的屬性。由于每個(gè)window對(duì)象都包含原生類型的構(gòu)造函數(shù)，因此每個(gè)框架都有一套自己的構(gòu)造函數(shù)，這些構(gòu)造函數(shù)一一對(duì)應(yīng)，但并不相等。

location對(duì)象

location對(duì)象是一個(gè)很特別的對(duì)象，因?yàn)樗仁莣indow對(duì)象的屬性，也是document對(duì)象的屬性。window.location和document.location引用的是同一個(gè)對(duì)象。

location對(duì)象的屬性：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>查詢字符串參數(shù)</title>
</head>
<body>
<script type="text/javascript">
    function getQueryStringArgs(){
      //取得查詢字符串并去掉開頭的問號(hào)
      var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        //保存數(shù)據(jù)對(duì)象
        args = {},
        //取得每一項(xiàng)
        items = qs.length ? qs.split("&") : [],
        item = null,
        name = null,
        value = null,
        //在for循環(huán)中使用
        i = 0,
        len = items.length;
      //逐個(gè)將每一項(xiàng)添加到args對(duì)象中
      for (i=0; i < len; i++){
        item = items[i].split("=");
        //decodeURIComponent用來解碼name和value,因?yàn)椴樵冏址畱?yīng)該是被編碼過的
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if (name.length){
          args[name] = value;
        }
      }
      return args;
    }
    //假設(shè)查詢字符串是： ?q=javascript&num=10
    var args = getQueryStringArgs();
    alert(args["q"]);   //"javascript"
    alert(args["num"]);  //"10"
    //這樣一來，每個(gè)查詢字符串參數(shù)都成了返回對(duì)象的屬性，極大地方便了對(duì)每個(gè)參數(shù)的訪問
</script>
</body>
</html>

使用location對(duì)象可以通過很多方式來改變?yōu)g覽器的位置。

其中，最常用的方式是：使用assign()方法并為其傳遞一個(gè)URL

location.assign(“http://www.dbjr.com.cn“)

這樣就可以立即打開新的URL并在瀏覽器的歷史記錄中生成一條記錄。

同樣的，將location.href和window.location設(shè)置為一個(gè)URL值,也會(huì)以該值調(diào)用assign()方法。

location.href=”http://www.dbjr.com.cn”;
window.location=”http://www.dbjr.com.cn”;

這兩種方式的效果和顯示調(diào)用assign()方法效果完全一樣

此外，通過修改location對(duì)象的其他屬性也可以改變當(dāng)前加載的頁面。

每次修改location的屬性(hash除外)，頁面都會(huì)以新的URL重新加載。修改hash的值會(huì)在瀏覽器的歷史記錄中生成一條新的記錄

在url：http://a.com#helloword中的'#helloworld'就是location.hash，改變hash并不會(huì)導(dǎo)致頁面刷新，所以可以利用hash值來進(jìn)行數(shù)據(jù)傳遞，當(dāng)然數(shù)據(jù)容量是有限的。

當(dāng)通過上述任何一種方法修改URL之后，瀏覽器的歷史記錄中就會(huì)生成一條新紀(jì)錄，因此通過點(diǎn)擊”后退”按鈕都會(huì)導(dǎo)航到前一個(gè)頁面。

我們可以使用replace()方法來禁用這種行為。該方法只接受一個(gè)參數(shù)，即要導(dǎo)航到的URL;結(jié)果雖然會(huì)導(dǎo)致瀏覽器位置改變，但不會(huì)在歷史記錄中生成新紀(jì)錄。在調(diào)用replace()方法后，用戶不能回到前一個(gè)頁面。

這個(gè)頁面加載到瀏覽器中后，瀏覽器就會(huì)在1秒鐘后重新定向到www.dbjr.com.cn。然后，'后退'按鈕將處于禁用狀態(tài)，如果重新輸入完整的URL，則無法返回示例頁面。

<script type="text/javascript">
    setTimeout(function () {
      location.replace("http://www.dbjr.com.cn/");
    }, 1000);
  </script>

reload()方法，其作用是重新加載當(dāng)前顯示的頁面。如果調(diào)用reload()方法時(shí)不傳遞任何參數(shù)，頁面就會(huì)以最有效的方式重新加載。也就是說，如果頁面自上次請(qǐng)求以來并沒有改變過，頁面就會(huì)從瀏覽器緩存中重新加載。如果要強(qiáng)制從服務(wù)器重新加載，需要給該方法傳遞參數(shù)true。

location.reload();//重新加載(有可能從緩存中加載)
location.reload(true);//重新加載(從服務(wù)器重新加載)

超時(shí)調(diào)用和間歇調(diào)用

javascript是單線程語言，但允許通過設(shè)置超時(shí)值和間歇值來設(shè)定代碼在特定時(shí)刻執(zhí)行

超時(shí)調(diào)用：是在指定的時(shí)間過后執(zhí)行代碼

間歇調(diào)用：每隔指定的時(shí)間就執(zhí)行一次代碼

超時(shí)調(diào)用：需要使用window對(duì)象的setTimeout()方法，接收兩個(gè)參數(shù)：要執(zhí)行的代碼和以毫秒表示的時(shí)間。

第二個(gè)參數(shù)是一個(gè)表示等待多長時(shí)間的毫秒數(shù)，但經(jīng)過該時(shí)間后指定的代碼不一定執(zhí)行。因?yàn)?，javascript是一個(gè)單線程的解釋器，因此一定時(shí)間內(nèi)只能執(zhí)行一段代碼。第二個(gè)參數(shù)表示再過多長時(shí)間把當(dāng)前任務(wù)添加到隊(duì)列中。如果隊(duì)列是空的，則代碼會(huì)立刻執(zhí)行，否則就要等待前面的代碼執(zhí)行完了以后再執(zhí)行。

調(diào)用setTimeout()后，該方法會(huì)返回一個(gè)數(shù)值ID,表示超時(shí)調(diào)用。要取消未執(zhí)行的超時(shí)調(diào)用計(jì)劃，可以調(diào)用clearTimeout()方法并將相應(yīng)的超時(shí)調(diào)用ID作為參數(shù)傳遞給它即可。

間歇調(diào)用：使用setInterval()方法

與超時(shí)調(diào)用類似，只不過它會(huì)按照指定的時(shí)間間隔重復(fù)執(zhí)行代碼，直到間歇調(diào)用被取消或者頁面被卸載。它接收的參數(shù)與setTimeout()方法一樣

Demo1

<script type="text/javascript">
    //設(shè)置超時(shí)調(diào)用
    var timeoutId = setTimeout(function() {
      alert("Hello world!");
    }, 1000);
    //取消超時(shí)調(diào)用
    clearTimeout(timeoutId);
  </script>

Demo2

<script type="text/javascript">
  /*
  使用間歇調(diào)用實(shí)現(xiàn)
   */
    var num = 0;
    var max = 10;
    var intervalId = null;
    function incrementNumber() {
      num++;
      if (num == max) {
        clearInterval(intervalId);
        alert("Done");
      }
    }
    intervalId = setInterval(incrementNumber, 500);
  </script>

Demo3

<script type="text/javascript">
  /*
  使用超時(shí)調(diào)用來實(shí)現(xiàn)
   */
    var num = 0;
    var max = 100;
    function incrementNumber() {
      num++;
      if (num < max) {
        setTimeout(incrementNumber, 500);
      } else {
        alert("Done");
      }
    }
    setTimeout(incrementNumber, 500);
  </script>

在使用超時(shí)調(diào)用時(shí)，沒有必要跟蹤超時(shí)調(diào)用ID，因?yàn)槊看螆?zhí)行代碼之后，如果不再設(shè)置另一次超時(shí)調(diào)用，調(diào)用就會(huì)自動(dòng)停止。一般認(rèn)為，使用超時(shí)調(diào)用來模擬間歇調(diào)用是一種最佳模式。間歇調(diào)用一般較少使用，因?yàn)楹笠粋€(gè)間歇調(diào)用可能會(huì)在前一個(gè)間歇調(diào)用結(jié)束之前啟動(dòng)。

系統(tǒng)對(duì)話框

alert()、confirm()和prompt()

<script type="text/javascript">
    alert("Hello world!");
  </script>



<script type="text/javascript">
  /*
  判斷用戶點(diǎn)擊了OK還是Cancel，可以檢查confirm()方法返回的布爾值：true表示單擊了OK，false表示單擊了Cancel或單擊了右上角的X按鈕。
   */
    if (confirm("Are you sure?")) {
      alert("I'm so glad you're sure! ");
    } else {
       alert("I'm sorry to hear you're not sure. ");
    }
  </script>



<script type="text/javascript">
  /*
  prompt()方法用來生成一個(gè)"提示"框，用于提示用戶輸入一些文本。提示框除了顯示OK和Cancel按鈕之外 ，還會(huì)顯示一個(gè)文本輸入域，用來輸入文本內(nèi)容。該方法接收兩個(gè)參數(shù)：要顯示給用戶的文本提示和文本輸入域的默認(rèn)值(可以是一個(gè)空字符串)
   */
    var result = prompt("What is your name? ", "");
    if (result !== null) {
     alert("Welcome, " + result);
    }
  </script>

history對(duì)象

history對(duì)象保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起。因?yàn)閔istory是window對(duì)象的屬性，因此每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁以及每個(gè)框架，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)。處于安全方面的考慮，開發(fā)人員是無法知道用戶瀏覽過的URL，不過，借助用戶訪問過的頁面列表，同樣可以在不知道實(shí)際URL的情況下實(shí)現(xiàn)后退和前進(jìn)。

使用Go()方法可以在用戶的歷史記錄中任意跳轉(zhuǎn)，可以向后也可以向前。該方法接收一個(gè)參數(shù)：表示向前或者向后跳轉(zhuǎn)的頁面數(shù)的整數(shù)值。負(fù)數(shù)表示向后跳轉(zhuǎn)(類似單擊瀏覽器的后退按鈕)，正數(shù)表示向前跳轉(zhuǎn)(類似瀏覽器的前進(jìn)按鈕)。

//后退一頁
    history.go(-1);
    //前進(jìn)一頁
    history.go(1);

也可以給go()方法傳遞一個(gè)字符串參數(shù)，此時(shí)瀏覽器會(huì)跳轉(zhuǎn)到歷史記錄中包含該字符串的第一個(gè)位置–可能后退也可能前進(jìn)，具體要看哪個(gè)位置最近。如果歷史記錄中不包含該字符串，那么這個(gè)方法什么也不做

//跳轉(zhuǎn)到最近的jb51.net
history.go("jb51.net");

另外，還可以使用back()和forward()來代替go()方法

//后退一頁
    history.back();
    //前進(jìn)一頁
    history.forward();

除此之外，history對(duì)象還有一個(gè)length屬性，保存著歷史記錄的數(shù)量。這個(gè)數(shù)量包括所有的歷史記錄，即所有的向后和向前的記錄。如果history.length==0，則表示這是用戶打開窗口后的第一個(gè)頁面

history對(duì)象不常用，但是在創(chuàng)建自定義的后退和前進(jìn)按鈕，以及檢測當(dāng)前頁面是不是用戶歷史記錄的第一個(gè)頁面時(shí)，還是必須使用它。

Demo1

history.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>history</title>
</head>
<body>
  <form>
    <input type="text" id="username">
  </form>
  <input type="button" id="btn" value="按鈕" onclick="go()">
  <script type="text/javascript">
    function go(){
      var name=document.getElementById("username").value;
      if(name=="hello"){
        history.go(-1);
      }else{
        alert('用戶名不正確');
      }
    }
  </script>
</body>
</html>

ceshi.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <a href="history.html" >跳轉(zhuǎn)</a>
</body>
</html>

這里使用history模仿了一個(gè)輸入用戶名之后。跳轉(zhuǎn)到之前頁面的例子。

Demo2
history2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>history</title>
</head>
<body>
  <a href="demo.html">跳轉(zhuǎn)</a>
  <input type="button" id="btn" value="前進(jìn)" onclick="go()">
  <script type="text/javascript">
    function go(){
      history.forward();
    }
  </script>
</body>
</html>

demo.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <input type="button" name="" value="回退" id="btn" onclick="fn()">
  <script type="text/javascript">
    function fn(){
      history.back();
    }
  </script>
</body>
</html>

這個(gè)小例子模擬了history.back()和history.forward()的基本功能

以上就是小編為大家?guī)淼腏S中BOM相關(guān)知識(shí)點(diǎn)總結(jié)(必看篇)全部內(nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: