浏览器对象模型BOM(BrowserObjectModel)

简介:

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。



本文转自TBHacker博客园博客,原文链接http://www.cnblogs.com/jiqing9006/archive/2012/07/11/2586718.html,如需转载请自行联系原作者

相关文章
|
2月前
|
JavaScript 前端开发 UED
浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model,简称BOM)是JavaScript中用于操作浏览器窗口和与其相关对象的一种模型。BOM提供了一系列与浏览器窗口进行交互的对象,使得JavaScript可以对浏览器窗口进行控制和操作。其中最核心的对象是window对象,它代表了浏览器窗口本身。
17 1
|
5月前
|
存储 JavaScript 前端开发
浏览器环境与BOM
浏览器环境与BOM
22 0
|
3月前
|
JavaScript 前端开发 API
探索前端BOM API:解锁浏览器的潜力
探索前端BOM API:解锁浏览器的潜力
44 0
|
4月前
|
编解码 JavaScript 前端开发
BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
38 2
|
9月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
|
4月前
|
JavaScript 前端开发 API
探索前端BOM API:解锁浏览器的潜力
探索前端BOM API:解锁浏览器的潜力
42 1
|
10月前
|
JavaScript 前端开发
|
10月前
|
JavaScript 前端开发
|
10月前
|
Web App开发 JavaScript 前端开发
|
11月前
|
JavaScript 前端开发

热门文章

最新文章