JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
本文实例讲述了JavaScript浏览器对象模型BOM。分享给大家供大家参考，具体如下：
window对象位于BOM层次结构的最顶层。它包含了一些非常重要的子对象，包括location，navigator，document，screen，history。location对象包含当前页面的URL信息。有些信息是只读的，有些信息是可以读写的比如href属性。我们不仅可以通过href属性来获取当前页面的URL信息，还可以通过修改href属性，来跳转到新的页面。
<html>
<body>
<scripttype='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>
<scripttype='text/javascript'>
switch(window.screen.colorDepth){
case1:
case4:
document.bgColor="white";
break;
case8:
case15:
case16:
document.bgColor="blue";
break;
case24:
case32:
document.bgColor="skyblue";
break;
default:
document.bgColor="white";
}
document.write("Yourscreensupports"+window.screen.colorDepth+"bitcolor");
</script>
</body>
</html>
document是最重要的对象之一。document对象包含了三个数组属性links[],images[],forms[]。这三个数组分别代表了页面中所有由<A>、<img>、<form>所创建对象的集合。
<html>
<body>
<imgname=img1src="images/1.jpg"border=0width=200height=150>
<scripttype='text/javaScript'>
varmyImages=newArray("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg");
varimgIndex=prompt("Enteranumberfrom0to3","");
document.images['img1'].src=myImages[imgIndex];
</script>
</body>
</html>
<html>
<head>
<scripttype='text/javascript'>
varimagesArray=newArray("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg");
functionchangeImg(imageNumber){
varnewImage=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;
returnfalse;
}
</script>
</head>
<body>
<imgname='img1'src="images/1.jpg"width=150height=200onclick="returnchangeImg(0)">
<imgname='img2'src="images/2.jpg"width=150height=200onclick="returnchangeImg(1)">
</body>
</html>
<html>
<head>
<scripttype='text/javascript'>
functionlinkPage(){
alert('YouClicked?');
returnfalse;
}
</script>
</head>
<body>
<Ahref='http://www.baidu.com'name='link'onclick="returnlinkPage()">
ClickMe
</A>
</body>
<scripttype='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程序设计有所帮助。