BOM和DOM

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

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

其实就是操作浏览器的一些能力

我们可以操作哪些内容：

- 获取一些浏览器的相关信息（窗口的大小）

- 操作浏览器进行页面跳转

- 获取当前浏览器地址栏的信息

- 操作浏览器的滚动条

- 浏览器的信息（浏览器的版本）

- 让浏览器出现一个弹出框（alert/confirm/prompt）

BOM 的核心就是 window 对象

window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

1、获取浏览器窗口的尺寸

innerHeight和innerWidth

这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

2、浏览器的弹出层

alert是在浏览器弹出一个提示框

confirm是在浏览器弹出一个询问框

prompt是在浏览器弹出一个输入框

3、浏览器的地址信息

在window 中有一个对象叫做location 

就是专门用来存储浏览器的地址栏内的信息的

location.href

location.href这个属性存储的是浏览器地址栏内url 地址的信息

location.href这个属性也可以给他赋值

location.reload

location.reload()这个方法会重新加载一遍页面，就相当于刷新是一个道理

（注意：不要写在全局，不然浏览器就会一直处在刷新状态）

4、浏览器的历史记录

window 中有一个对象叫做 history 

是专门用来存储历史记录信息的

history.back

history.back是用来会退历史记录的，就是回到前一个页面（前提要有历史记录）

history.forword

history.forword是去到下一个历史记录里面，也就是去到下一个页面

5、浏览器的版本信息（了解）

window 中有一个对象叫做 navigator

是专门用来获取浏览器信息的

navigator.userAgent

navigator.userAgent是获取的浏览器的整体信息

navigator.appName

navigator.appName获取的是浏览器的名称

navigator.appVersion

navigator.appVersion获取的是浏览器的版本号

navigator.platform

navigator.platform获取到的是当前计算机的操作系统

6、浏览器的onload 事件

这个不在是对象了，而是一个事件

是在页面所有资源加载完毕后执行的

7、浏览器的onscroll 事件

这个onscroll 事件是当浏览器的滚动条滚动的时候触发

或者鼠标滚轮滚动的时候出发（注意：前提是页面的高度要超过浏览器的可是窗口才可以）

[if !supportLists]8、[endif]浏览器滚动的距离

不是用window 对象，而是使用 document 对象

scrollTop（scrollLeft）

获取的是页面向上（左）滚动的距离

一共有两个获取方式

document.body.scrollTop

document.documentElement.scrollTop

区别：

IE 浏览器

没有DOCTYPE声明的时候，用这两个都行

有DOCTYPE声明的时候，只能用document.documentElement.scrollTop

Chrome 和 FireFox

没有DOCTYPE声明的时候，用document.body.scrollTop

有DOCTYPE声明的时候，用document.documentElement.scrollTop

Safari

两个都不用，使用一个单独的方法window.pageYOffset

9、定时器

在js里面，有两种定时器，倒计时定时器和间隔定时器

倒计时定时器

倒计时多少时间以后执行函数

语法：setTimeout(要执行的函数，多长时间以后执行)（单位毫秒）

会在你设定的时间以后，执行函数

间隔定时器

每间隔多少时间就执行一次函数

语法：setInterval(要执行的函数，间隔多少时间)

定时器的返回值

设置定时器的时候，他的返回值是部分setTimeout和setInterval的

只要有一个定时器，那么就是一个数字

关闭定时器

我们刚才提到过一个timerId，是表示这个定时器是页面上的第几个定时器

这个timerId 就是用来关闭定时器的数字

我们有两个方法来关闭定时器clearTimeout和clearInterval

DOM（Document Object Model）： 文档对象模型

getElementById

getElementById是通过标签的id 名称来获取标签的

因为在一个页面中id 是唯一的，所以获取到的就是一个元素

getElementsByClassName

getElementsByClassName是用过标签的class 名称来获取标签的

因为页面中可能有多个元素的class 名称一样，所以获取到的是一组元素

哪怕你获取的class 只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已

（ 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是伪数组

这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个div，需要用索引来获取）

getElementsByTagName

getElementsByTagName是用标签的标签名称来获取标签的

因为页面中可能有多个元素的标签名称一样，所以获取到的是一组元素

哪怕真的只有一个这个标签名，那么也是获取一组元素，只不过这一组中只有一个DOM 元素而已

querySelector

querySelector是按照选择器的方式来获取元素

也就是说，按照我们写css 的时候的选择器来获取

这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素

querySelectorAll

querySelectorAll是按照选择器的方式来获取元素

这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回

10、操作属性

通过我们各种获取元素的方式获取到页面中的标签以后

我们可以直接操作DOM 元素的属性，就能直接把效果展示在页面上

innerHTML

获取元素内部的HTML 结构

设置元素的内容

innerText

获取元素内部的文本（只能获取到文本内容，获取不到html 标签）

可以设置元素内部的文本

getAttribute

获取元素的某个属性（包括自定义属性）

setAttribute

给元素设置一个属性（包括自定义属性）

removeAttribute

直接移除元素的某个属性

style

专门用来给元素添加css 样式的

添加的都是行内样式

className

专门用来操作元素的类名的

也可以设置元素的类名，不过是全覆盖式的操作

在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖