zoukankan      html  css  js  c++  java
  • 浏览器对象模型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。

  • 相关阅读:
    大数据
    优化
    gnu
    sed
    hadoop部署
    安装 zookeeper
    ansible
    ssh 配置无密码登录
    未完待续
    解正向代理、反向代理、透明代理
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/2586718.html
Copyright © 2011-2022 走看看