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

2019-11-19 18:46:48

字體：大中小

來源：轉載

供稿：網友

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

window對象位于BOM層次結構的最頂層。它包含了一些非常重要的子對象，包括location，navigator，document，screen，history。location對象包含當前頁面的URL信息。有些信息是只讀的，有些信息是可以讀寫的比如href屬性。我們不僅可以通過href屬性來獲取當前頁面的URL信息，還可以通過修改href屬性，來跳轉到新的頁面。

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

history對象保存了用戶自打開瀏覽器以來所訪問頁面的歷史記錄。但是某些頁面不會被記錄下來，比如使用location對象的replace（）方法加載的頁面將不會記錄在history對象中。
navigator對象表示瀏覽器自身，它包含了瀏覽器一些非常有用的信息，比如版本號，瀏覽器類型以及用戶所使用的操作系統。
screen對象包含了客服端顯示能力的相關信息。

<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是最重要的對象之一。document對象包含了三個數組屬性links[],images[],forms[]。這三個數組分別代表了頁面中所有由<A>、<img>、<form>所創建對象的集合。

<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>

通過這三個數組就能訪問到為標記所創建的相應對象，可以通過修改img對象的屬性來修改頁面的圖片，通過修改超鏈接對象的屬性來改變超鏈接的URL。