BOM概述一

60 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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--当窗口大小发生改变时触发
 在开发响应式界面的网页中可以用这个事件进行检测