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 相关文章推荐
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
vue.js实现图书管理功能
Sep 24 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使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
对python 自定义协议的方法详解
2019/02/13 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python谱减法语音降噪实例
2019/12/18 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Python ellipsis 的用法详解
2020/11/20 Python
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
安踏广告词改编版
2014/03/21 职场文书
法学求职信
2014/06/22 职场文书
授权委托书怎么写
2014/09/25 职场文书
结婚保证书
2015/01/16 职场文书
西安大雁塔导游词
2015/02/10 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
Python如何识别银行卡卡号?
2021/06/10 Python