Web基础——JavaScript之BOM_web利用bom-CSDN博客

本文链接：https://blog.csdn.net/weixin_43496491/article/details/122372491

1.BOM：Browser Object Model 浏览器对象模型

概念：将浏览器的各个组成部分封装为对象

特点：BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。

组成：
			Window(*****)：窗口对象
			Location(**)：地址栏对象
			History(*)：历史记录(当前窗口)对象
			Navigator ：浏览器对象   基本不用仅作了解
			Screen：显示器屏幕        基本不用仅作了解	
				availHeight	获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 	
				availWidth	获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 	
				height		获取屏幕的垂直分辨率。 
				width		获取屏幕的水平分辨率。

2. Window：窗口对象

使用方式：
window.方法名(); window 可以省略
方法名;

方法:
	与弹出有关的方法
					alert() 显示带有一段消息和一个确认按钮的警告框。
					例子：window.alert("我是警告弹框"); 
					
					confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 
					例子：var flag=window.confirm("你确定吗？");
					
					prompt() 显示可提示用户输入的对话框。 
					例子：var  text=window.prompt("请输入地址"，"");//参数2：默认文字

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//window对象
			//window对象中的方法
			//1.有关弹窗的方法
			//window.alert("弹出一个警告框");
			//alert("window对象可以省略不写");
			function del(){
				//2.弹出确认取消框
				var flag=window.confirm("你确认删除吗？"); //返回true表示确认，返回false表示取消
				if(flag){
					document.write("删除操作")
				}else{
					document.write("取消删除")
				}
			}
			function inputAddress(){
				//弹出输入框
				var text=window.prompt("请输入你的收货地址") //显示可提示用户输入的对话框。 
				document.write(text);
			}
		</script>
	</head>
	<body>
		<a href="javascript:void(del())">删除</a>
		<a href="javascript:void(inputAddress())">填写地址</a>
	</body>
</html>

代码2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function intoWeb() {
				//打开窗口,返回的是新打开的窗口对象
				//var newWindow=window.open("http://www.163.com");
				//跳转到自己站点的页面，返回的是新打开的窗口对象
				 myWindow=window.open("index.html");
			}
			function gb(){
				window.close();
			}
			function gb2(){
				if(window.confirm("确认关闭窗口吗？")){
					myWindow.close();
				}
			}
		</script>
	</head>
	<body>
		<a href="http://www.sina.com">进入新浪</a>
		<button type="button" onclick="intoWeb()">进入网页</button>
		<a href="javascript:void(gb())">关闭本窗口</a>
		<a href="javascript:void(gb2())">关闭新打开的窗口</a>
	</body>
</html>

与定时器有关的方法
					setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 循环执行
					clearInterval() 取消由 setInterval() 设置的 timeout。  
					setTimeout() 在指定的毫秒数后调用函数或计算表达式。 只执行一次
						* 参数：
							参数1：字符串(js语句)或者 函数对象
							参数2：毫秒值。
                    clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 
                    
					例子：
						设置定时器 3秒后要执行的函数
						 var id=window.setTimeout("window.close()",3000);
						var id1=window.setTimeout("shut()",3000);
						var id2=window.setTimeout(shut，3000);
						
						funtion shut(){
							window.close();
						}
						取消定时器 通过定时器的id 来取消
						window.clearTimeout(id);
						window.clearTimeout(id2);

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//执行一次的定时器
		/* 	function show(){
				alert("砰 爆炸了！")
			}
			window.setTimeout(show,2000);
			//window.setTimeout("show()",1000); */
			//设置定时器，返回的是定时器的id
			var timerID=window.setTimeout(function(){
				alert("砰 爆炸了！");
			},2000);
			//可以根据定时器的id取消定时器
			window.clearTimeout(timerID);	
		</script>
	</head>
	<body>
	</body>
</html>

循环定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var timerID=window.setInterval(function(){
				console.log("循环定时器执行了")
			},1000)
			function qx(){
				window.clearInterval(timerID);
			}
		</script>
	</head>
	<body>
		<a href="javascript:void(qx())">取消定时器</a>
	</body>
</html>

与打开关闭有关的方法：
					open():打开新窗口
						* 参数：打开目标的URL
						* 返回值：返回新打开窗口的window引用
					例子：var newWindwo=window.open("http://www.baidu.com");
						newWindwo.close();
						
					close():关闭窗口
						* 谁调用我 ， 我关谁
						例子：window.close();

属性：
获取其他对象的属性：
history ：对 History 对象的只读引用。请参数 History 对象。
location ：用于窗口或框架的 Location 对象。请参阅 Location 对象。
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
Screen 对 Screen 对象的只读引用。请参数 Screen 对象。
document：对 Document 对象的只读引用。请参阅 Document 对象。

3. Location：地址栏对象

获取方式：可以用window对象中的属性获取
			var lc=window.location;
			lc.href="http://www.baidu.com";
			属性：
				href：设置或获取当前的URL

4.History：历史记录对象

获取方式：可以用window对象中的属性获取
			var ht=window.history;
			ht.go(1);
			 方法：
				go:
					1:前进
					-1：后退

6.页面时钟演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="time">2022-01-07 09:39:20</h1>
	</body>
	<script type="text/javascript">
		function showTime() {
			//获取h1标签对象
			var h1 = document.getElementById("time");
			//设置标签之间的内容
			var time = new Date().toLocaleString();
			h1.innerText = time;
		}
		//先手动调用一次
		showTime();
		//循环调用
		window.setInterval(showTime, 1000);
	</script>
</html>

window对象中的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//BOM中其他对象，都是通过window对象的属性获取的
			var loc=window.location;
			var his=window.history;
			var nav=window.navigator;
			var scr=window.screen;
			//获取html文档对象
			var doc=window.document;
		</script>
	</head>
	<body>
	</body>
</html>

地址栏对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//获取地址栏对象
			//var loc=window.location;
			//loc.href="http://www.baidu.com";
			//window.location.href="http://www.baidu.com";
			//window可以省略不写
			//href 设置或返回完整的 URL。 
			//location.href="http://www.baidu.com";
			//var text=location.href;
			//alert(text);
			//URL：统一资源定位符
			//URL由三部分组成：资源类型、存放资源的主机域名、资源文件名。
			//也可认为由4部分组成： 协议、 主机、 端口、 路径
			//URL的一般语法格式为：
			//	(带方括号[] 的为可选项)：
			//protocol: // hostname[:port] / path / [:parameters][?query]#fragment
			//https://192.168.10.1:8080/path
			var hostname=location.hostname;
			var host=location.host;
			var protocol=location.protocol;
			var pathname=location.pathname;
			var search=location.search;
			var port=location.port;
			alert(hostname);
			alert(host);
			alert(protocol);
			alert(search);
			alert(port);
			function sx(){
				//刷新页面
				location.reload();
			}
		</script>
	</head>
	<body>
		<button type="button" onclick="sx()">刷新</button>
	</body>
</html>

URL编码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//浏览器的地址栏，会自动对地址栏里面的内容进行 URL编码
			/* decodeURI() 解码某个编码的 URI。 1 5.5 
			   encodeURI() 把字符串编码为 URI。 1 5.5 
			decodeURIComponent() 解码一个编码的 URI 组件。 1 5.5 
			encodeURIComponent() 把字符串编码为 URI 组件。 
			*/
			var name="我爱你们";
			//编码
			var code=encodeURI(name);
			document.write(code);
			//解码
			var text=decodeURI(code);
			document.write(text);
		</script>
	</head>
	<body>
	</body>
</html>

浏览器对地址栏里面的内容会型url编码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var url=location.href;
			document.write(url);
			document.write("<hr>");
			var v=decodeURI(url);
			document.write(v);
			//浏览器为什么要进行URL编码
			//参考：自己百度
			//https://www.cnblogs.com/jerrysion/p/5522673.html
		</script>
	</head>
	<body>
	</body>
</html>