JavaScript:BOM对象模型

最新推荐文章于 2023-05-28 00:27:17 发布

年少有为✘

最新推荐文章于 2023-05-28 00:27:17 发布

阅读量162

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46454139/article/details/115698643

版权

文章目录

一、BOM对象模型

一、BOM对象模型

什么是BOM

BOM（Browser Object Model）：浏览器对象模型
可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
以下是BOM对象模型如下图
在这里插入图片描述

window对象

window对象就是BOM的操作入口，即浏览器下的全局对象，window对象有以下特性
1、所有浏览器都支持 window 对象。它代表浏览器的窗口。

2、所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

3、全局变量是 window 对象的属性。

4、全局函数是 window 对象的方法。

5、（HTML DOM 的）document 对象也是 window 对象属性

document.getElementById("header");
//等同于
window.document.getElementById("header");
//只是省去了window名字

如alert()、prompt()、setInterval()、setTimeout()等方法，都是挂载在window对象上的全局方法

全局变量与局部变量

全局变量有两种声明方式：

1、声明在最外层的变量为全局变量
2、将变量挂载到window对象上也是全局变量

<script>
	var a='global'; //声明在外面，是为全局变量
	console.log(a);
function myTimer() {
  var a='local'; //声明在函数体内，是为局部变量
  console.log(a);
  window.b='window的global'; //window对象做前缀的变量是为全局变量，前面不用写var
  
}
console.log(b);

除此之外，其实还有一种声明全局变量的方式，即隐式声明

function myTimer() {
  a='local'; //声明在函数体内，是为局部变量
}
console.log(a);//可以访问，但不推荐使用

但是隐式声明变量有很多弊端，所以并不推荐使用

window对象常用方法

1、window.open():打开一个新窗口
格式：window.open(URL,name,param)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="我是百度" onclick="myTimer()" />
		<input type="button" value="我才是百度" onclick="myTimer()" />
		<script>
			function myTimer() {
				window.open('https://www.baidu.com', 'page1', 'width=800,height=300,left=140,top=120');
				window.open('https://www.baidu.com', 'page1', 'width=800,height=300,left=140,top=120');
			}
			myTimer();
		</script>
	</body>
</html>

参数	说明	值
URL	要在新窗口显示的文档的URL	网址、页面路径
name	新窗口的名称	例如：page1
param	width、height、left、top等属性的值	例如：width=300,height=200(不用写px)

在这里插入图片描述
大多数修改窗口大小或位置的方法，目前已被主流浏览器禁用，window.open（）方法除外

window对象常用的属性

属性	说明
name	返回窗口的名称
innerHeight、innerWidth	返回窗口的内部高
outerHeight、outerWidth	返回窗口的外部高
screenX,screenY,screenLeft,screenTop	返回窗口左上角再屏幕上的位置

window对象的常用事件和对象

1、window.onload()：页面加载完毕后立刻执行操作
使用方法：window.οnlοad=函数名 （不加()） 或window.οnlοad=匿名函数
window.onload()的用法主要可以用于需要等待页面加载完成之后再进行操作的动作
Location对象

属性	说明
href	返回当前窗口的完整url地址，可通过修改值达到页面跳转的目的
host	返回当前窗口的主机名例如xxx.xx.xx.xx:端口号
pathname	返回资源路径地址，即主机名后面的部分
port	返回端口，常见端口如HTTP端口为80，HTTPS端口为443

navigator对象

属性	说明
userAgent	返回用户代理信息，包含操作系统、浏览器内核、浏览器版本、CPU类型等
onLine	是否连接了因特网，是则返回true，否则返回false
cookieEnabled	是否启用cookie，是则返回true，否则返回false
language	浏览器主语言

screen对象

属性	说明
width、height	屏幕宽高
availWidth、availHeight	屏幕可用宽高（不包含任务栏）

history对象

属性	说明
length	历史浏览数目
方法	说明
–	–
back()	后退一页
forward()	前进一页
go()	跳转到指定页数，参数为负代表后退，参数为正代表前进

一般来说只用window.history.go()就行了。
后退：window.history.go(-1)
前进：window.history.go(1)

frames框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中
frames框架的声明格式：

<iframe src="2.html" name="frame1"></iframe>
//src中的URL代表你要在iframe框架中显示的具体页面内容。name属性在调用框架时经常会使用

在父页面中，可通过 window.frames[“frame1”] 访问子页面的window对象（需等frame加载完毕）
在子页面中，可通过 window.parent 访问父页面的window对象（需等frame加载完毕）

练习题：
在这里插入图片描述

//父页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		修改子页面里面的内容：<input type="text" id="t1" />
		<input type="button" value="修改" onclick="dis1()" />
		<p id="result1"></p>
		<iframe src="son.html" name="iframe1" width="500" height="300"></iframe>
		<script type="text/javascript">
			function dis1(){
				var father=document.getElementById('t1').value;
				window.frames['iframe1'].document.getElementById('result2').innerHTML=father;
			}
		</script>
	</body>
</html>

//子页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		修改父页面里面的内容：<input type="text" id="t2" />
			<input type="button" value="修改" onclick="dis2()" />
			<p id="result2"></p>
			<script type="text/javascript">
				function dis2(){
					var son=document.getElementById('t2').value;
					parent.window.document.getElementById('result1').innerHTML=son;
				}
			</script>
	</body>
</html>

运行之后输出的效果如下
在这里插入图片描述

年少有为✘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript:BOM对象模型

文章目录一、BOM对象模型什么是BOMwindow对象全局变量与局部变量window对象常用方法window对象常用的属性window对象的常用事件和对象frames框架一、BOM对象模型什么是BOMBOM（Browser Object Model）：浏览器对象模型可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。以下是BOM对象模型如下图window对象window对象就是BOM的操作入口，即浏览器下的全局对象，wi
复制链接

扫一扫