bom和dom

---

bom： 操作浏览器

brower object model 浏览器对象模型

提供一套操作浏览器的功能的api
通过人家提供的api,我们就可以做一个弹出框，控制浏览器的跳转，获取屏幕的分辨率等....

---

dom: 操作html文档

document object model 文档对象模型

文档：html文档  说白了，就是你之前写的Html代码
object：对象 html文档中的元素   js中一切都是对象
model:模型 树模型

---

bom:

浏览器对象模型  提供大量的api可以操作浏览器window对象下面还有几个子对象。
学习bom就是学习如下几个子对象：
    navigator location history screen...

---

window:

浏览器中最最最顶级的一个对象，代表整个浏览器的窗口，同时，也是网页中的一个全局对象。
注意：我们要使用window对象中的api时，window可以不写。

---

window：

之前用过的api:
    alert()
    prompt()
    confirm();

事件：
    onload
    onunload

定时器：
    setTimout()  clearTimout()
    setInterval()  clearInterval()

打开关闭窗口：
    window.open("url")
    window.close

---

location:

定位的意思  代表浏览器地址栏信息，可以通过location获取地址栏信息，也可以操作浏览器的进行跳转。

---

获取location对象：

console.log(location)

---

跳转：

location.href = "http://www.baidu.com"

---

reload():

重新加载页面，类似于刷新按钮。

带参数：

reload(true):
    强制刷新，清掉缓存  
    f5普通刷新（不能清缓存）
    ctrl+f5:强制刷新（能清缓存）

---

栈：

---

push():

---

replace():

replace本意是替换的意思，使用一个新的页面，替换本页面。

---

总结location:

1）获取location对象   网页中直接window.location   window可以不写
2）url的跳转  location.href = "xxx"
3）reload   刷新    reload(true) 强制刷新
4）replace   url的替换  栈  出栈  入栈  两栈

---

history对象：

重要   vue-router  react-router-dom  路由
操作浏览器的前进和后退按钮。
api:
    length: 获取当前访问的链接数据
    back(): 回退到上一个页面，作用和浏览器的后退按钮一样
    forward(): 跳转到下一个页面，作用和浏览器的前进按钮一样
    go:
        1:  表示向前跳转一个页面
        2:  表示向前跳转两个页面
        -1:  表示向后跳转一个页面
        -2:  表示向后跳转两个页面

---

navigator：

代表当前浏览器的信息，通过navtigator获取你是什么样的浏览器

通过window.navigator.userAgent就可以判断出你是什么样的浏览器。

不只可以判断你是PC端的什么浏览器，主要是用来判断，你是移动端浏览器还是PC端浏览器。

www.taobao.com:
    在PC端：  www.taobao.com
    在手机端： 判断是否是使用手机来访问的taobao.com  如果是
        重定向到，https://main.m.taobao.com/

---

需要大家掌握的api:

1. location.href = “xxx”
   2）history.back()
   3）history.go(-1)
   4）history.go(1)
   5）window.navigator.userAgent

---