JS——BOM相关对象

其他 2020-07-29 10:11:34 阅读次数: 0

JS——BOM

一、BOM简介

BOM：Brower Object Module 浏览器对象模型，核心对象是window

BOM的特点：

  • 有一系列相关的对象构成，并且每个对象都提供了很多方法与属性
  • 缺乏标准
  • 包含DOM

二、window

（1）BOM中的window对象：

  • 是JS访问浏览器窗口的一个接口
  • 全局对象,定义在全局作用域中的变量、函数都会变成window对象的属性和方法（在调用的时候可以省略window，name，open，close等都在window对象中，定义变量时要避免重名）

（2）window对象中常用的事件：

A： window.onload()：窗口加载事件，当窗口加载完毕才会触发，使用该事件可以将js代码写在对应标签之前；绑定事件时也可以使用监听器的方法。

特点：使用传统方式注册仅能写一次，设置多个仅最后一个有效；只有IE9以上才支持；监听器方式没有个数限制

B： window.onresize：调整窗口大小事件，只要窗口大小发生变化就会触发，常用于响应式布局

三、Location

window的location用于获取或者设置窗体的url，并且可以解析用于解析url，它返回一个对象。

（1）URL：统一资源定位符

组成：

属性 说明
protocol 通信协议
host 主机
port 端口号
path 路径
query 参数，以键值对形式，用&符号分开
fragment 片段，#后面的内容，常用于链接、锚点

（2）location对象的属性

属性 返回值
href 获取或者设置整个URL
host 返回主机名（域名）
port 返回端口号
pathname 返回路径
search 返回参数
hash 返回片段

例如，做一个自动跳转页面：

        <h1></ha1>
		<span></span>
		<a href="javascript:;">百度</a>
		<!--href="javascript:;"用于禁用a标签链接效果，保留样式 -->
		<script type="text/javascript">
			function changePage(){
				let seconds = 5;
				let span = document.querySelector('span');
				let timer = setInterval(function(){
					seconds--;
					span.innerHTML = seconds + 's';
					if(seconds <= 0){
						clearInterval(timer);
						window.location.href = 'http://baidu.com';
					}
				},1000);
				let a = document.querySelector('a');
				a.addEventListener('click',function(){
					window.location.href = 'http://jd.com';
				})
			}
			changePage();
			
		</script>

（3）location对象的方法

方法 说明
assign() 可用于跳转页面，称重定向页面
replace() 替换当前页面，不记录历史，不能后退
reload() 重新加载页面，相当于刷新与f5，参数为true时，相当于强制刷新ctrl+f5

四、Navigator

Navigator对象包含了浏览器的相关信息，常用的属性有：

  • userAgent：返回由客户机发送服务器的user-agent头部的值，可以使用match()正则表达式来判断客户机的型号

五、history

history对象包含浏览历史记录，其中常用的方法有：

方法 说明
back() 返回上一条记录
forward() 前进到下一条记录（首先跳转过当前页面的下一个页面）
go() 参数为0时重载当前页面，参数为正数就前进对应数量的记录，参数为负数就后退对应数量的记录

六、盒子模型

1、元素偏移量offset：使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等；

  • 获得元素距离带有定位父元素的大小

  • 获得元素自身的大小（宽度高度）

  • 返回的数值不带单位

注意：
offset 的方向值需要考虑到父级，如果父级是定位元素，那么子元素的offset值相对于父元素，如果父元素不是定位元素，那么子元素的offset值相对于 可视区窗口。

常用属性

属性 说明
element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetLeft 返回元素相对带有定位父元素左边框的偏移
element.offsetWidth 返回自身包括padding 边框 内容区的宽度,返回数值不带单位
element.offsetHeight 返回自身包括padding 边框 内容区的高度,返回数值不带单位

offset

例：获取鼠标在一个盒子中的坐标

            let box = document.querySelector('.box');
			document.addEventListener('click',function(e){
				let x = e.pageX - box.offsetLeft;
				let y = e.pageY - box.offsetTop;
				console.log(x,y);
			})

offset与style的区别：

offset style
可以得到任意样式表中的样式值 仅能得到行内样式值
没有单位 带单位的字符串
offsetWidth包含padding + border + width style.width获得不包含padding 和 border
offsetWidth等属性是只读属性,只能获取不能赋值 style.width等属性是可读写属性

因此，获取元素大小位置,使用offset更合适,给元素更改值,style更合适

例：模态框拖动

            <button>显示移动框</button>
		    <div class="box"></div>            
            let btn = document.getElementsByTagName('button')[0];
			let box = document.getElementsByClassName('box')[0];
			btn.onclick = function(){
				btn.style.display = 'none';
				box.style.display = 'block';
			}
			box.addEventListener('mousedown',getPosition);
			
			function getPosition(){
				
				let x = box.offsetWidth/2;
				let y = box.offsetHeight/2;
				
				document.addEventListener("mousemove", move);
				document.addEventListener("mouseup", up);
				
				function move(e){
					box.style.top = e.pageY - y + "px";
					box.style.left = e.pageX - x + "px"
				}
				
				function up(e) {
					document.removeEventListener("mousemove", move);
				}
				
				
			}

2、元素师可视区client：通过client系列的相关属性可以动态的得到该元素的边框大小,元素大小等；

属性 作用
element.clientTop 返回元素上边框(border)的大小
element.clientLeft 返回元素左边框(border)的大小
element.clientWidth 返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位
element.clientHeight 返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位

client

3、元素滚动scroll：使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等

属性 作用
element.scrollTop 返回被卷去的上侧距离,返回数值不带单位
element.scrollLeft 返回被卷去的左侧距离,返回数值不带单位
element.scrollWidth 返回自身实际的宽度,不含边框,返回数值不带单位
element.scrollHeight 返回自身实际的高度,不含边框,返回数值不带单位

4、用法

  • offset系列经常用于获得元素位置 offsetlLeft offsetTop

  • client经常用于获取元素大小 clientWidth clientHeight

  • scroll经常用于获取滚动距离 scrollTop scrollLeft

  • 页面滚动距离通过window.pageXOffset (window.pageYOffset)获得

例：点击回到顶部：

        <style type="text/css">
			body{
				height: 1000px;
			}
			.top{
				width: 100%;
				height: 30px;
				border: 1px solid red;
				text-align: center;
			}
			.fix{
				width: 100px;
				height: 20px;
				background-color: blueviolet;
				position: fixed;
				right: 0;
				bottom: 0;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="top">顶部</div>
		<div class="fix">
			点击回到顶部
		</div>
		<script type="text/javascript">
			let fix = document.querySelector('.fix');
			let timer = null;
			let isTop = true;
			//获取页面的可视窗口高度
			let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
			//滚动条滚动时触发
			document.addEventListener('scroll',function(){
				//在滚动的时候增加判断
				    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
				    if (osTop == 0) {
				        fix.style.display = 'none';
				    }else{
				        fix.style.display = 'block';
				    }
				    if (!isTop) {
				        clearInterval(timer);
				    }
				    isTop = false;
			});
			fix.addEventListener('click',function(){
			    //设置定时器
			    timer = setInterval(function(){
			        //获取滚动条距离顶部的高度
					let osTop = document.documentElement.scrollTop || document.body.scrollTop;
			        let isSpeed = Math.floor(-osTop / 6);
			        document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
			        isTop = true;
					//已经到了顶部时清除定时器
			        if (osTop == 0) {
			            clearInterval(timer);
			        }
			    },30);  
			});
			   
			
		</script>

5、元素的几何尺寸：Element.prototype.getBoundingClientRect();

特点：

  • 兼容性很好

  • 该方法返回一个对象，对象里边有 left,top,right,bottom等属性。

  • left和 top代表该元素左上角的 X和 Y坐标，right和 bottom代表元素右下角的 X和 Y坐标

  • 返回的对象里边还有属性x,y，表示的是元素左顶点相对于页面body左顶点的距离

  • height和 width属性老版本 IE并未实现，要使用offsetWidth与offsetHeight获得

  • 返回的结果并不是“实时的”,方法每一次调用都返回一个新的对象

具体属性：

属性 描述
top 元素上边到视窗上边的距离
right 元素右边到视窗左边的距离
bottom 元素下边到视窗上边的距离
left 元素左边到视窗左边的距离
width 元素的宽度 （内容区+padding+border+滚动条）
height 元素的高度 （内容区+padding+border+滚动条）

注意：

  • right 方向的值是基于 元素右侧边框到可视区左边的距离

  • bottom方向的值是基于 元素底部到可视区顶部的距离

6、查询计算样式： window.getComputedStyle(ele,null)，用于获取当前元素显示了的外部和内部样式的集合；

  • 计算样式只读，返回的值都是绝对值没有相对单位

  • IE8及其以下不兼容

  • 第二个参数一般为null，也可以是伪元素（befor、after）

由于IE8及其以下不兼容，IE有专门的样式获取方法：ele.currentStyle，用于获取当前显示元素的所有属性，包括行内、内部、外部；

  • 计算样式只读，返回的值都是绝对值没有相对单位

  • IE独有

例：获取样式

        <style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				background-color: lightgreen;
			}
			.box::after{
				width: 100px;
				height: 100px;
				background-color: lightpink;
			}
			.box::before{
				width: 300px;
				height: 100px;
				background-color: lightcoral;
			}
			.box:hover{
				background-color: lightblue;
			}
		</style>
		
		
		
	</head>
	<body>
		
		<div >添加样式</div>
		<script>
			
			let div = document.querySelector('div');
			div.addEventListener('click',function(){
				div.classList.add('box');
				console.log(div.getComputedStyle(box,null).width);
				console.log(div.getComputedStyle(box,'befor').backgroundColor);
			})
		</script>

猜你喜欢

转载自blog.csdn.net/qq_42602282/article/details/107055977
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022