当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>JS之BOM操作基础

JS之BOM操作基础

时间:2019/12/14 7:08:00 【admin】

BOM(Browser Object Model)即浏览器对象模型。B浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象,因此其核心对象是window;BOM缺乏标准,Java…

   BOM(Browser Object Model)即浏览器对象模型。B浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象,因此其核心对象是window;BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C。

BOM脑图:

Bom_1.png


主流浏览器:

常用的主流浏览器内核:代表有 Trident(IE),Gecko(firefox),Webkit(Safari chrome 等)以及 Presto(opera)


BOM对象

window对象,是js的最顶层的的对象,其他的BOM对象都是window对象的属性;

document,文档对象;

navigator对象,浏览器本身信息;

history对象,浏览器访问历史信息;

location对象,浏览器当前URL信息

screen对象,客户端屏幕信息;


1,window对象:BOM对象的核心。

常用的方法:(调用时window可省略)

window.alert("提示信息");

window.confirm("确认信息");

window.prompt("弹出输入框");

window.open("url","打开方式(-self或-black)","新窗口大小");

window.close() 关闭当前页面  兼容性问题:

:FF:禁止设置关闭浏览器的代码   Chrome:默认直接关闭    IE:询问用户

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

window.moveTo():移动当前窗口

window.onload():当页面加载时

window.onscroll():当页面滚动时

window.onresize():页面重新定义大小时


定时器,清除定时器:

setTimeout(函数,时间) 只执行一次

setInterval(函数,时间) 无限执行

clearTimeout/clearInterval(定时器名称) 清除定时器


2,navigator对象


window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

window.navigator.platform:操作系统类型;

window.navigator.userAgent:浏览器设定的User-Agent字符串。

window.navigator.appName:浏览器名称;

window.navigator.appVersion:浏览器版本;

window.navigator.language:浏览器设置的语言;

window.userAgent是最常用的属性,用来完成浏览器判断。



if(window.navigator.userAgent.indexOf('MSIE')!=-1){        
 alert('我是IE浏览器');    
}else{        
 alert('我不是IE浏览器'); 
}



3,history对象

window.history 对象包含浏览器的历史。为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。

 history.back() - 加载历史列表中的前一个 URL。返回上一页。

 history.forward() - 加载历史列表中的下一个 URL。返回下一页。   

history. go(“参数”) -1表示上一页,1表示下一页。


<script>   
 window.location.href = 'url';   
 window.open('url');   
 window.history.back(-1):返回上一页   
 window.history.go(-1/1):返回上一页或下一页 
 history.go("baidu.com");
</script>

浏览器窗口的尺寸和大小

1,scroll系列方法

   滚动条滚动的距离

   document.documentElement.clientScrollTop    

   document.documentElement.cllientScrollLeft || document.body.scrollLeft

   存在兼容性问题,解决办法如下:

   document.documentElement.cllientScrollLeft || document.body.scrollLeft

   document.documentElement.clientScrollTop   || document.body.scrollTop

  

  scrollHeight /scrollWidth   对象内部的实际内容的高度/宽度(不包括border)



2.offset系列方法

 

offsetWidth和offsetHeightoffsetHeight的构成

offsetHeight = height + padding + border

offsetWidth相同


offsetHeight和style.height的区别

1. demo.style.height只能获取行内样式,否则无法获取到

2. .style.height是字符串(有单位px), offsetHeight是数值(无单位)

3. .style.height可以设置行内样式,但offsetHeight是只读属性,不可设置

所以:demo.style.height获取 某元素的真实高度/宽度,用.style.height来设置高度/宽度

offsetLeft和offsetTopoffsetLeft的构成

1,到距离自身最近的(带有定位的)父元素的 左侧/顶部

2,如果所有父级元素都没有定位,则以body为准

3,offsetLeft是自身border左侧到父级padding左侧的距离


offsetLeft和style.left的区别

1,style.left只能获取行内样式

2,offsetLeft只读,style.left可读可写

3,offsetLeft是数值,style.left是字符串并且有单位px

4,如果没有定位,style.left获取的数值可能是无效的

5,最大的区别:offsetLeft以border左上角为基准, style.left以margin左上角为基准

offsetParent构成

1. 返回该对象距离最近的带有定位的父级元素

2. 如果当前元素的所有父级元素都没有定位(position为absolute或relative),那么offsetParent为body

3. offsetLeft获取的就是相对于offsetParent的距离


与parentNode的区别parentNode始终指向的是当前元素的最近的父元素,无论定位与否

 

3.client系列


clientX和clientY     获取鼠标在可视区域的位置     clientX = width + padding,clientY = height + padding

clientLeft     边框的宽度,若有滚动条的话,包括滚动条

client示意图

image.png

//获取可视区域的大小
function client() { 
     return { 
         clientWidth: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0;
          clientHeight: window.innerHeight || document.body.clientHeitght || document.documentElement.clientHeight || 0;
      };
}



扩充阅读

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮