JavaScript-DOM和BOM对象

最新推荐文章于 2024-07-22 08:55:10 发布

抹泪的知更鸟

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量511

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_51596354/article/details/123239449

版权

JavaScript-DOM和BOM对象

学习目标

掌握JavaScript DOM对象 重点
掌握JavaScript BOM对象 重点
掌握JavaScript操作文档元素的方法
掌握JavaScript事件的原理
掌握JavaScript常用事件的运用方法 重点

JavaScript BOM对象

BOM(Browser Object Model) 是指浏览器对象模型

document	对 Document 对象的只读引用。
history	对 History 对象的只读引用。
navigator	对 Navigator 对象的只读引用。
screen	对 Screen 对象的只读引用。
location	用于窗口或框架的 Location 对象。
name	设置或返回窗口的名称。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。

Window 对象

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");
// 与此相同：
document.getElementById("header");

setInterval()

window.setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

var label = setInterval(function, milliseconds, param1, param2, ...)

clearInterval()

window.clearInterval() 取消由 setInterval() 设置的 timeout。

clearInterval(label)

setTimeout()

window.setTimeout() 在指定的毫秒数后调用函数或计算表达式。

var label = setTimeout(function, milliseconds, param1, param2, ...)

clearTimeout()

window.clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

clearTimeout(label)

浏览器窗口的尺寸

有三种方法能够确定浏览器窗口的尺寸。

1.对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(不包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(不包括滚动条)

2.对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

3.常规

document.body.clientHeight
document.body.clientWidth

案例01：获取浏览器宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		var w = window.innerWidth ||
			document.documentElement.clientWidth ||
			document.body.clientWidth;
			
		var h = window.innerHeight ||
			document.documentElement.clientHeight ||
			document.body.clientHeight;
			
		document.write("浏览器window宽度: " + w + ", 高度: " + h + "。");
	</script>
</html>

效果展示
在这里插入图片描述

显示器尺寸

window.scren对象用户获取显示器的各种参数：

scren.width - 返回屏幕的总宽度，（包括Windows底部任务栏）
screen.height - 返回屏幕的总高度，（包括Windows底部任务栏）
screen.availWidth - 返回屏幕的高度（不包括Windows底部任务栏）
screen.availHeight - 返回屏幕的宽度（不包括Windows底部任务栏）
screen.colorDepth - 色彩深度
screen.pixelDepth - 色彩分辨率

案例02：获取屏幕参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		document.write("总宽度/高度: "+screen.width + "*" + screen.height);
		document.write("<br>");
		document.write("可用宽度/高度: "+screen.availWidth + "*" + screen.availHeight);
		document.write("<br>");
		document.write("色彩深度: "+screen.colorDepth);
		document.write("<br>");
		document.write("色彩分辨率: "+screen.pixelDepth);
	</script>
</html>

效果展示

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZs77oM9-1646224118228)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220221150818605.png)]$
Location对象

window.location 对象可以获取url的各部分参数、跳转、重定向等

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）/)
location.href返回完整的 URL（http://127.0.0.1:8020 /demo02/index.html）
location.hash 返回一个URL的锚部分
location.assign(url) 跳转到新文档【location.assign(“http://www.baidu.com”)】，可返回
location.replace(url) 用新文档取代当前文【location.replace(“http://www.baidu.com”)】
location.reload() 刷新（重新加载）当前文档【location.reload()】

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-DOM和BOM对象

JavaScript-DOM和BOM对象学习目标JavaScript BOM对象Window 对象setInterval()clearInterval()setTimeout()clearTimeout()浏览器窗口的尺寸案例01：获取浏览器宽高显示器尺寸案例02：获取屏幕参数案例03：链接属性案例04：回到历史记录浏览器对象案例05：获取浏览器参数JavaScript DOM对象Document 对象Element对象案例06：切换class案例07：动态添加元素Event对象案例08：鼠标坐标学习目标
复制链接

扫一扫