开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第3天,点击查看活动详情
BOM概述一
BOM(browser Object Model) 浏览器对象模型
操作内容
1.浏览器可视化窗口的大小
2.让浏览器出现一个弹出框(alert/prompt/confirm)
3.获取当前浏览器地址栏的信息
4.浏览器的常用事件
BOM的核心就是window对象
window是浏览器内置的一个对象,里面包含了操作浏览器的方法
浏览器可视化窗口的大小
可视化窗口的大小呢,就是要注意是窗口可以展示内容的地方
console.log(window.innerWidth,innerWidth);
//在控制台中打印可视窗口的宽度
console.log(window.innerHeight,innerHeight);
//在控制台中打印可视窗口的高度
浏览器的弹出层
常用的三种弹出层:
1.alert(弹出一个对话框)
常用于提示框
2.confirm (弹出一个选择框)
一个是否选择框,就只有两个选项无法自己输入,点击之后会将你的
选择保存在浏览器中
3.prompt (弹出一个输入框)
一个输入框,可以自己输入,同样会将你输入的内容保存在浏览器中
浏览器的地址栏
两个属性:
href--获取地址属性
console.log(location.href);
--在控制台中输出网页的地址,如果地址中有中文的话会转成编码编译
reload--重新加载
--我们一般用到的不会太多,
--在这我们假装他这里有一个鼠标单击事件,
btn2.onclick=function(){
location.reload
}
浏览器的常用事件
onload--窗口加载完毕时触发
可以用于一些网页打开时的一些提醒
resize--当窗口大小发生改变时触发
在开发响应式界面的网页中可以用这个事件进行检测