BOM 预习

BOM

---

前言

有关BOM的基本知识

---

一、BOM是什么？

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象
其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，javascript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部份

二、BOM的构成

window对象是浏览器的顶级对象，它具有双重角色

1. 它是js访问浏览器窗口的一个接口
2. 它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法

三、setTimeout（） 定时器

<script>
	//语法规范
  window.setTimeout(调用的函数，延长的时间)
</script>

注意：

1. 这个window在调用的时候可以省略
2. 这个延时时间单位是毫秒 但是可以省略，若省略默认是0
3. 这个调用函数可以直接写函数还可以写函数名
4. 页面中可能有很多定时器，我们经常给定时器加标识符

清除setTimeout定时器

<script>
	window.clearTimeout(timer);
</script>

四、调整窗口大小事件

<script>
	//传统方法
	window.onresize = function(){}
	
	window.addEventListener('resize', function () {})
</script>

五、setInterval（）定时器

<script>
	window.setInterval(回调函数,间隔毫秒数);
	window.setInterval(function(){
                console.log('Hello');
            },1000)
</script>

清除setInterval（）定时器

<script>
	clearInterval(timer);
</script>

六、Navigator 对象

Navigator 对象包含有关浏览器的信息

属性	描述
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
browserLanguage	返回当前浏览器的语言

更多Navigator 对象属性

七、Screen 对象

Screen 对象包含有关客户端显示屏幕的信息

属性	描述
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)

更多Screen 对象属性

八、Location 对象

Location 对象包含有关当前 URL 的信息
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）
host	设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名

更多Location 对象属性

九、History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问

属性	描述
length	返回浏览器历史列表中的 URL 数量

方法	描述
back()	加载 history 列表中的上一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

十、JS执行机制

JS 将代码分为同步任务和异步任务
同步任务：在主线程上执行，形成一个执行栈。
异步任务：将相关函数（回调函数）添加到任务队列中。

1. 普通事件，如click、resize等
2. 资源加载，如load、error等
3. 定时器，包括setInterval、setTimeout 等

---