JavaScript的BOM操作怎么实现

发布时间:2022-03-17 09:07:31 作者:iii
来源:亿速云 阅读:133

今天小编给大家分享一下JavaScript的BOM操作怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

window对象

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

全局作用域

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

JavaScript的BOM操作怎么实现

我们在全局作用域中定义了一个变量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>

以上就是“JavaScript的BOM操作怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. JavaScript BOM Cookie 的使用
  2. JavaScript_BOM对象

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript bom

上一篇:怎么用Python绘制散点图

下一篇:Python中图像形态学运算技术的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》