js-BOM

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量76 收藏
点赞数
分类专栏： js基础 文章标签： html javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vinsmoker_Sanji/article/details/120273189
版权

导读1：什么是BOM

1.BOM全称Browser Object Model，翻译为浏览器对象模型

2.BOM提供了很多对象(对象里面有属性和方法)，用于访问浏览器的功能

3.BOM缺少规范，每个浏览器提供商都按照自己的想法去扩展它，那么浏览器共有对象就成了事实的标准。

 

 导读2：BOM核心

1.window对象是BOM中所有对象的核心，表示整个浏览器窗口，但不必表示其中包含的内容。 window对象还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。 window对象是JavaScript的顶端对象之一，它是隶属于浏览器层次的，它独立于文档内容与浏览器之间

2.navigator代表当前浏览器信息(版本号、运行的平台等)

3.location代表浏览器的地址栏

4.document代表整个页面文档内容

5.history代表整个浏览器的历史记录(常用于操作翻页)

6.screen代表整个浏览的屏幕

7.frames代表整个窗口中的所有框架页

一.window对象

1.window对象的特性

1.window对象是JavaScript访问浏览器窗口的一个接口

2.window是一个全局对象

<script type="text/javascript">
		var sex = '男';				
		console.log(sex);				//男，在调用window对象的属性的时候可以省略window）
		console.log(window.sex);		//男
		function first(){
			console.log('window对象');
		}
		first()				//window对象（在调用window对象的方法的时候可以省
		window.first()		//window对象
	</script>

3.document等对象可以看成是window对象的一个属性，在使用的时候省略了window

<body>
		<button type="button">我是按钮</button>
	</body>
	<script type="text/javascript">
		/* var btn = window.document.querySelector('button') */
		var btn = document.querySelector('button')		//省略了window
		console.log(btn);
	</script>

2.window对象的对话框

对话框方法说明
alert(str)提示/警告对话框，显示str字符串的内容
confirm(str)

确认对话框，显示str字符串的内容。带确定、取消两个按钮

点确定时返回true；点取消时返回false

prompt(str,value)输入对话框，采用文本框输入信息,str为提示信息，value为初始值
<body>
		<button type="button" onclick="javascript:fir();">点一下</button>
	</body>
	<script type="text/javascript">
		function fir(){
			alert('你要删除我吗？');
			/* window.alert(1); */
			/* confirm('你确定删除吗？') */
			var result =  window.confirm('你确定删除吗');
			console.log(result);				//   false
			if(result == true){
				console.log('你点了ok');
			} else {
				console.log('你点了cancal');
			}
			var n = prompt('输入一个正整数:',5)
			if(n == undefined){
				console.log(1);
			}
		}
	</script>

3.window对象实现窗口的打开与关闭

打开：window.open()

关闭：window.close()

<body>
		<button type="button">打开百度</button>
		<a href="https://www.baidu.com" target="_blank">百度首页</a>
		<a href="https://www.2345.com" target="_self">2345首页</a>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector('button')
			
		btn.addEventListener('click',function(e){
			/* window.open('https://www.baidu.com','百度首页','width=300,height=200')
			window.open('https://www.2345.com','2345首页','width=400,height=300') */
			
			var new1 = window.open('https://www.baidu.com','百度首页','width=500,height=300,top=200,left=500')
			var new2 = window.open('https://www.2345.com','2345首页','width=500,height=300,top=200,left=200')
			new1.close()       //  百度页面关闭，打开的是2345首页
		
		})
	</script>

4.window对象的定时器

1.炸弹定时器：window.setTimeout(func, ms)（window可省略）

表示等待ms毫秒之后，执行func。func可以是匿名函数，也可以是函数名(函数另写)

2.停止启动的定时器：window.clearTimeout(timer);（window可省略）

<body>
		<button type="button">启动</button>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector('button')
		btn.addEventListener('click', function() {
			setTimeout(function() {
				console.log('时间到，爆炸');
			}, 4000)
			function fn() {
				console.log('时间到，boom');
			}
			setTimeout(fn, 5000)
            clearInterval(time1)    // 停止了 time1 的定时器
		})
	</script>

2.闹钟定时器：window.setInterval(func, ms);（window可省略）

表示间隔ms毫秒之后，周期性地执行func

<body>
		<button type="button">开启闹钟定时器</button>
		<button type="button">关闭闹钟定时器</button>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector('button')
		var btn1 = btn.nextElementSibling;
		btn.addEventListener('click',function(){
			timer2 = window.setInterval(fn,1000)
			function fn(){
				console.log('早上好');
			}		
		})
		btn1.onclick = function(){
			clearInterval(timer2)
		}
	</script>

案例1：十秒倒计时

<style type="text/css">
			p{
				font-size: 30px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<button type="button">开启倒计时</button>
		<p></p>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector('button')
		var p = document.querySelector('p')
		var i = 10;
		btn.addEventListener('click',function(){
			var timer = window.setInterval(function(){
				p.innerHTML = i;
				i--;
				if(i < 0){
					p.innerHTML = '时间到';
					clearInterval(timer)
				}
			},1000)
		})
	</script>

案例2：距离国庆节的倒计时

	<style type="text/css">
			button{
				width: 30px;
				height: 30px;
				background-color: #000000;
				border: none;
				color: white;
				
			}
		</style>
		
	</head>
	<body>
		<h1>距离10月1日还剩</h1>
		<button type="button" class="day"></button>
		<button type="button" class="hour"></button>
		<button type="button" class="mintue"></button>
		<button type="button" class="second"></button>
	</body>
	<script type="text/javascript">
			var d = document.querySelector('.day')
			var h = document.querySelector('.hour')
			var m = document.querySelector('.mintue')
			var s = document.querySelector('.second')
			count();
			setInterval(count,1000)
			
			
		function count() {
			var now = new Date().getTime()
			var time = new Date('2021-10-1 00:00:00').getTime()
			var times = (time - now) / 1000;
			var day = parseInt(times / 60 / 60 / 24);
			d.innerHTML = day;
			var hour = parseInt(times / 60 / 60 % 24); //	时
			h.innerHTML = hour;
			var mintue = parseInt(times / 60 % 60); //	分
			m.innerHTML = mintue;
			var second = parseInt(times % 60);
			s.innerHTML = second;
		}
	</script>

5.window对象的窗口(页面)加载事件

onload事件：当文档内容完全加载完成，会触发该事件, 就调用该事件的处理函数。

<body>
		<button type="button">点击我</button>
	</body>
	<!-- onload在页面加载完之后才执行里面的代码，所以放在body上面也是可以的 -->
	<script type="text/javascript">
		window.onload = function() {
			var btn = document.querySelector('button')
			btn.addEventListener('click', function() {
				console.log('我是好人');
			})
		}
	</script>

6.window对象的调整窗口大小事件

onresize事件：只要窗口大小发生像素变化，就会触发这个事件。

<style type="text/css">
			.div{
				width: 200px;
				height: 200px;
				background-color: #00FF00;
			}
		</style>
	</head>
	<body>
		<div class="div">
			我是一个盒子
		</div>
	</body>
	<script type="text/javascript">
		var div = document.querySelector('.div')
		window.onresize = function(){
			if(window.innerWidth < 500){
				div.style.backgroundColor = 'blue';
			} else{
				div.style.backgroundColor = 'red';
			}
		}
	</script>

二.navigator对象

navigator 对象包含有关浏览器的信息。常用于获取客户端浏览器和操作系统信息

navigator 数据可被浏览器使用者更改，所以来自 navigator 对象的信息有时具有误导性

<script type="text/javascript">
			console.log(navigator.appCodeName);
			console.log(navigator.appName);
			console.log(navigator.appVersion);
			console.log(navigator.cookieEnabled);
			console.log(navigator.platform);
			console.log(navigator.userAgent);
			console.log(navigator.language);
			console.log(navigator.product);

			// 我们可以通过for in的方法遍历对象，结果有很多
			for (var key in navigator) {
				console.log(key);
			}
		</script>

三.location对象

window对象给我们提供了一个location属性，属性返回的是一个对象

location对象用于获取或设置窗体的URL(即获取和改变当前浏览的网址)，并且可以用于解析URL

直接上代码

<body>
		<button type="button">location对象</button>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector('button')
		btn.addEventListener('click', function() {
			//	location.href = 'http://www.baidu.com';         可以后退
			// location.assign('http://www.baidu.com');			 可以后退
			location.replace('http://www.baidu.com'); 			//  后退前进功能不可用
			console.log(location.host); // 127.0.0.1:8848
			console.log(location.pathname);
			console.log(location.protocol); //	 http:
			/* location.reload();     闪退*/
		})
	</script>

四.document对象

五.history对象

history对象包含浏览器历史，即含有用户在浏览器窗口中访问过的网页的URL地址

属性和方法说明
history.length浏览器历史列表中的URL数量
history.back()等同于在浏览器点击“后退”按钮。等价于history.go(-1)
history.forward()等同于在浏览器中点击“前进”按钮。等价于history.go(1)
history.go(i)

选择任意历史记录加载。即转到任意历史记录

 参数如果是1表示前进1个页面，如果是-1表示后退一个页面

history.go(0)刷新当前页面
history.go(-2)单击两次“后退”按钮
// after.html
<body>
		<a href="before.html">查看before</a>
		<button type="button">前进</button>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector('button')
		btn.onclick = function() {
			history.go(1)
		}
	</script>
// before.html
<body>
		<a href="after.html">查看after</a>
		<button type="button">后退</button>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector('button')
		btn.onclick = function(){
			history.go(-1)
		}
	</script>

六.screen对象

screen 对象包含有关客户端显示的用户屏幕的信息，常用于获取屏幕的分辨率和色彩

属性说明
screen.width返回以像素计的访问者屏幕的宽度
screen.height返回以像素计的访问者屏幕的高度
screen.availWidth返回以像素计的访问者屏幕的可用宽度
screen.availHeight返回以像素计的访问者屏幕的可用高度
screen.colorDepth返回色彩深度
screen.pixelDepth返回色彩分辨率
<script type="text/javascript">
		console.log(screen.width);				//	1920
		console.log(screen.height);				//	1080
		console.log(screen.availHeight);		//	1030
		console.log(screen.availWidth);			//	1920
		console.log(screen.colorDepth);			//	24
		console.log(screen.pixelDepth);			//	24
	</script>

注意：在hbulider的内置浏览器里面。分辨率为1920 * 1080，但是运行到chrome就变成了1536 * 864，这是因为显示设置里面推荐的是125%，换成100%就可以了

七.frames对象

window 对象表示浏览器中打开的窗口。如果文档包含框架(frame或iframe标签)，浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。这些框架的window对象会被存放在frames集合中，即浏览器窗口对象的window.frames属性中，并可以通过下标或框架名进行索引

属性说明
window.parent返回当前窗口的父窗口。
window.top返回当前窗口的最顶层浏览器窗口
window.frames以集合的方式返回当前窗口中包含的所有框架的window对象。 该集合是window对象的数组，即数组中的一元素是一个个框架的window对象
window.frames.length数组frames[]中含有的元素个数。 frames[]数组中引用的框架可能还包括框架，它们自己也具有frames[]数组
window.frames.nameValue根据框架标签(frame/iframe)的name属性值，获取该框架的window对象
window.frames['nameValue']根据框架标签(frame/iframe)的name属性值，获取该框架的window对象
// index.html
<body>
		<frameset rows="100,*">
			<frame src="top.html" name="one" >
			
			<frameset cols="150,*">
				<frame src="left.html" name="two">
				<frame src="right.html" name="three">
			</frameset>
		</frameset>
	</body>
// top.html

<style type="text/css">
			button{
				display: block;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="window.document.bgColor = 'red'">操作自己</button>
		<button type="button" onclick="window.parent.frames[1].document.bgColor = 'green'">操作left</button>
		<button type="button" onclick="window.parent.frames[2].document.bgColor = 'blue'">操作right</button>
	</body>
// left.html

<style type="text/css">
			button{
				display: block;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="window.document.bgColor = 'red'">操作自己</button>
		<button type="button" onclick="window.top.frames[0].document.bgColor = 'blue'">操作top</button>
		<button type="button" onclick="window.parent.frames[2].document.bgColor = 'green'">操作right</button>
	</body>
// right.html

<style type="text/css">
			button{
				display: block;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="window.document.bgColor = 'red'">操作自己</button>
		<button type="button" onclick="window.top.frames[0].document.bgColor = 'green'">操作top</button>
		<button type="button" onclick="window.parent.frames[1].document.bgColor = 'blue'">操作left</button>
	</body>
Vinsmoker_Sanji
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript-BOM对象
L990614的博客
09-14 173
BOM对象 一 、浏览器对象模型（BOM） 1、BOM对象的概念 BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 2、BOM对象的核心 BOM的核心对象是window(窗口对象); window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 注意：window下一个特殊的属性
JS-BOM
woshi6yi的博客
04-02 201
一、BOM的顶级对象（window）（可省略） window常见的事件onload 和DOMContentLoaded 1.onload事件 等待页面内容全部加载完毕之后，才执行js代码 2.DOMContentLoaded事件 是等DOM加载完，不包含图片、flash、css等 ，加载速度比load快 resize事件 当window的大小发生了变化就会触发，window.innerWidth得到窗口宽度 二、定时器 1.setTimeout定时器 语法规范：window.setTimeo
js- bom
qq_38535965的博客
09-15 76
bom浏览器模型，window是js最顶级对象 其设置了几个功能对象如上图在全局环境下声明的变量、函数都是window的属性或方法；window的属性和方法无需window.调用。
js - BOM
qq_42250642的博客
05-10 165
js - BOM BOMjs - BOM一、简介1.1 概述二、Navigator2.1 概述2.2 实例三、History3.1 概述四、Location4.1 概述五、定时器5.1 概述 一、简介 1.1 概述 BOM -浏览器对象模型 -在BOM中为我们提供了一组对象，用来完成对浏览器的操作 1、BOM对象 1）window -代表的是整个浏览器的窗口，同时w
JavaScript-BOM编程
weixin_44201223的博客
05-15 944
DOM对象 window对象的常见属性 window对象的常见方法
JavaScript-BOM
qq_63063715的博客
07-22 163
JavaScript-BOM
批量utf文件转utf8-bom
01-15
3. 编写脚本：如果你熟悉编程，可以用Python、JavaScript或其他语言编写脚本，遍历指定目录下的所有文件，读取、转换后再写入，这样可以自动化整个过程。 4. 第三方工具：网络上也有一些专门的文件编码转换工具，如...
strip-bom:从字符串中删除UTF-8字节顺序标记（BOM）
04-29
从字符串中删除UTF-8（BOM） 从维基百科： Unicode标准允许使用UTF-8中的BOM，但既不需要也不建议使用它。 字节顺序在UTF-8中没有意义。 安装 $ npm install strip-bom 用法 import stripBom from 'strip-bom' ; ...
实现JavaScript的组成----BOM和DOM详解
10-22
标题所涉及的知识点是JavaScript的组成，具体指出了BOM（浏览器对象模型）和DOM（文档对象模型）。这两个模型是实现JavaScript功能的重要组成部分，而ECMAScript则是JavaScript的核心规范。 BOM主要涉及window对象...
add-bom:将BOM表标记添加到UTF-8文件
05-20
将BOM表标记添加到文件 一个简单的cli实用程序，用于向UTF-8文件添加BOM表标记。 适合在npm版本中使用。... node add-bom.js -f file-without-bom.js 或来自package.json的npm脚本部分 add-bom -f file-without-bom.js
HTML 总结
2301_77527830的博客
08-29 878
包含了所有的头部标签，例如：<title>, <style>, <meta>, <link>, <script>e.g.：比 如 < 和 > ,我们不能直接在页面中使用 < 和 > 号，因为浏览器会将它解析为html 签。网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终提交表单,把客户端数据提交至服务器。注：下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。为了可以使用这些预留字符，我们必须在html中使用字符转义。
前端知识HTML&CSS
w13114的博客
08-31 1221
前端知识
扑捉一只耿鬼（HTML文件）
每一次跌倒都是为了华丽的站起来。
08-28 930
捕捉一只耿鬼
前端篇-html
qq_60203955的博客
08-30 353
前端学习
Vue(三)内置指令v-text、html、cloak、once、pre；自定义指令的三种方式、Vue生命周期
qq_44285582的博客
08-29 997
Vue内置之类v-text、v-html、v-cloak、v-once、v-pre；自定义指令directives配置项；函数式、对象式自定义指令；生命周期函数--挂载、更新、销毁
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 400
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2524
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1388
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 498
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
JS浏览器BOM操作完全指南
"JS浏览器BOM常见操作实例详解，涵盖了窗口尺寸获取、窗口操作和Screen对象的使用等关键知识点，适合需要了解JavaScript在浏览器环境中如何操作窗口和屏幕的开发者参考学习。" 在JavaScript中，Browser Object ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值