BOM的概念和常用API

BOM

• BOM（Browser Object Model）： 浏览器对象模型
  
• 其实就是操作浏览器的一些能力
  
• 我们可以操作哪些内容

• 获取一些浏览器的相关信息
  

• （窗口的大小）
  
• 操作浏览器进行页面跳转 lication
  
• 获取当前浏览器地址栏的信息 navigtor
  
• 操作浏览器的滚动条
  
• 浏览器的信息（浏览器的版本）
  
• 让浏览器出现一个弹出框（a
  

• lert / confirm / prompt）
  
• ...
  

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

innerHeight / innerWidth ： 获取浏览器窗口的尺寸

window.innerHeight： 表示窗口内容区域（浏览器窗口）的高度，包含滚动条的。 window.innerHeight：: 表示窗口内容区域（浏览器窗口）的宽度，包含滚动条的。

文档区域的可视高与可视宽度,(不包含滚动条)

document.documentElement.clientheight document.documentElement.clientwidth

var windowHeight = window.innerHeight
console.log(windowHeight)
​
var windowWidth = window.innerWidth
console.log(windowWidth)

onload / onresize / onscroll 事件

onload : 加载事件

是在页面所有资源加载完毕后执行的
window.onload = function () {
  console.log('页面已经加载完毕')
}

onscroll : 滚动事件

• 这个 onscroll 事件是当浏览器的滚动条滚动的时候触发
  
• 或者鼠标滚轮滚动的时候触发
  
• 注： 必须有滚动条时，才可触发

window.onscroll = function () {

 console.log('浏览器滚动了')

}

浏览器滚动的距离

• 浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离
  
• 思考一个问题？

• 浏览器真的滚动了吗？
  
• 其实我们的浏览器是没有滚动的，是一直在那里
  

• 滚动的是什么？是我们的页面
  
• 所以说，其实浏览器没有动，只不过是页面向上走了
  

• 所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
  

• 所以不是在用 window 对象了，而是使用 document 对象
  

浏览器卷去的尺寸 scrollTop / scrollLeft

scrollTop

• 获取的是页面向上滚动
  
• 的距离
  
• 一共有两个获取方式
• document.body.scrollTop
  
• document.documentElement.scrollTop
  

window.onscroll = function () {

 console.log(document.body.scrollTop)

 console.log(document.documentElement.scrollTop)

}

• 两个都是获取页面向上滚动的距离
  
• 区别：

• IE 浏览器

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

• document.documentElement.scrollTop
  

• Chrome 和 FireFox

• 没有 DOCTYPE 声明的时候，用
  

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

scrollLeft

• 获取页面向左滚动的距离
  
• 也是两个方法
• document.body.scrollLeft
  
• document.documentElementLeft
  
• window.onscroll = function () {

 console.log(document.body.scrollLeft)

 console.log(document.documentElement.scrollLeft)

}

两个之间的区别和之前的 scrollTop 一样

alert / confirm / prompt 弹出层

alert() : 在浏览器中弹出一个警告框。

confirm() : 在浏览器中弹出一个选择框。

prompt() : 在浏览器中弹出一个输入框。

练习（面试题）

在界面上弹出一个带输入的提示框,只能输入数字,如果输入的数字大于10,点击确定以后，弹出提示框,提示我们是否进行输入的数 + 10, confirm("是否进行输入的数 + 10")

<1>如果点击确定,输出表达式和结果,

<2>如果点击取消,重新弹出带输入的提示框，重复上述操作

如果输入的数小于10,直接弹出警告框,无法运算

点击取消,就不进行后面操作。直接退出循环

// if(confirm('你现在正在摸鱼吗？')){ // alert('我正在摸鱼，摆烂'); // }else{ // alert('我没有摸鱼，我在好好听林哥讲课'); // }</div><div><br /></div><div>    /*</div><div>        在界面上弹出一个带输入的提示框,只能输入数字,如果输入的数字大于10,点击确定以后，弹出提示框,提示我们是否进行输入的数 + 10, confirm("是否进行输入的数 + 10")</div><div>        •         <1>如果点击确定,输出表达式和结果,</div><div>        •         <2>如果点击取消,重新弹出带输入的提示框，重复上述操作  </div><div>        •          如果输入的数小于10,直接弹出警告框,无法运算</div><div>        点击取消,就不进行后面操作。直接退出循环</div><div>    */</div><div>while(1){</div><div>    // 一个带输入的提示框</div><div>    var n = prompt('请输入一个数字');</div><div>    //点击取消,就不进行后面操作。直接退出循环</div><div>    if(!n){</div><div>        break;</div><div>    }</div><div>    //判断是否为数字 只能输入数字</div><div>    if(!isNaN(n)){ //数字</div><div>        // 如果输入的数字大于10</div><div>        if(n > 10){</div><div>            // 提示我们是否进行输入的数 + 10</div><div>            if(confirm("是否进行输入的数 + 10")){</div><div>                // <1>如果点击确定,输出表达式和结果,</div><div>                alert(n + '+' + 10 + '=' + (Number(n) + 10));</div><div>            }</div><div>        }else{</div><div>            alert('无法运算');</div><div>        }</div><div>    }</div><div>}</div><div>

location / history

1. location 对象 :负责地址栏管理

页面跳转

• window.location = '地址'
  
• location.href = '地址'
  
• location.assign('地址')
  

刷新页面

• ocation.reload([true]) true: 不经过浏览器缓存，从远程服务器加载数据。 false(默认值):从浏览器的本地缓存中加载数据。
  

1. history 对象

• 页面刷新 : history.go(0) 填0 进行刷新 正数前进.负数倒退
  

• 后退： history.back() 每次调用只前进一页
  
• 前进：history.forword() 每次调用只后退一页
  

window.scrollTo()

1. 语法：
   

window.scrollTo(x,y)

window.scrollTo(options)

1. 参数：
   

• x : 文档中的横轴坐标
  
• y : 文档中的纵轴坐标
  
• options : 一个包含三个属性的对象：

2. top : 等同于 y
   
3. left : 等同于 x
   
4. behavior类型 String，表示滚
   

1. 动行为，支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto
   

window.open / window.close

1. open('跳转地址') : 打开新窗口
   

1. close('跳转地址') : 关闭当前窗口
   

#ES5新增

本地存储 localStorage / sessionStorage的基本使用

localStorage : 本地存储

1. 理论上没有大小限制，实际上浏览器限制大小在5M
   
2. 数量没有限制
   
3. 有效期，长期有效
   
4. 不可在浏览器的隐私模式下查看，安全
   

sessionStorage : 会话存储

1. 理论上没有大小限制，实际上浏览器限制大小在5M
   
2. 数量没有限制
   
3. 会话结束时，即关闭浏览器（退出页面）时，数据消失
   

1. 不可在浏览器的隐私模式下查看，安全
   

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

1. window.localStorage.key = value
   
2. window.sessionStorage.key = value
   
3. window.localStorage['key'] = value
   
4. window.sessionStorage['key'] = value
   

1. window.localStorage.setItem(key,value)
   
2. window.sessionStorage.setItem(key,value)

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

1. window.localStorage.key
   
2. window.sessionStorage.key
3. window.localStorage['key']
   

1. window.sessionStorage['key']
   

1. window.localStorage.getItem(key)
   
2. 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
   

本地储存信息取出

1. length : 长度

for(let i = 0,len = window.localStorage.length;i

   let key = window.localStorage.key(i); //获取所有的key

   let value = window.localStorage.getItem(key); //获取所有的value

}

DOM的基本概念及操作

dom 文档对象模型

获取元素

1. document.getElementById('id') : 通过id获取元素对象
   
2. document.getElementsByTagName('标签名') : 通过标签名获取元素对象的集合，返回伪数组。
   
3. document.getElementsByName('name属性') : 通过name属性获取元素对象的集合，返回伪数组。
   
4. document.getElementsByClassName('class名') : 通过class属性获取元素对象的集合，返回伪数组 (IE9以下不兼容)

//byClassName的兼容
function byClassName(obj,className){
    if(obj.getElementsByClassName){
        //支持
        return obj.getElementsByClassName(className);
    }else{
        //不支持
        //1. 获取所有节点对象
        var eles = obj.getElementsByTagName('*');
        //创建一个空数组
        var arr = [];
        //遍历所有对象
        for(var i = 0,len = eles.length;i < len;i ++){
            //检测
            if(eles[i].className === className){
                arr.push(eles[i]);
            }
        }
        return arr;
    }
}

1. 1.document.querySelector('选择器') : 通过选择器获取元素对象。 （IE8以下不兼容）
   
2. 2.document.querySelectorAll('选择器') : 获取选择器获取元素对象的集合，返回伪数组。（IE8以下不兼容）