JavaScript中BOM的基础知识总结

一、什么是BOM

BOM（Browser Object Model）即浏览器对象模型。

BOM提供了独立于内容而与浏览器窗口进行交互的对象；

由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。

下面我是总结的一些基础知识，希望能够多多交流

         //1.系统对话框
         //alert() confirm() prompt()
//         alert(123);
//         confirm(456);//用户点击确定返回true 否则返回false
//         
//         prompt(789);//弹出一个让用户输入数据的对话框
         //没有输入返回空   点击取消返回null
         //第二个参数返回默认值
//         var num = prompt("返回输入的值","默认值");
//         alert(num);
        
        //print();//显示打印对话框
        //find();//显示查找对对话框
        
        
        
        
        
        ;

        //2.新建窗口
        //第二个参数给打开的窗口命名
        //window.open("http://www.baidu.com","qingkun");
        //window.open("tabs.html");
        //第三个参数用来设置新窗口的属性 
        //window.open("tabs.html","qingkun","width=300,height=300");
         
            
        
        
         //3.窗口的位置和大小
         //位置
         //IE,Google支持：screenLeft screenTop
         //alert(window.screenLeft);
         //alert(window.screenTop);
         
         
         //firefox  google支持screenX screenY
         //alert(window.screenX);
        // alert(window.screenY);
         
         
         //兼容性写法
//         var x = typeof screenLeft == "number"? screenLeft:screenX;
//         var y = typeof screenTop == "number"? screenTop:screenY;
//         alert(x+","+y);


        //获取窗口大小 IE8不支持
//        alert(window.innerHeight);//窗口页面高度
//        alert(window.innerWidth);//窗口页面宽度
        
//        alert(window.outerHeight);//窗口高度+边框高度
//        alert(window.outerWidth);//窗口宽度+边框宽度
        
        //IE 8
//        document.documentElement.clientHeight;
//        document.documentElement.clientWidth; 
        //IE 6
//        document.body.clientHeight
//        document.body.clientWidth

        //兼容性
//        var width = innerWidth;
//        var height = innerHeight;
//        if(typeof width != "number"){
//            if (document.compatMode == "CSS1Compat") {
//                width = document.documentElement.clientWidth;
//                height = document.documentElement.clientHeight;
//            }else{
//                width = document.body.clientWidth;
//                height = document.body.clientHeight;
//            }
//            
//        }





        //4.间隔调用和超时调用
        //超时调用  setTimeout
        //setTimeout("alert('123')",1000);
        
//        function show(){
//            alert(123);
//        }
//        setTimeout(show,1000);


//        var a = setTimeout(function(){
//            alert(123);
//        },1000);
//        alert(a);//返回一个唯一的整数值
//        clearTimeout(a);//清除超时调用


        
        //间隔调用 setInterval 重复执行
//        var b = setInterval(function(){
//            alert("hello");
//        },1000);
//        
//        setTimeout(function(){
//            clearInterval(b);
//        },1000);
//        




        //实现一个定时器的功能  5s
//        var s = 0;
//        var a = setInterval(function(){
//            s++;
//            if (s == 5) {
//                alert("计时结束");
//                clearInterval(a);
//            }
//        },1000);




        //location
        //window.location.href = "http://www.baidu.com?name=lisi&age=23";
        //alert(window.location);
        
//        alert(window.location.protocol);//协议
//        alert(window.location.hostname); //主机名
//        alert(window.location.port);//端口号
//        alert(window.location.pathname)//路径
        
        //alert(window.location.hash);//获取锚点
        //alert(window.location.search);//获取？后面
        
        //截取？后面
        
        function getSearch(){
            var arrs = {};
            //?name=lisi&age=23
             var str = window.location.search.length>0?window.location.search.substring(1):"";
             //alert(typeof str);
             var arr = str.split("=");
             
             var a = null,m = null,n = null;
             //alert(typeof arr)
             console.log(arr[1]);
             for (var i=0;i<arr.length;i++) {
                  a = arr[i].split("=");
                  m = a[0];
                  n = a[1];
                 arrs[m]=n;
             }
             return arrs;
        }
        var sss = getSearch();
        //console.log(sss);
        //alert(arrs["name"]);
//        alert(arrs["age"]);



        //2:
       var str = "name=qingkun&age=23";
       var arr = str.split("&");
       var arrs = {};
//     console.log(arr);
       for (var i=0;i<arr.length;i++) {
               var a = arr[i].split("=");
//             console.log(a);
            var m = a[0];
            var n = a[1];
            arrs[m] = n;
       }
      // alert(JSON.stringify(arrs));
       for (var j in arrs) {
//             console.log(j);
//             console.log(arrs[j]);
       }
       
       
       
       
       
       
       //改变地址栏中的地址
       function changeUrl(){
               window.location.href = "tabs.html";//当前窗口
               //window.open("tabs.html");//新窗口
//             window.location.assign("tabs.html");
//             window.location.replace("tabs.html");//不会生成历史记录
//             window.open("tabs.html");//新窗口
//            window.location.reload();//从缓存中加载
//            window.location.reload(true);//从服务器中加载
               
       }

JavaScript中BOM的基础知识总结

推荐阅读