文章目录
BOM部分
一、BOM简介
Browser Object Model 浏览器对象模型
浏览器给我们提供的一套操作浏览器窗口的属性和方法。（BOM是一套操作浏览器的API（接口/方法/属性））
在客户端浏览器中，window 对象是访问 BOM 的接口，如引用 document 对象的 document 属性，引用自身的 window 和 self 属性等。同时 window 也为客户端 JavaScript 提供全局作用域。
BOM的最顶层对象是window，本质也是一个对象，当我们打开了一个页面，这个页面中就有window对象
对象是属性的无序集合。所有和BOM相关的api都是window.xxx。当我们在使用BOM中的属性时，window可以不写。
我们定义的全局变量，或全局函数，默认情况下，也是挂载到window上面的。
<script>
// 弹出框 理论上：window.alert(); window可以不写。
window.alert("Hello BOM~")
// a全局变量也会挂载到window上面
var a = 110;
console.log(window.a);
// 全局函数也会挂载到window上面
function gn(){
console.log("我是gn函数~");
}
window.gn();
</script>
二、常见的BOM对象
1 获取网页宽高
浏览器窗口的尺寸：
指的是 浏览器 容器的尺寸 和 body的尺寸是不一样的;
浏览器滚动条区域也是浏览器窗口的一部分，但是在MAC电脑上，是不算的。
| 两个属性： innerWidth inerHeight |
<script>
console.log(window.innerWidth);
console.log(window.innerHeight);
console.log("-------------");
console.log(innerWidth);
console.log(innerHeight);
</script>
2 浏览器的弹出层
window 对象定义了 3 个人机交互的方法，主要方便对 JavaScript 代码进行调试。
特点：阻止JS代码向下执行，因为JS的主线程是单线程。只有用户点击了取消或确定后，才会继续执行后续的代码。
2.1 alert()（警告框）：
确定提示框。由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。如果没有指定参数，则弹出一个空的对话框。返回值是undefined。
2.2 confirm()（选择框）：
选择提示框。由浏览器向用户弹出提示性信息，弹出的对话框中包含两个按钮，分别表示“确定”和“取消”按钮。如果点击“确定”按钮，则该方法将返回 true；单击“取消”按钮，则返回 false。confirm() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个空的对话框。
2.3 prompt()（输入框）：
输入提示框。可以接收用户输入的信息，并返回输入的信息。prompt() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个没有提示信息的输入文本对话框。
弹出一段文本， 有一个input输入框，有一个确定按钮，也有一个取消按钮。 如果用户点击了确定，返回值就是输入框中输入的内容，如果用户点击了取消，返回值就是null。
<script>
alert("这是alert()！");
confirm("这是confirm()！");
prompt("这是prompt()！");
</script>
3 浏览器的地址栏
浏览器的地址栏：
在浏览器的地址栏中，可以输入一个URL地址。如：https://www.jd.com/
https/http: 协议 电脑与电脑之间通信的规则 前后端交互的一个规则
www.jd.com 域名 IP地址（每一个服务器都有一个IP地址） 域名是和IP地址进行绑定 通过域名就可以找到对应的IP
再看一个复杂的地址：
https://list.jd.com/list.html?cat=737,794,878&ev=266_2340&page=1&trans=1&JL=4_1_0#J_main
/list.html 访问list.js.com这台服务器下面的list.html 路径
?cat=34134 & ev=23434 & page=1 & trans=1 查询字符串（querystring） 把数据传递给后端
#abc 哈希值
再看一个地址：http://127.0.0.1:5500/02-BOM/04-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9C%B0%E5%9D%80%E6%A0%8F.html
127.0.0.1 是一个特殊的IP地址，代表本机的IP，这个IP有一个特殊的域名，叫localhost。
:5500 表示一个端口
%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9C%B0%E5%9D%80%E6%A0%8F：是对中文进行了编码
在window下面的有一个属性，叫location，也是一个对象，它里面存储着和地址相关的信息。
hash: 获取当前url中的hash值
href：获取当前浏览器地址栏中的地址
如果地址中有中文，浏览器会对中文进行编码
也可以设置这个href，如果设置了，可以进行页面的跳转。
search: 获取地址栏中的查询字符串（querystring）
解析查询字符串：就是把字符串中的数据提取出来。
reload: 重新加载页面 说白了，就是刷新 和点击刷新按钮效果是一样的
<button id="btn">去百度</button>
<button id="btn2">重新加载页面</button>
<script>
console.log(window.location);
let btn = document.getElementById("btn")
btn.onclick = function () {
console.log("....");
// 重新设置href
window.location.href="http://www.baidu.com"
console.log(window.location.search);
}
</script>
<script>
let btn2 = document.getElementById("btn2")
btn2.onclick = function () {
window.location.reload();//刷新（重新加载页面）
}
</script>
4 浏览器的历史记录
浏览器的历史记录：
操作浏览器的前进和后退。在window下有一个叫history的东西。
也是一个对象，它里面也包含了很多的属性和方法。
back()
window.history.back() 回到上一条历史记录
forword()
window.history.forward() 前进到下一条历史记录
go()
window.history.go(整数)
go(1) 等价于 forword()
go(-1) 等价于 back()
<script>
let back = document.getElementById("back")
let forword = document.getElementById("forword")
back.onclick = function () {
window.history.back()
// window.history.go(-1)
}
forword.onclick = function () {
window.history.forward()
// window.history.go(1)
}
</script>
5 浏览器的版本信息
浏览器的版本信息：
是用来区分浏览器的
在window上，有一个navigator对象，存储了浏览器的版本信息
| console.log(window.navigator); |
userAgent:表示浏览器的版本和型号信息：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36
platform:表示浏览器所在的操作系统：(win64或win32)
6 浏览器常见的事件
浏览器常见的事件：
6.1 load事件（window.onload）
on表示前缀 load表示事件，load本意是加载的意思 onload表示等待body中的所有的资源全部加载完毕就行触发load事件。
这个表示加载完页面所有东西以后才执行，在页面只允许出现一个onload函数，因为它可编函数个数只有一个：
为什么使用 window.onload()?
因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
6.2 scroll事件（window.onscroll）
当浏览器的滚动条滚动时触发，用的非常多。
6.3 resize事件（window.onresize）
表示浏览器的窗口大小发生改变时触发。
<html>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
html {
height: 100%;
}
body {
height: 300%;
}
</style>
<script>
// 问：能不能获取下面的button
// 答：不能 因为button按钮还没有加载完毕
// 解决办法：1）把JS代码放在最后面 2）使用load事件
// let load = document.getElementById("load")
// console.log(load);
console.log("start");
// 事件绑定：是异步代码
// on表示前缀 load表示事件 当body中所有的资源全部加载完毕后，就会触发load事件
window.onload = function () {
// console.log("load事件");
let load = document.getElementById("load")
console.log(load);
}
console.log("end");
window.onscroll = function () {//scroll事件 当浏览器的滚动条滚动时触发
console.log("滚动条滚动~");
}
window.onresize = function () {//resize事件 当浏览器的窗口大小发生改变时触发
console.log("浏览器窗口大小发生了改变~");
}
</script>
</head>
<body>
<button id="load">load事件</button>
<script>
// 把JS代码放在最后面，就可以获取DOM元素
let load = document.getElementById("load")
console.log(load);
</script>
</body>
</html>
7 浏览器卷去的高度
当页面比窗口宽或高时，就会产生滚动条
向下滑动垂直滚动条，页面就向下钻，它钻上去的高度，叫卷去的高度
向右滑动水平滚动条，页面就向左钻，它钻过去的宽度，叫卷去的宽度
7.1 卷去的高度：
两个方式可以获取：
1）document.documentElemnt.scrollTop 如果有<!DOCTYPE html>标签，使用document.documentElemnt.scrollTop
2）document.body.scrollTop 如果没有<!DOCTYPE html>标签，使用document.body.scrollTop
7.2 卷去的宽度:
两个方式可以获取：
1）document.documentElemnt.scrollLeft
2）document.body.scrollLeft
<script>
window.onscroll = function(){
// console.log(document.documentElement.scrollTop);
// console.log(document.body.scrollTop);//卷去的高度
// console.log(document.documentElement.scrollLeft);
// console.log(document.body.scrollLeft);//卷去的宽度
// document.documentElement.scrollTop 为真 整体就F为真 不会计算document.body.scrollTop
// 整体的值就是document.documentElement.scrollTop
// 如果document.documentElement.scrollTop不存在，整体的值也不能决定 取决后后面的值
// 整体的值就是document.body.scrollTop
// 兼容性写法
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);//卷去的高度
let scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
console.log(scrollLeft);//卷去的宽度
}
</script>
扫一扫
2162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
