快捷導(dǎo)航

JavaScript瀏覽器對(duì)象模型BOM(BrowserObjectModel)實(shí)例詳解

更新時(shí)間：2016年11月29日 10:01:39 作者：牛逼的霍嘯林

這篇文章主要介紹了JavaScript瀏覽器對(duì)象模型BOM(BrowserObjectModel),結(jié)合實(shí)例形式較為詳細(xì)的分析了BOM模型的常用對(duì)象與相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript瀏覽器對(duì)象模型BOM。分享給大家供大家參考，具體如下：

window對(duì)象位于BOM層次結(jié)構(gòu)的最頂層。它包含了一些非常重要的子對(duì)象，包括location，navigator，document，screen，history。location對(duì)象包含當(dāng)前頁(yè)面的URL信息。有些信息是只讀的，有些信息是可以讀寫(xiě)的比如href屬性。我們不僅可以通過(guò)href屬性來(lái)獲取當(dāng)前頁(yè)面的URL信息，還可以通過(guò)修改href屬性，來(lái)跳轉(zhuǎn)到新的頁(yè)面。

<html>
  <body>
    <script type='text/javaScript'>
      window.location.replace("http://www.baidu.com");
      window.location.;
    </script>
  </body>
</html>

history對(duì)象保存了用戶自打開(kāi)瀏覽器以來(lái)所訪問(wèn)頁(yè)面的歷史記錄。但是某些頁(yè)面不會(huì)被記錄下來(lái)，比如使用location對(duì)象的replace（）方法加載的頁(yè)面將不會(huì)記錄在history對(duì)象中。
navigator對(duì)象表示瀏覽器自身，它包含了瀏覽器一些非常有用的信息，比如版本號(hào)，瀏覽器類(lèi)型以及用戶所使用的操作系統(tǒng)。
screen對(duì)象包含了客服端顯示能力的相關(guān)信息。

<html>
  <body>
    <script type='text/javascript'>
      switch(window.screen.colorDepth){
        case 1:
        case 4:
          document.bgColor = "white";
          break;
        case 8:
        case 15:
        case 16:
          document.bgColor = "blue";
          break;
        case 24:
        case 32:
          document.bgColor = "skyblue";
          break;
        default:
          document.bgColor = "white";
      }
      document.write("Your screen supports "+window.screen.colorDepth + " bit color");
    </script>
  </body>
</html>

document是最重要的對(duì)象之一。document對(duì)象包含了三個(gè)數(shù)組屬性links[],images[],forms[]。這三個(gè)數(shù)組分別代表了頁(yè)面中所有由<A>、<img>、<form>所創(chuàng)建對(duì)象的集合。

<html>
  <body>
    <img name=img1 src="images/1.jpg" border=0 width=200 height=150>
    <script type='text/javaScript'>
      var myImages = new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg");
      var imgIndex = prompt("Enter a number from 0 to 3","");
      document.images['img1'].src = myImages[imgIndex];
    </script>
  </body>
</html>

<html>
  <head>
    <script type='text/javascript'>
      var imagesArray=new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg");
      function changeImg(imageNumber){
        var newImage = imagesArray[Math.round(Math.random()*3)];
        alert(document.images[imageNumber].src);
        while(document.images[imageNumber].src.indexOf(newImage)!=-1){
          newImage = imagesArray[Math.round(Math.random()*3)];
        }
        document.images[imageNumber].src = newImage;
        return false;
      }
    </script>
  </head>
  <body>
    <img name='img1' src="images/1.jpg" width=150 height=200 onclick="return changeImg(0)">
    <img name='img2' src="images/2.jpg" width=150 height=200 onclick="return changeImg(1)">
  </body>
</html>

<html>
  <head>
    <script type='text/javascript'>
      function linkPage(){
        alert('You Clicked?');
        return false;
      }
    </script>
  </head>
  <body>
    <A  name='link' onclick="return linkPage()">
      Click Me
    </A>
  </body>
  <script type='text/javaScript'>
    window.document.links['link'].;
  </script>
<html>

通過(guò)這三個(gè)數(shù)組就能訪問(wèn)到為標(biāo)記所創(chuàng)建的相應(yīng)對(duì)象，可以通過(guò)修改img對(duì)象的屬性來(lái)修改頁(yè)面的圖片，通過(guò)修改超鏈接對(duì)象的屬性來(lái)改變超鏈接的URL。