JavaScript中的BOM使用总结

JavaScript

发布日期: 2018-04-24

文章字数: 973

阅读时长: 3 分

阅读次数:

BOM

BOM(浏览器对象模型):BOM将浏览器的各个功能特性转换成对象，进而使我们通过JavaScript来访问和操作浏览器，控制浏览器的行为。

window对象

window对象是BOM的核心，它表示一个浏览器的实例，代表的是整个浏览器窗口。在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。

setInterval

使用setInterval来每隔一段时间执行指定代码 :

                //每隔1s执行一次
                var num = 1;
                var count = document.getElementById("count");
                var timer = setInterval(function(){
                    count.innerHTML = num++;
                    if(num == 11){
                        //关闭定时器
                        clearInterval(timer);
                    }
                },1000);

setTimeout

使用setTimeout延时调用：

var timer = setTimeout(function(){
                console.log(num++);
            },3000);

            //使用clearTimeout()来关闭一个延时调用
            clearTimeout(timer);

navigator

navigator对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。通过该对象可以识别不同的浏览器，我们有时会使用navigator的userAgent属性来检查用户浏览器的版本。

        console.log(navigator.appName);//Netscape
    console.log(navigator.userAgent);//通过该属性判断浏览器
        //在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
    //如果navigator.userAgent不能判断，那么我们可以通过一些浏览器特有对象来判断
if(/firefox/i.test(ua)){
                alert("你是火狐！！！");
            }else if(/chrome/i.test(ua)){
                alert("你是Chrome");
            }else if(/msie/i.test(ua)){
                alert("你是IE浏览器~~~");
            }else if("ActiveXObject" in window){
                alert("你是IE11");
            }

history

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。我们可以通过操作该对象来操作浏览器的历史记录。但是由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页（该操作只在当次访问有效）。

history.length  //属性，可以获取到当成访问的链接数量
history.back()  //可以用来回退到上一个页面，作用和浏览器的回退按钮一样
history.forward() //可以用来回退到上一个页面，作用和浏览器的回退按钮一样
                    /*
                     * go()
                     *     - 可以用来跳转到指定的页面
                     *     - 它需要一个整数作为参数
                     *         1:表示向前跳转一个页面 相当于forward()
                     *         2:表示向前跳转两个页面
                     *         -1:表示向后跳转一个页面
                     *         -2:表示向后跳转两个页面
                     */
                    history.go(-2);

location

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

                    //如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
                    alert(location);



                     // 如果直接将location属性修改为一个完整的路径，或相对路径
                     //则我们页面会自动跳转到该路径，并且会生成相应的历史记录
                    location = "http://www.baidu.com";
                    location = "test.html";


                    //assign()用来跳转到其他的页面，作用和直接修改location一样
                    location.assign("http://www.baidu.com");



                    //reload()用于重新加载当前页面，作用和刷新按钮一样.
                    //如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
                    location.reload(true);


                //replace()可以使用一个新的页面替换当前页面，调用完毕也会跳转页面.
                //不会生成历史记录，不能使用回退按钮回退
                location.replace("test.html");