一起来学习JavaScript的BOM操作

更新时间：2022年03月16日 15:36:30 作者：su_zui

这篇文章主要为大家详细介绍了JavaScript BOM操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

window对象

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。

全局作用域

由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。来看下面的例子。

我们在全局作用域中定义了一个变量name和一个函数sayName()，它们被自动归在了window对象名下。于是，可以通过window.name访问变量name，可以通过window.sayAge()访问函数sayName()。由于sayName()存在于全局作用域中，因此this.name被映射到window.name，最终显示的仍然是正确的结果。

常见事件

window对象也有一些自己的事件，这里我们用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script>
      window.addEventListener('load', function () {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
          alert('点击我');
        });
      });
      window.addEventListener('load', function () {
        alert(22);
      });
      document.addEventListener('DOMContentLoaded', function () {
        alert(33);
      });
      // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
      // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
  </head>
  <body>
    <button>点击</button>
  </body>
</html>

调节窗口大小

比如下面这个案例，当我们把网页缩放到800的时候盒子就会消失不见。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <script>
      window.addEventListener('load', function () {
        var div = document.querySelector('div');
        window.addEventListener('resize', function () {
          console.log(window.innerWidth);
          console.log('变化了');
          if (window.innerWidth <= 800) {
            div.style.display = 'none';
          } else {
            div.style.display = 'block';
          }
        });
      });
    </script>
    <div></div>
  </body>
</html>

定时器setTimeout

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. setTimeout
      // 语法规范：  window.setTimeout(调用函数, 延时时间);
      // 1. 这个window在调用的时候可以省略
      // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
      // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
      // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
      // setTimeout(function() {
      //     console.log('时间到了');
      // }, 2000);
      function callback() {
        console.log('执行力');
      }
      var timer1 = setTimeout(callback, 3000);
      var timer2 = setTimeout(callback, 5000);
      // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>
  </body>
</html>

this指向问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button>点击</button>
    <script>
      // this 指向问题 一般情况下this的最终指向的是那个调用它的对象
      // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
      console.log(this);
      function fn() {
        console.log(this);
      }
      window.fn();
      window.setTimeout(function () {
        console.log(this);
      }, 1000);
      // 2. 方法调用中谁调用this指向谁
      var o = {
        sayHi: function () {
          console.log(this); // this指向的是 o 这个对象
        },
      };
      o.sayHi();
      var btn = document.querySelector('button');
      // btn.onclick = function() {
      //     console.log(this); // this指向的是btn这个按钮对象
      // }
      btn.addEventListener('click', function () {
        console.log(this); // this指向的是btn这个按钮对象
      });
      // 3. 构造函数中this指向构造函数的实例
      function Fun() {
        console.log(this); // this 指向的是fun 实例对象
      }
      var fun = new Fun();
    </script>
  </body>
</html>

location对象

转跳页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.itcast.cn';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }, 1000);
    </script>
</body>
</html>

location常见方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button>点击</button>
    <script>
      var btn = document.querySelector('button');
      btn.addEventListener('click', function () {
        // 记录浏览历史，所以可以实现后退功能
        // location.assign('http://www.itcast.cn');
        // 不记录浏览历史，所以不可以实现后退功能
        // location.replace('http://www.itcast.cn');
        location.reload(true);
      });
    </script>
  </body>
</html>

总结

浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域。同时，window对象还是ECMAScript中的Global对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。

在使用框架时，每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
有一些窗口指针，可以用来引用其他框架，包括父框架。
top对象始终指向最外围的框架，也就是整个浏览器窗口。
parent对象表示包含当前框架的框架，而self对象则回指window。
使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐段或整体性地修改浏览器的URL。
调用replace()方法可以导航到一个新URL，同时该URL会替换浏览器历史记录中当前显示的页面。架都有自己的window对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
有一些窗口指针，可以用来引用其他框架，包括父框架。

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

微信小程序自动客服功能
微信小程序最近比较热，今天小编抽空做了一个客服机器人的小程序，下面小编给大家分享微信小程序自动客服功能，需要的朋友参考下吧
2017-11-11
JavaScript函数IIFE使用详解
这篇文章主要介绍了JavaScript函数IIFE使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-10-10
JavaScript设计模式之原型模式分析【ES5与ES6】
这篇文章主要介绍了JavaScript设计模式之原型模式,简单描述了原型模式的概念、原理,并结合实例形式分析了ES5与ES6实现原型模式的相关操作技巧,需要的朋友可以参考下
2018-07-07
JavaScript引擎实现async/await的方法实例
大家应该都知道随着Node 7的发布,越来越多的人开始研究据说是异步编程终级解决方案的async/await,下面这篇文章主要给大家介绍了关于JavaScript引擎是如何实现async/await的相关资料,需要的朋友可以参考下
2022-03-03
webpack4.x下babel的安装、配置及使用详解
这篇文章主要介绍了webpack4.x下babel的安装、配置及使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
JS中的Replace()传入函数时的用法详解
这篇文章主要介绍了JS中的Replace()传入函数时的用法详解,replace方法的语法是：stringObj.replace(rgExp, replaceText)关于js replace 传入函数的用法，大家通过本文学习吧
2017-09-09
js创建数组的简单方法
下面小编就为大家带来一篇JS创建数组的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JS模式之简单的订阅者和发布者模式完整实例
这篇文章主要介绍了JS模式之简单的订阅者和发布者模式,以一个完整实例形式详细分析了JS订阅者和发布者模式基本实现技巧,需要的朋友可以参考下
2015-06-06
跟我学习javascript创建对象(类)的8种方法
跟我学习javascript创建对象(类)的8种方法，每一种方法都有详细的介绍，不知道javascript如何创建对象的朋友，不要错过这篇文章。
2015-11-11
Threejs实现滴滴官网首页地球动画功能
这篇文章主要介绍了Threejs实现滴滴官网首页地球动画效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07