本文實例講述了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.href="http://www.sina.com";
</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 href='http://www.baidu.com' name='link' onclick="return linkPage()">
Click Me
</A>
</body>
<script type='text/javaScript'>
window.document.links['link'].href="http://www.google.com";
</script>
<html>
通過這三個數組就能訪問到為標記所創建的相應對象,可以通過修改img對象的屬性來修改頁面的圖片,通過修改超鏈接對象的屬性來改變超鏈接的URL。
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript替換操作技巧總結》、《JavaScript傳值操作技巧總結》、《javascript編碼操作技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。