JS BOM浏览器对象模型，常用功能及案例

JS BOM浏览器对象模型

BOM输出

语法	作用
alert(内容)	弹窗提示
confirm(内容)	同alert()有取消按钮，点击确定true 点取消false
console.log(内容)	浏览器调试 常用
var 返回输入 = prompt('弹窗信息','输入框默认值')	弹窗并需要输入

open_close 网页

open('https://www.baidu.com');//打开百度网页，winodow对象可以省略
//行间的js中的window不能省略
<button onclick="window.open('https://www.baidu.com/')">百度</button>

//打开空白页面
open('about:blank',"_self")

//关闭当前页面
close();
//行间js中的window还是不能省略
<button onclick="window.close()">关闭</button>

跳转 + 获取用户信息

//返回浏览器的用户设备信息
console.log(window.navigator.userAgent)

//经常使用的一个方法，跳转网页
window.location.href = 'https://www.baidu.com';

窗口client

可以通过标签，直接获取其，长宽高等窗口信息

var oBox = document.getElementsByClassName('box')[0];

oBox.clientTop //内容区域到边框顶部的距离
oBox.clientLeft  //内容区域到边框左部的距离
oBox.clientWidth  //内容区域+左右padding   可视宽度
oBox.clientHeight  //内容区域+ 上下padding   可视高度

屏幕的可视区域

//onload等加载页面完成后再执行
window.onload = function(){
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);

    window.onresize = function(){

        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
    }
}

scroll 滚动

onscroll 滚动监听,滚动的宽高

window.onload = function(){ 
    //实施监听滚动事件
    window.onscroll = function(){
        console.log(1111)
        console.log('上'+document.documentElement.scrollTop)
        console.log('左'+document.documentElement.scrollLeft)
        console.log('宽'+document.documentElement.scrollWidth)
        console.log('高'+document.documentElement.scrollHeight)

    }
}