JS-BOM详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ImmortalSYM/article/details/120342452

JS-BOM

BOM
—浏览器对象模型

—BOM可以使我们通过JS操作浏览器；

—在BOM中为我们提供了一组对象，用来完成浏览器的操作；

—BOM对象：
1. Window
—代表的整个浏览器窗口，同时window也是网页中的全局对象；
1. Navigator
—代表的当前浏览器信息，通过该对象可以识别不同的浏览器；
1. Location
—代表当前浏览器的地址栏信息，通过该对象可以获取地址信息或者操作浏览器跳转页面；
1. History
—代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录；由于隐私性，该对象不能获取具体历史记录，只能操作浏览器向前或者向后翻页；

—该操作只在当次访问中有效；
1. Screen
—代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息；（在移动端开发使用较多）

—以上BOM对象在浏览器中都是作为window全局对象的属性保存的；可以通过window对象使用，也可以直接使用；
Navigator
—由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了；

—只会使用userAgent属性来判断浏览器的信息；

—userAgent属性返回的是一个字符串，这个字符串中包含用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent；

—在IE11中的浏览器字符串中，已经将微软和IE相关的浏览器都已经去除了，所以基本已经不能通过userAgent来识别一个浏览器是否是IE了；

—如果通过userAgent不能判断，还可以通过浏览器中一些特有的对象来判断浏览器信息；比如ActiveXObject是IE浏览器中独有的；但是使用window.ActiveXObject在IE11中无法通过其判别，可以通过"ActiveXObject" in window；
```
<script>
	//判断浏览器
 var ua = navigator.userAgent;
 //使用正则表达式判断字符串，确定浏览器
 if (/Chrome/i.test(ua)){
     alert("你是Chrome浏览器");
 }else if(/firefox/i.test(ua)){
     alert("你是火狐浏览器");
 }else if(/MSIE/i.test(ua)){
     alert("你是IE浏览器");
 }else if("ActiveXObject" in window){
          alert("你是IE11");
          }
</script>
```
History
—该对象可以用来操作浏览器向前或者向后翻页；

—相关属性：

length属性：获取当次访问的网页链接的数量，仅当次；

—相关方法：
1. back()：可以用来回退到上一个页面，作用和浏览器的回退按钮相似；
2. forward()：可以用来跳转到下一个页面，作用和浏览器的前进按钮相似；
3. go()：可以用来跳转到指定的页面，需要整数作为参数：
1：表示向前跳转一个页面；相当于forward()

-1：表示向后跳转一个页面；相当于back()

正值表示向前跳转，负值表示向后跳转；
Location
—该对象封装了浏览器的地址栏信息；

—如果直接打印location，则可以获取地址栏信息（当前页面的完整路径）；

—同时可以修改路径地址，修改语法：location = （相对或者绝对）路径信息字符串，则页面会自动跳转到该路径；并且会生成相应的历史记录；

—相关属性（服务器相关）

—相关方法：
1. assign()：用来跳转到其他页面，其作用和直接修改location一样；里面传递的参数为新跳转的页面地址字符串；生成相应的历史记录；
2. reload()：重新加载当前页面，作用和刷新一样；传递参数true，则会强制清空缓存（Ctrl+F5），刷新页面（文本框的内容也会刷新）；
3. replace()：可以使用一个新的页面替换当前页面，但是他不会生成历史记录，不能通过回退按钮返回上一个页面；
window对象的方法
定时器简介

JS的执行速度是非常快的，如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用；

—setInterval()：

—定时调用，可以将一个函数每隔一段时间调用；

—需要参数：
1. 回调函数，该函数会每隔一段时间被调用一次；
2. 每次调用间隔时间，单位是毫秒；
—该方法会返回一个Number类型的数据；这个数字用来作为定时器的唯一标识；

clearInterval()：

—可以用来关闭定时器；

—需要传递定时器的标识作为参数，这样将关闭标识对应的定时器；

—clearInterval()可以接收任意参数（比如null、undefined）如果参数是一个有效的定时器标识，则停止对应的定时器；如果参数不是一个有效的定时器标识，则什么也不做；
延时调用

setTimeout()

—延时调用，一个函数不马上执行，而是隔一段时间在执行，只会执行一次；

—需要参数：
1. 回调函数；
2. 延时时间；
—它与定时调用的区别是，延时调用，只会执行一次，而定时调用会执行多次；

—延时调用也会返回一个Number类型数据；

clearTimeout

—关闭延时调用；

延时调用和定时调用可以相互代替的，在开发中可以根据自己需要进行使用；
相关项目

—我们将定时器写入了单击响应事件中，目前每点击一次按钮就会开启一个定时器，多次点击就会开启多个定时器，这就导致图片的切换速度过快，并且clearInterval()只能关闭最后一次开启的定时器；在开启一个定时器之前，需要将当前元素的上一个定时器关闭；

—定时器标识：如果定时器的标识由全局变量timer保存，所有正在执行的定时器都在该变量中保存；因此在局部函数对timer进行赋值时，可以采用obj.timer为对象自己本身进行定时器标识；

—图片轮播，判断索引切换：index = idex % imgArr.length;

—我们在定义定时器动画时，可以传递一个回调函数，该回调函数会在动画执行完毕后，才开始执行；利用这个特性可以实现多个动画，比如设置元素先变宽，在变高…；

类的相关操作

—通过style属性修改元素的样式，每修改一次，浏览器就需要重新渲染一次页面；这样执行的性能比较差，而且这种形式，当我们要修改多个样式时，也不太方便；

—可以通过修改元素的class属性实现样式的间接修改；这样一来只需要修改一次，即可同时修改多个样式；此时浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离；

例如：将元素修改的样式写入b2类中，然后将元素的属性名称改成b2类，即元素.className = "b2";

—实现在原有类的基础上，两个类的元素样式叠加，这里一定要注意加上空格：

元素.className += " b2"

定义函数，用来向元素中添加指定的class属性值

<script>
 //定义添加函数
 //参数
 //1.obj：要添加class属性的元素
 //2.cn：要添加的classs属性的属性名
	function addClass(obj,cn){
     //检查obj中是否含有cn
     if(!hasClass(obj,cn))}{
         obj.className += " cn"
     }
 }
 //定义判断函数，判断元素中是否含有指定的class属性
 //参数
 //1.obj：判断元素
 //2.cn：判断属性名
 function hasClass(obj,cn){
     //判断obj中是否存在特定的属性
     //如果有，返回true，否则返回false
     //创建正则表达式，进行判断；
     //通过构造函数创建正则表达式，\b为单词边界
     var reg = new RegExp("\\b"+cn+"\\b");
     return reg.test(obj.className);
 }
</script>

定义函数，删除元素中指定的class属性

<script>
	function removeClass(obj,cn){
     //创建正则表达式
     var reg = new RegExp("\\b"+cn+"\\b");
     //删除cn属性，使用replace()，用空串代替cn，即可删除cn属性
     obj.className = obj.className.replace(reg,"");
 }
</script>

定义函数，用于切换类

<script>
 //如果元素中存在该类，则删除
 //如果元素中没有该类，则添加
	function toggleClass(obj,cn){
     //判断是否存在该类
     if(hasClass(obj,cn)){
         removeClass(obj,cn);
     }else{
         addClass(obj,cn);
     }
 }
</script>