JS原生的BOM操作

一.获取浏览器可视窗口尺寸

获取可视窗口宽度：window.innerWidth
获取可视窗口高度：window.innerHeight

        //获取可视窗口宽度
        var w=window.innerWidth
        //获取可视窗口高度
        var h=window.innerHeight
        //输出
        console.log(w)
        console.log(h)

二.浏览器的弹出层

提示框：window.alert(‘提示信息’)

window.alert('皮蛋瘦肉粥')

询问框：window.confirm(‘提示信息’)

• 点击确定：返回值为true
• 点击取消：返回值为false

        window.confirm('你是皮蛋瘦肉粥吗？')

输入框：window.prompt(‘提示信息’)

• 点击确认：返回值为输入的内容
• 点击取消：返回值为null

window.prompt('你wifi密码多少？')

三.开启和关闭标签页

开启：window.open(‘地址’)
关闭：window.close()

四.浏览器的常见事件

资源加载完毕：window.οnlοad=function(){}
可视尺寸改变：window.οnresize=function(){}
滚动条位置改变：window.οnscrοll=function(){}

五.浏览器的历史纪录操作

回退页面：window.history.back()
前进页面：window.history.forward()
相当于浏览器的左右箭头

六.浏览器卷去的尺寸

卷去的高度：

• document.documentElement.scrollTop
• document.body.scrollTop

当页面有 !DOCTYPE html 时 用 document.documentElement.scrollTop

当页面没有 !DOCTYPE html 时 用 document.body.scrollTop

所以，兼容写法就是用“||”运算符连接

document.documentElement.scrollTop||document.body.scrollTop

卷去的宽度：

• document.documentElement.scrollLeft
• document.body.scrollLeft

document.documentElement.scrollLeft||document.body.scrollLeft

ps:规则同卷去的高度一样

七.浏览器滚动到

滚动到：window.scrollTo(参数)

• 参数方式1：window.scrollTo(left,top)

window.scrollTo(300,400)

• 参数方式2：window.scrollTo({
  left:xx,
  top:yy,
  behavior:‘smooth’
  })

        window.scrollTo({
             left:300,
             top:400,
             behavior:'smooth'//表示平滑滚动
            })

以上就是js对BOM操作比较常用的方法