BOM 归纳

最新推荐文章于 2023-12-28 16:03:47 发布

ths99

最新推荐文章于 2023-12-28 16:03:47 发布

阅读量275

点赞数

分类专栏：前端学习笔记 JavaScript 文章标签： javascript BOM javascript笔记浏览器对象模型

本文链接：https://blog.csdn.net/qq_34123985/article/details/89425334

版权

JavaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端学习笔记

12 篇文章 1 订阅

订阅专栏

BOM （浏览器对象模型）

什么是BOM？

BOM（Browser Object Model）即浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象，使 JavaScript 有能力与浏览器"对话"。 BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

BOM核心:window对象

window对象是BOM的核心，window对象指当前的浏览器窗口,所有浏览器都支持 window 对象.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。

常用的Window方法：

 window.innerHeight // 浏览器窗口的内部高度
 window.innerWidth // 浏览器窗口的内部宽度
 window.open() // 打开新窗口
 window.close() // 关闭当前窗口

Window 子对象

Window的子对象主要有如下几个：

document 对象

document.write()  //写入文本
document.writeln()  //等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
document.getElementById()  // 通过id 名获取元素
document.getElementByName()   // 通过 name 属性名获取元素
document.getElementByTagName()   // 通过标签名获取元素

注意:
document.getElementById() 返回对拥有指定 id 的单个对象, id是唯一的。
document.getElementByName() 返回带有指定名称的对象集组成的数组。
document.getElementByTagName() 返回带有指定标签名的对象集组成的数组

frames 对象

返回 Window 对象的引用, 表示当前窗口的所有框架。
语法

window.frames

举例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>frame对象</title>
  </head>
  <body>
    <p>
      在页面中查找所有框架的数量，然后修改 iframe 元素的 src 属性为
      "http://www.baidu.com":
    </p>

    <button onclick="myFunction()">点我</button>
    <br /><br />

    <iframe src="https://www.baidu.com"></iframe>
    <iframe src="https://www.taobao.com"></iframe>
    <script>
      function myFunction() {
        var frames = window.frames;
        var i;

        for (i = 0; i < frames.length; i++) {
          frames[i].location = "http://www.baidu.com";
        }
      }
    </script>
  </body>
</html>

在这里插入图片描述
点击按钮之后效果：

history 对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。

注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

语法:

history.属性|方法

history.length // 返回浏览器历史列表中的URL数量
history.forward()  // 前进一页
history.back()  // 后退一页
history.go(i) // i>0表示前进i页，i<0表示倒退i页

location 对象

location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:

location.属性|方法

location 对象属性：

location 对象方法:

举例：

location.href  //获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

navigator 对象

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
语法：

window.navigator.属性

navigator.appName　　// Web浏览器全称
navigator.appCodeName // 浏览器代码名的字符串表示
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen 对象:

screen对象用于获取用户的屏幕信息。

语法：

window.screen.属性

screen.availWidth //可用的屏幕宽度
screen.availHeight // 可用的屏幕高度
screen.colorDepth //用户浏览器表示的颜色位数，通常是32位（每像素的位数）
screen.Width //屏幕宽度
screen.Height // 屏幕高度

计时器相关方法

setInterval() ：在执行时,从载入页面后每隔指定的时间执行代码。返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

setInterval(代码，交互时间)；//代码：要调用的函数或要执行的代码串。

setTimeout() 计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

setTimeout(代码,延迟时间);//在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)

clearInterval() ：可取消由 setInterval() 设置的交互时间。

clearInterval(id_of_setInterval) //id_of_setInterval：由 setInterval() 返回的 ID 值。

clearTimeout()和setTimeout()一起使用，停止计时器。

clearTimeout(id_of_setTimeout) //id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

例子：实现一个10秒的倒计时器：

<span id="second">10</span>
    <span>秒倒计时开始</span>
    <script type="text/javascript">
      var num = document.getElementById("second").innerHTML;
      //获取显示秒数的元素，通过定时器来更改秒数。
      function count() {
        if (num > 0) {
          num--;
        }
        document.getElementById("second").innerHTML = num;
      }
      setInterval("count()", 1000);
    </script>