9. BOM and DOM 的概念

1. BOM

BOM 围绕 浏览器（窗口）Window 进行操作

BOM【Browser Object Model】浏览器对象模型

BOM 是干什么的： 操作浏览器的

BOM可以操作哪些内容：

        - 操作浏览器的滚动条

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

        - 浏览器的信息【浏览器的版本】

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

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

        - 让浏览器出现一个弹出框【 alert / confirm / prompt 】

BOM 的核心就是 window 对象

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

具体方法：

innerHeight / innerWidth	获取浏览器窗口的尺寸
window.innerHeight	表示窗口内容区域（浏览器窗口）的高度，包含滚动条的
window.innerWidth	表示窗口内容区域（浏览器窗口）的宽度，包含滚动条的
onload / onresize / onscroll	事件
onload	加载事件，是在页面所有资源加载完毕后执行的，用来判断加载完成了没
onscroll	滚动事件，当浏览器的滚动条滚动的时候触发，或者鼠标滚轮触发
onresize	尺寸，窗口改变大小时触发
scrollTop / scrollLeft	浏览器内容可以滚动，可以获取到浏览器滚动的距离
scrollTop	获取页面向上滚动的距离，获取方式在下面
scrollLeft	获取页面向左滚动的距离，获取方式在下面
alert / confirm / prompt	弹出层
alert	在浏览器中弹出一个警告框
confirm	在浏览器中弹出一个选择框，比如：确定或取消
prompt	在浏览器中弹出一个输入框
location / history	页面跳转
location	window.location / location.href / location.assign 跳转
	location.reload（true / false） true: 不经过浏览器缓存，从远程服务器加载数据
history	页面刷新： history.go ( 0 )
	后退： history.back （ ）
	前进： history.forword（）
window.scrollTo（）	window.scrollTo（ x , y ）;      xy是文档中的横纵坐标
	window.scrollTo（ options ）  ； options 一个包含三个属性的对象
options	1. top 等同于 y   2. left 等同于 x  3. behavior
window.open / window.close	open（ ） 打开新窗口
	close（ ）关闭当前窗口
localStorage	本地存储
sessionStorage	会话存储

滚动条的兼容

window.onscroll = function () {
    低版本兼容
  console.log(document.body.scrollTop)
    一般情况
  console.log(document.documentElement.scrollTop)
}


// left也一样

本地存储 与 会话存储 

本地存储	会话存储
理论上没有大小限制，实际上浏览器限制大小在 5 M	理论上没有大小限制，实际上浏览西限制大小在5M
数量没有限制	数量没有限制
不可在浏览器的隐私模式下查看，安全	不可在浏览器的隐私模式下查看，安全
有效期，长期有效	会话结束时，即退出页面时，数据即消失

如何在本地存储或会话存储中添加数据

1. window.localStorage.key = value

2. window.sessionStorage.key = value

3. window.localStorage['key'] = value

4. window.sessionStorage['key'] = value

5. window.localStorage.setItem(key,value)

6. window.sessionStorage.setItem(key,value)

如何获取本地存储或会话存储中的数据

1. window.localStorage.key

2. window.sessionStorage.key

3. window.localStorage['key']

4. window.sessionStorage['key']

5. window.localStorage.getItem(key)

6. window.sessionStorage.getItme(key)

如何删除本地存储或会话存储中的数据

1. window.localStorage.removeItem(key)

2. window.sessionStorage.removeItem(key)

清空

1. window.localStorage.clear()

2. window.sessionStorage.clear()

获取所有信息

1. key （） ： 获取key

2. length: 长度

for(let i = 0,len = window.localStorage.length;i <len ;i ++){
    let key = window.localStorage.key(i); //获取所有的key
    let value = window.localStorage.getItem(key); //获取所有的value
}

2.DOM  

DOM 的基本概念及操作： 重点了解

DOM【document】

DOM 目的： 获取元素

获取元素的方法

document.getElementById（' id '）	通过id获取对象
document.getElementsByTagName（' 标签名 '）	通过标签名获取元素对象的集合，返回伪数组,表单专属
document.getElementsByName（' name属性 '）	通过name属性获取元素对象的集合，返回伪数组
document.getElementsByClassName（' class名 '）	通过class属性获取元素对象的集合，返回伪数组【IE9以下不兼容】
document.querySelector（' 选择器 '）	通过选择器获取元素对象【IE8不兼容】
document.querySelectorAll（' 选择器 '）	获取选择器获取元素对象的集合，返回伪数组【IE8以下不兼容】