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为准。