JavaScript基础---BOM

BOM  （Browser Object Model )浏览器对象模型

 

①警告框 window.alert(' ')

   控制器打印 console.log(' ')

   确认 confirm(' ')

   提示信息 prompt(' ')

 

②  1,打印 print（） //链接到打印机

       2,打开 open('https://www.baidu.com')    //打开一个链接，类似a标签

             该方法可以接收 4 个参数：

              1、要加载的 URL

              2、窗口目标 _self  _blank

              3、一个特性字符串

              4、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

                  通常只须传递第一个参数

      3,关闭窗口 close()

 

③location对象      （包含有关当前 URL 的信息）

location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问

获取地址栏 url 的信息

var url = location;

console.log(location.href);// 设置或返回完整的 URL   （即可以获取，也可以设置，可以跳转到其他链接 ）

console.log(location.hash);// 设置或返回从井号 (#) 开始的 URL（锚） （包括#）

console.log(location.search);// 设置或返回从问号 (?) 开始的 URL（查询部分） （包括？）

 

④滚动条高度 scroll

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

   说明：谷歌认为滚动条的距离只有body有，而其它浏览器认为是html有，所以这里要做一个兼容。

   另外：这个滚动条的距离是可以设置的：

   例：document.documentElement.scrollTop = 100;

         document.body.scrollTop = 100;

 

⑤元素的三种宽度

元素.style.width   样式宽，带单位，必须是行内样式的宽度值

元素.clientWidth  可视区宽，不带单位，即=样式宽+padding，通过css计算出来的宽度值

元素.offsetWidth  占位宽，不带单位，即=样式宽+padding+border，通过css计算出来的宽度值

scrollWidth ----- 内容的实际宽度

 

⑥可视区尺寸：（没有兼容问题）

document.documentElement.clientWidth

document.documentElement.clientHeight

注意是document.documentElement的，而不是document的，我们可以这样想，数组有宽高吗？同理，document对象也是没有宽高。只有document对象下面的元素documentElement才有宽高。