JavaScript中的BOM浏览器对象模型——0523笔记整理

一、什么是BOM?

BOM是浏览器对象模型（Browser Object Model ）。
BOM元素分为：window（document、history、location）。

二、window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
（以上段落摘自菜鸟）

window里面的方法或者属性，写的时候可以不写window对象。

window里边定义的全局变量和方法：

1、弹框

alert("警告框！"); 警告框
prompt("请输入您的价格",1); 带输入框的提示框，点击确定，返回值是字符串类型
confirm("确定删除？"); 提示信息框，返回值是true false

2、网页打开关闭的方法

open("https://www.baidu.com","打开百度"); 打开指定的网页
close(); 关闭当前网页

3、非行内样式的获取

window.getComputedStyle() 有两个参数：该对象对应的变量名称（获取该对象样式）、伪元素（查找伪元素，可写可不写，也可写null）

例如：
console.log(window.getComputedStyle(btn).width); 获取该对象的非行内样式
console.log(window.getComputedStyle(btn, ":after").position); 获取该对象伪元素的样式

4、获取用户网页选择的内容

window.getSelection(); 获取用户网页选择的内容

5、window尺寸相关问题

1、innerWidth 、innerHeight 网页可视区域的宽和高。
2、screen对象的屏幕尺寸
screen.availHeight、screen.availWidth不包含任务栏的宽和高；screen.height、screen.width指实际的宽和高。

宽和高的其它获取方式：
（1）获取可视区域的宽和高：

document.documentElement.clientWidth 获取网页可视区域的宽
document.documentElement.clientHeight 获取网页可视区域的高

（2）获取dom元素的宽和高：

获取实际的宽和高使用offset
document.body.offsetWidth
document.body.offsetHeight
获取不包含边框的宽和高 使用client
document.body.clientWidth
document.body.clientHeight

（3）样式里边的宽和高

6、navigator对象获取当前设备的相关信息

console.log(navigator);
navigator 对象是获取当前设备的相关信息，包含有关浏览器的信息。

7、window对象里边的计时器

window对象里边的计时器分为：一次性计时器、循环计时器、帧计时器。

requestAnimationFrame 在浏览器失去焦点的时候 会自动暂停
setInterval 和 setTimeout 不会自动暂停

（1）一次性计时器（setTimeout）

延迟多长时间去执行；
用一个变量去接收这个计时器，在控制台输出这个变量，返回值是数字；

<script>
    var time=setTimeout(function(){
   
        console.log(1);
    },1000);
    console.log(typeof time);
</script>

函数也可以写到计时器外边

<script>
    setTimeout(showdata,1000);
    function showdata(){
   
        console.log(2);
    };
</script>

注意：

上例中计时器的第一个参数是函数名称，不能写成showdata()，否则计时器无效
但可以写成 setTimeout("showdata()",1000);

（2）计时器里边的this指针

计时器里边的 this 指针指向的是window对象