JavaScript BOM

前言

既然近来学习用到了很多有关js知识，那么在这里我有必要总结一下其中一些的理论重点。我们知道javascript是一种专为与网页交互而设计的脚本语言,它由下列三个不同的部分组成:

ECMAScript,由ECMA-262定义,提供核心语言功能;

文档对象模型(DOM),提供访问和操作网页内容的方法和接口;

浏览器对象模型(BOM),提供与浏览器交互的方法和接口;

由此可知其中的BOM是与浏览器打交道的，而一般涉及到js的实际运行，我们就离不开运行浏览器。事实也证明我在开发过程中用到了很多与BOM有关的知识。所以今天我想详细总结有关BOM的知识点和实例。

概念

BOM：Brower Object Model，指的是浏览器对象模型。

作用：操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。

浏览器对象：浏览器提供的一系列内置对象的统称。

BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。

其中window对象是BOM的顶层（核心）对象。

其他的对象都是以属性的方式添加到window对象下，也可称为window的子对象。

浏览器对象种类及作用

document（文档对象）：也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。

history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。

location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。

navigator（浏览器对象）：用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。

screen（屏幕对象）：可获取与屏幕相关的数据，例如屏幕的分辨率等。

BOM知识思维导图

具体常见使用方法

1.location

window.location.href; //获取当前地址栏的地址

window.location.href = “具体网址”; // 设置当前地址栏的地址

window.location.reload(); //刷新

window.location.reload(true); /制刷新

2.history

window.history.forword(); //上一步

window.history.back(); //下一步

window.history.go(0); //接收参数 0 表示刷新当前页面

window.history.go(2); //接收正整数表示前进2个页面

window.history.go(-2); //接收负整数表示后退2个页面

3.Document

Document.write();//向文档写 HTML 表达式或 JavaScript 代码

Document.writeln();//等同于 write() 方法，不同的是在每个表达式之后写一个换行符

Document.open();//打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出

Document.close();//关闭用 document.open() 方法打开的输出流，并显示选定的数据

Document.getElementById();//返回对拥有指定 id 的第一个对象的引用

Document.getElementsByName();//返回带有指定名称的对象集合

Document.getElementsByTagName()//返回带有指定标签名的对象集合

4.navigator

navigator.javaEnabled();//检查浏览器是否启用了java

典型应用实例

由于BOM中的对象涉及到浏览器交互的方方面面，所以它的应用也是十分普遍，比如当我在碰到使用定时器来实现某些功能时，我就用到了BOM相关知识:

1.定时器设定以及取消案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<input type="button" value="取消定时器" onclick="javascript:stopShowTime()"/>
<script type="text/javascript">
function showTime()
  {  // 在浏览器状态栏中显示时间
     var now=new Date().toLocaleTimeString();  // toLocaleTimeString()根据本地时间把Date对象的时间部分转换为字符串，并返回结果
    console.log("当前时间是："+now);//
  }
  var timerID=window.setInterval("showTime()",1000);  //使用window对象设置一个定时器,每间隔1秒执行一次 showTime()
  function stopShowTime()
  {  // 停止打印时间
     window.clearInterval(timerID); // 清除定时器
     alert("已取消定时器");
  }
  // setInterval/clearInterval 在指定的时间后会自动重复执行代码
  // setTimeout/clearTimeout  只执行一次代码
</script>
</body>
</html>

2.不同浏览器使用不同背景色

<script>
    var ua = navigator.userAgent;//使用 navigator对象的userAgent来区分浏览器
    var res = ua.match(/Chrome|Firefox|Trident/
    switch(res[0]){
        //火狐
        case "Firefox" :{
            document.body.bgColor = "red";
            break;
        }
        //谷歌
        case "Chrome" :{
            document.body.bgColor = "blue";
            break;
        }
        //IE
        case "Trident" :{
            document.body.bgColor = "green";
            break;
        }
    }
</script>

总结

由于BOM所涵盖对象种类丰富，每类对象又包含众多属性和方法，并且这些属性和方法都是JS与浏览器交互过程中很容易被使用到的，所以这部分知识点突出的是一个“杂”字，而熟练掌握这些诚然是我们开发人员应当具备的技能，我们并不能因为BOM被应用的广泛性和普遍性而忽略其重要性。我相信高楼雄起必然是需要经过匠人一砖一瓦之努力。

参考资料：思维导图引自https://blog.csdn.net/lhjuejiang/article/details/79453407

posted @ 2019-12-30 16:28 本·西蒙斯阅读(241) 评论(0) 收藏举报

刷新页面返回顶部

JavaScript BOM

公告