JavaScript (八) -- JavaScript BOM-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript (八) -- JavaScript BOM。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. JavaScript BOM的概述：

2. Window 对象（浏览器窗口对象）

2.1 Window 对象的调用方式：

2.2 Window 对象常用方法：

2.3 Location对象常用方法：

2.4 history对象常用方法：

2.4.1 history对象常用方法

2.4.2 history对象属性（只有1个属性）

2.5 screen对象常用方法：

2.6 navigator对象常用方法：

1. JavaScript BOM的概述：

BOM(Browser Object Model)：浏览器对象模型。
提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
把[浏览器]当作一个[对象]来看待、BOM的顶级对象是window、BOM学习的是浏览器窗口交互的一些对象、BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。

JavaScript (八) -- JavaScript BOM

BOM中共有五大对象：

Window 对象：浏览器窗口对象。
Navigator：浏览器对象。
Screen：浏览器所处客户端的显示器屏幕对象。
History：浏览器当前窗口的访问历史记录对象。
Location：浏览器当前窗口的地址栏对象。

注：window对象是浏览器的顶级对象，具有双重角色。

是JS访问浏览器窗口的一个接口。
是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window。

2. Window 对象（浏览器窗口对象）

2.1 Window 对象的调用方式：

不同于一般的对象，BOM 中的 Window 对象不需要创建就可以直接使用，使用其中的方法直接调用即可，类似于我们已知的静态方法，其语法格式：

window.方法名();

示例演示（弹出一个警告框 alert）：

window.alert("window对象警告框弹出！");

由于在客户端 JavaScript 中，window 对象是全局对象，所有的表达式都在当前的环境中计算。要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。

即，使用 window 对象中的方法可以不用带对象名，直接写方法名即可：
alert("window对象警告框弹出！");

2.2 Window 对象常用方法：

因为 Window 对象是BOM的顶级对象，故抽出来独立学习：

JavaScript (九) -- JavaScript BOM之 Window 对象常用方法

2.3 Location对象常用方法：

JavaScript Location对象包含有关当前文档位置的信息。它可以用来获取或设置文档的URL、域名、路径和片段等信息。

方法名	说明
assign()	加载新的文档。可以跳转页面（也称为重定向页面）会记录历史。
reload()	重新加载当前文档。如果参数为true强制刷新ctrl +f5。
replace()	用新文档替换当前文档。因为不能记录历史，所以不能后退页面。

<body>
    
    <input type="button" value="assign" id="assign">
    <input type="button" value="reload" id="reload">
    <input type="button" value="replace" id="replace">

</body>

<script>
    /**
     * 加载新文档,参数为URL地址，会产生历史记录
     */
   
    document.getElementById("assign").onclick = function(){
        location.assign("http://www.baidu.com");
    } 
    /**
     * 重新加载文档，参数为一个布尔值，默认为false
     * 1.如该方法没有设定参数值或设定为false，那该方法会使用浏览器缓存来重新加载页面（浏览器默认刷新方式）
     * 2.如该方法参数值为true，那么该方法会无条件向服务器重新下载该文档并重新加载
     * 
     */ 
    document.getElementById("reload").onclick = function(){
        location.reload(true);
    }
    

    // /**
    //  * 替换当前文档，和 assign 方法类似 
    //  * 但是不会产生历史记录，也就是无法通过后退键返回上一个页面
    //  */
    document.getElementById("replace").onclick = function(){
        location.replace("http://www.baidu.com");
    }
    
</script>

location 的属性如下：

<body>
	<div></div>
	<script>
		var div = document.querySelector('div');
		var timer = 5;
		setInterval(function(){
			if(timer == 0){
				location.href = 'http://www.itcast.cn';
			}else{
				div.innerHTML = '您将在' + timer + '秒钟后跳转到首页';
				timer--;
			}
		},1000);
	</script>
</body>

这是一个不点击自动跳转的js功能。

2.4 history对象常用方法：

JavaScript history对象保存了浏览器窗口访问过的所有页面的信息，它可以用来向前或向后在浏览历史中导航。

2.4.1 history对象常用方法

方法名	说明
back()	加载当前窗口 history 列表中的前一个 URL。
forward()	加载当前窗口 history 列表中的下一个 URL。
go(-1)	向后导航到上一个页面。
go(1)	向前导航到下一个页面。
pushState(stateObj, title, url)	向浏览历史添加一条新的记录。
replaceState(stateObj, title, url)	用新的数据更新当前历史记录。

<body>
    <a href="http://www.baidu.com">打开一个页面</a>
    <input type="button" value="goForward前进" onclick="goForward()">
    <input type="button" value="goBack后退" onclick="goBack()">
    <input type="button" value="go去后一个页面" onclick="go()">
</body>
<script>

    /**
     * forward()方法
     * 加载当前窗口历史列表的前一个页面
     * 类似于浏览器中的前进按钮
     * 
     */ 
    function goForward() {
        history.forward();
    }

    /**
     * back()方法
     * 加载当前窗口历史列表的后一个页面
     * 类似于浏览器中的后退按钮
    */
    function goBack() {
        history.back();
    }
    
    /**
     * go()方法
     * 加载当前窗口历史列表的一个具体页面
     * 参数可以为一个URL或者一个数字，数字代表要访问的URL在历史记录的相对位置
     */ 
    function go() {
        //-1表示向后一个页面
        history.go(-1);
    }
</script>

<script>
 // 向后导航到上一个页面
history.back();
 // 向前导航到下一个页面
history.forward();
 // 向后导航到上一个页面
history.go(-1);
 // 向前导航到下一个页面
history.go(1);
 // 添加一条新的历史记录
history.pushState({data: "example"}, "Example Title", "http://example.com/new-page");
 // 更新当前历史记录
history.replaceState({data: "new-data"}, "New Title", "http://example.com/current-page");
</script>

在这个例子中，我们分别使用 history.back() 和 history.forward() 向后和向前导航到浏览历史中的前一个页面和后一个页面。接着，我们使用 history.go(-1) 和 history.go(1) 向后和向前导航到浏览历史中的前一个和后一个页面。然后我们使用 history.pushState() 将一条新的历史记录添加到浏览器历史中，并使用 history.replaceState() 更新当前的历史记录。这些方法可以帮助我们在Web应用程序中实现浏览器历史记录管理的功能，使用户能够更方便地导航到之前访问的页面。

2.4.2 history对象属性（只有1个属性）

方法名	说明
length	返回浏览器历史列表中的 URL 数量。

注：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

	<body>
    <input type="button" value="获取历史记录数量" onclick="getLength()">
    </body>

    <script>
	/**
     *length属性
     * 显示当前窗口历史记录数量
     */ 
    function getLength() {
        alert(history.length);
    }
    <script>

2.5 screen对象常用方法：

JavaScript中的 screen 对象提供了有关用户屏幕的信息，如屏幕分辨率、可显示区域、颜色深度、分辨率比例等。它可以帮助我们调整我们的Web应用程序设计或确定我们应该使用哪种技术来呈现媒体内容。

方法名	说明
width	屏幕的宽度。（单位：像素）
height	屏幕的高度。（单位：像素）
availWidth	屏幕的可用宽度，不包括任务栏等。（单位：像素）
availHeight	屏幕的可用高度，不包括任务栏等。（单位：像素）
colorDepth	屏幕的颜色深度，即每个像素使用多少位来表示颜色。
pixelDepth	屏幕的像素深度，即每个像素使用多少位来表示图像。
orientation.angle	屏幕的方向角度，返回90、0或-90。
orientation.type	屏幕的方向类型，返回“portrait-primary”、“landscape-primary”、“portrait-secondary”或“landscape-secondary”四种类型之一。
lockOrientation(orientation)	锁定屏幕的方向，即强制横屏或竖屏，该方法使用的不是很广泛。
unlockOrientation()	解除屏幕方向的锁定状态。

实例演示：

使用了 screen.availWidth 和 screen.availHeight 属性获取设备屏幕的可用宽度和高度，并根据大小修改网页的样式：

<!DOCTYPE html>
<html>
<head>
	<title>Screen Size Example</title>
	<style>
		body {
			font-size: 30px;
			text-align: center;
			color: white;
			background-color: gray;
			padding: 10px;
		}
		.small {
			background-color: blue;
		}
		.medium {
			background-color: green;
		}
		.large {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h1>JavaScript Screen Size Example</h1>
	<p>Screen Size: <span id="size"></span></p>
	<script>
		function updateSize() {
			var width = screen.availWidth;
			var height = screen.availHeight;
			var size = width * height;
			var sizeClass = "medium";
			if (size < 500000) {
				sizeClass = "small";
			} else if (size > 1000000) {
				sizeClass = "large";
			}
			document.getElementById("size").innerHTML = width + " x " + height;
			document.body.classList = [sizeClass];
		}
		window.onload = updateSize;
		window.onresize = updateSize;
	</script>
</body>
</html>

在这个例子中，我们定义了一些CSS样式，用于根据屏幕大小改变网页的背景颜色。然后，我们使用JavaScript的 screen.availWidth 和 screen.availHeight 属性获取当前设备的屏幕可用宽度和高度，并计算出屏幕大小。我们通过比较屏幕大小和预设的阈值，将不同的样式类添加到网页的body元素中，以便根据大小修改样式。在窗口加载和大小改变时，我们调用 updateSize() 方法更新大小信息和样式。可以尝试在不同大小的屏幕上查看这个例子，看看它是如何改变背景色的。

小提示：

document.body.classList的解释：

document.body.classList 用于获取或设置文档中body元素的class属性值，是一个只读的DOMTokenList对象。通过它，我们可以添加、删除或替换元素的class属性值。例如，如果我们有一个body元素 <body class="wrapper"> ，我们可以使用classList对象添加或删除class值，如下所示：
// 添加class
document.body.classList.add("active");
 // 删除class
document.body.classList.remove("wrapper");
在这个例子中，我们首先使用 add() 方法将 "active" 类添加到body元素中。然后，我们使用 remove() 方法删除 "wrapper" 类。此时，body元素的class属性会变为 <body class="active"> 。

2.6 navigator对象常用方法：

JavaScript中的 navigator 对象提供了有关浏览器的信息。通过 navigator 对象，我们可以识别正在运行的浏览器及其版本、浏览器是否启用了Cookie、操作系统等信息。

方法名	说明
appName	浏览器名称；注意：“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。
appVersion	返回浏览器版本信息的只读属性。
appCodeName	返回浏览器的应用程序代码名称。
language	返回当前浏览器的语言，如"en-US"或"zh-CN"等。
platform	操作系统类型。
userAgent	返回一个包含浏览器标识符字符串的只读属性。浏览器设定的User-Agent字符串。
cookieEnabled	返回 true，如果 cookie 已启用，否则返回 false。
product	返回浏览器引擎的产品名称。
platform	返回浏览器平台（操作系统）。如"Windows"或"MacOS"等。
onLine	返回一个布尔值，指示浏览器是否联网。
javaEnabled()	方法返回 true，如果 Java 已启用。