BOM对象

最新推荐文章于 2024-07-16 19:07:40 发布

原创最新推荐文章于 2024-07-16 19:07:40 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

javaScript 专栏收录该内容

37 篇文章

订阅专栏

BOM对象也就是浏览器对象，但是由于浏览器的供应商对整个对象都有自己的一些扩展，导致许多不兼容的性质，所以我们只能使用浏览器共有的方法。BOM本身没有标准的定义

window对象

js中最顶层的对象
window的6大属性，这些属性本身就是对象
window下的属性和方法可以使用window.属性或者方法也可以直接属性方法
需要注意的是如果是某一个浏览器独有的方法，那么在其他的浏览器可能会当做普通变量或者函数对待。
系统对话框
警告框alert
确认框confirm 有确定和取消会返回 1 和 0
提示框prompt(“第一个参数是参数说明”,”第二个参数是默认值”) 会返回输入的值
打开一个新窗口
open()方法
1.要加载的URL；
2.窗口的名称或窗口目标；如果没有这个参数，一直刷新页面会打开多个窗口
3.一个特性字符串；
4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。
新打开窗口的位置（有兼容性）
IE支持 screenLeft 火狐不认识，就会当做没有声明和初始化的变量
如果直接写screenLeft 到了火狐里边会报错但是，使用了window.screenLeft 不会报错，只会告诉你undefined
火狐支持 screenX
谷歌浏览器这两个都支持
跨浏览器得到窗口的位置

var leftX=(typeof window.screenLeft=='number')?window.screenLeft:window.screenX;
var topY=(typeof window.screenTop=='number')?window.screenTop:window.screenY;
    console.log(leftX,topY);

窗口页面的大小
获取窗口页面的大小（视的大小） innerHeight innerWidth IE不支持
窗口的大小+浏览器边框的大小 outerHeight outerWidth
但是在谷歌浏览器中 outerHeight=innerHeight
但是IE对这四个属性都不支持
为了兼容IE和各个浏览器，提出了使用DOM对象的两一种方法
document.documentElement.clientHeight
但是在各个浏览器中得到的数值不相同
判断IE浏览器属于标准模式还是怪异模式
document.compatMode //css1Compat 处于标准模式
window对象的定时器
超时调用setTimeout(“要执行的代码”,”时间”) 这个方法会返回一个属于自己独有的ID（数值）
实现在调用之前，取消当前的调用计划

 var bb=function(){
        console.log(11);
    }
      var box=setTimeout(bb,2000);
    clearTimeout(box);

间歇调用可以重复不断的执行 setInterval() clearInterval()
实现一个倒计时

   var num=0;
    var max=5;
   var id=1;
    id=setInterval(function(){
        num++;
        document.getElementById("a").innerHTML+=num;
        if(num==max){
            clearInterval(id);
            alert("时间到了");
        }
    },1000)

注意clearInterval(id);不能是clearInterval(this); 因为this不是id
使用超时调用模拟定时器

   var num=0;
    var max=5;
   var id=1;
  var bb=function(){
      num++;
      document.getElementById("a").innerHTML+=num;
      if(num==max){
          alert("时间到了");
      }
      else{
          setTimeout(bb,1000);
      }
  }

    setTimeout(bb,1000);

document对象

documnet对象旗下有5大属性
location

history对象

location对象

就是指url ，但是这个对象既是window的属性对象也是document的对象属性，，所以window.location=hsitory.location
可以获取端口号、当前协议、?后的搜索字符
封装一个函数将？后边的字符串转换为键值对

   var search="?id=5&search=ok";
  function getAtrs(search){
      var ss=search.substring(1);
      var qs=ss.split("&");
      var items=ss.split("&");
      var args=[],name="",value="";
      for(var i=0;i<items.length;i++){
           name=items[i].split("=")[0];
           value=items[i].split("=")[1];
          args[name]=value;
      }
      return args;

  }
    console.log(getAtrs(search)["id"]);
    console.log(getAtrs(search)["search"]);