DOM 和 BOM 的区别 window对象事件

最新推荐文章于 2022-01-07 16:14:33 发布

原创最新推荐文章于 2022-01-07 16:14:33 发布 · 471 阅读

1 ·

CC 4.0 BY-SA版权

本文深入探讨了DOM（文档对象模型）与BOM（浏览器对象模型）的区别与应用。DOM负责处理网页中的HTML标签，而BOM则允许JavaScript操作浏览器窗口，包括窗口的打开、关闭及内容的刷新。文章还介绍了window对象的使用，如onload事件监听网页资源加载，以及location.href和location.reload()等方法。

DOM（document）
BOM（browser objec model）
两者的区别：
浏览器相当于一个容器，html代码相当于容器中的内容，html页面在放入浏览器中显示的时候，会将html代码解析成为一个对象DOM（document）,DOM对象针对的时候网页中的标签内容，标签的所有操作都可以通过document完成
BOM 浏览器对象模型
js 除了能够通过DOM操作标签节点外，还可以用来操作浏览器，能够直接操作浏览器的对象称之为BOM对象，可以控制打开窗口，关闭窗口，前进，后退
列如：window 对象就是个BOM对象
window中的事件
onload 等待网页所有资源内容加载完成以后执行，（图片，音频，css文件，js文件资源文件）
window.onload = function(e){
}

ready 当标签节点加载完成以后执行，不会等待资源加载
document.ready = function(e){
}
onresize 重置浏览器窗口大小
window.onresize = function(e){
console.log(“浏览器窗口大小改变了！”)
console.log(document.documentElement.clientWidth)
location href 切换浏览器当前窗口地址
location.reload() 刷新页面
replace 替换新的网址
location.replace(“http://www.baidu.com”)
navigator对象记录浏览类型/内核/操作系统等信息