DDR爱好者之家

JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
站长资源 2024/11/28 佚名
30 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了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="/UploadFiles/2021-04-02/1.jpg">





<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="/UploadFiles/2021-04-02/1.jpg">





<html>
  <head>
    <script type='text/javascript'>
      function linkPage(){
        alert('You Clicked"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程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米