惊蛰

外观

js BOM操作

约 864 字大约 3 分钟

2025-07-30

BOM：Browser Object Model, 浏览器对象模型。

alt text

window.onload

在 html 中，通常 js 代码要放在元素之下，否则会报错。比如在元素之前的 script 中给一个 button 绑定 onclick 事件，会报错：Uncaught TypeError: Cannot set property 'onclick' of null

有了 window.onload 后就可以把 js 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕后才去执行处理函数。

  • 传统使用多个 window.onload 时会发生冲突，后一个会覆盖前一个。
  • 多个 addEventListener 也不会冲突。
  • load 必须等页面内容全部加载完，包含页面 dom 元素、图片、flash、css 等。
  • DOMContentLoaded 是 DOM 加载完毕，不包含图片、falsh、css 等就可以执行，加载速度比 load 更快一些。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      // var btn1 = document.querySelector("#btn1");
      // btn1.onclick = function(){
      //     console.log("传统方式函数在元素之前时，不会触发,并且会报错");
      // }

      window.onload = function () {
        var btn2 = document.querySelector("#btn2");
        btn2.onclick = function () {
          console.log(
            "window.onload时窗口（页面）加载事件，当文档内容完全加载完成后触发（包括图像、脚本文件、测试士、文件等）"
          );
        };
      };
      window.onload = function () {
        var btn2 = document.querySelector("#btn2");
        btn2.addEventListener("click", function () {
          console.log(
            "但是传统使用多个window.onload时会发生冲突，后一个会覆盖前一个"
          );
        });
      };

      window.addEventListener("load", function () {
        var btn3 = document.querySelector("#btn3");
        btn3.addEventListener("click", function () {
          console.log("推荐这样使用");
        });
      });
      window.addEventListener("load", function () {
        var btn3 = document.querySelector("#btn3");
        btn3.addEventListener("click", function () {
          console.log("多个addEventListener也不会冲突");
        });
      });

      window.addEventListener("DOMContentLoaded", function () {
        var btn3 = document.querySelector("#btn3");
        btn3.addEventListener("click", function () {
          console.log(
            "load必须等页面内容全部加载完，包含页面dom元素、图片、flash、css等。"
          );
          console.log(
            "DOMContentLoaded是DOM加载完毕，不包含图片、falsh、css等就可以执行，加载速度比load更快一些"
          );
        });
      });
    </script>
    <button id="btn1">btn1</button>
    <button id="btn2">btn2</button>
    <button id="btn3">btn3</button>
  </body>
</html>

alt text

定时器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body></body>
  <script type="text/javascript">
    window.setTimeout(function () {
      console.log("window.setTimeout定时器");
    }, 1000);
    setTimeout(function () {
      console.log("window可以省略");
    }, 1000);
    var timmer = window.setInterval(function () {
      console.log("window.setInterval循环定时器，window可以省略");
    }, 1000);

    setTimeout(function () {
      clearInterval(timmer);
      console.log("清除定时器");
    }, 5000);
  </script>
</html>

alt text

this 指向

  • 一般情况下，this 的最终指向是调用它的那个对象。
  • 全局作用域或者普通函数中 this 只想全局对象 window（定时器中的 window 省略了，this 也指向 window）
var btn = document.querySelector("button");
btn.onclick = function () {
  //一般情况下，this的最终指向是调用它的那个对象
  console.log("一般情况:", this);
};

alt text

// 全局作用域或者普通函数中this只想全局对象window（定时器中的window省略了，this也指向window）
console.log("全局作用域：", this);
function fn() {
  console.log("普通函数:", this);
}
window.fn(); //和 fn(); 等价

alt text

js 的同步和异步

  • js 的同步是顺序执行，形成一个执行栈。
  • js 异步是通过回调函数实现的：
    • 普通事件，如 click，resize 等
    • 资源加载，如 load、error 等
    • 定时器，包括 setInterval, setTimeout 等

js 执行机制

  1. 先执行执行栈中的同步任务
  2. 异步任务（回调函数）放到任务队列（消息队列）中
  3. 执行栈中的同步任务执行完毕后，系统会按次序读取任务队列中的异步任务，然后被读取的异步任务进入执行栈开始执行
console.log(1);
setTimeout(function () {
  console.log(4);
}, 2000);
setTimeout(function () {
  console.log(3);
}, 1000);
console.log(2);

alt text