JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解


Posted in Javascript onNovember 29, 2016

本文实例讲述了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 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 #Javascript
JS 拦截全局ajax请求实例解析
Nov 29 #Javascript
JS正则替换掉小括号及内容的方法
Nov 29 #Javascript
详解堆的javascript实现方法
Nov 29 #Javascript
Bootstrap Table使用心得总结
Nov 29 #Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 #Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 #Javascript
You might like
PHP中的日期及时间
2006/11/23 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
python设置随机种子实例讲解
2019/09/12 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
接待员岗位职责范本
2015/04/15 职场文书
干部培训简讯
2015/07/20 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python