BOM概述 DOMBOM
文档对象模型
浏览器对象模型
DOM 就是把 文档 当作一个对象来看待
把 浏览器当作一个对象来看待
DOM 的顶级对象是 document
BOM 的顶级对象是 window
DOM 主要学习的是操作页面元素
BOM 学习的是浏览器窗口交互的一些对象
DOM 是 W3C 标准规范
BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差
// 定义在全局作用域中的变量会变成window对象的属性
var num = 10;
console.log(window.num);
// 10
// 定义在全局作用域中的函数会变成window对象的方法
function fn() {
console.log(11);
}
console.fn();
// 11
var name = 10; //不要用这个name变量,因为window下有一个特殊属性window.name
console.log(window.urname);
window 对象的常见事件 窗口加载事件
window.onload = function(){
};
// 或者
window.addEventListener("load",function(){
});window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。
document.addEventListener('DOMContentLoaded',function(){
})区别
// window.onload = function() {
// var btn = document.querySelector('button');
// btn.addEventListener('click', function() {
// alert('点击我');
// })
// }
// window.onload = function() {
// alert(22);
// }
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更快一些调整窗口大小事件
window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
window.onresize = function() {}
// 或者
window.addEventListener('resize',function(){});
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth!
发表评论