Web APIs---8. BOM

1 BOM概述

1.1 什么是BOM

1.2 BOM组成

BOM比DOM更大,它包含DOM

document.querySelector()

的完整写法是

window.document.querySelector()

window对象是浏览器的顶级对象,它具有双重角色

  • 1.它是JS访问浏览器的一个接口。
  • 2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • 在调用的时候可以省略window,前面学习的对话框都属于window方法,如:alert()、prompt()等。
  • window下的一个特殊属性window.name
  • document也是window中的一个对象

2 window对象的常见事件

2.1 窗口加载事件

window.onload = function(){}
//或者
window.addEventListener('load',function(){});
  • window.load 是窗口(页面)加载事件,当文档内容完全加载完成就会触发该事件(包括图像、脚本文件、CSS文件等),就调用该函数。

因此

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('点击我');
        });
    </script>
</body>

可以改写为

<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.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            });
        }
    </script>
</head>

<body>
    <button>点击</button>
</body>
  • JS放在任何位置都是没有问题的,因为onload是等页面内容全部加载完毕,再去执行处理函数。
  • window.load传统的注册方式只能写一次,如果有多个,会以最后一个window.onload为准。

3 定时器

4 JS执行机制

5 location对象

7 history对象

猜你喜欢

转载自www.cnblogs.com/deer-cen/p/12273000.html
bom