JavaScript BOM对象（浏览器对象模型）

最新推荐文章于 2022-11-28 00:21:08 发布

BF-LoneSilverWind

最新推荐文章于 2022-11-28 00:21:08 发布

阅读量356

点赞数

分类专栏： web 前端_基础

本文链接：https://blog.csdn.net/digua930126/article/details/105846975

版权

web 前端_基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript - BOM

一.理解

ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何的网页内容无关。多年来，缺少事实上的规范导致BOM既有意思又有问题，因为浏览器厂商会按照各自的想法随意去扩展它。于是，浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在，很大程度上是由于他们提供了与浏览器的互操作型。W3C为了把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范当中。
在这里插入图片描述

二.window对象

BOM的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应的window对象。

1、window对象方法

1.1、系统对话框

浏览器通过（实际是window对象的方法）alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。

a.消息框:`alert`，常用。

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

b.输入框:`prompt`，返回提示框中的值。

prompt() 方法用于显示可提示用户进行输入的对话框。

参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。

c.确认框:`confirm`，返回 true/false.

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

代码示例:

	<div id="dv">this is a div</div>
		
	<button onclick="test_alert();">消息框</button>
	<button onclick="test_prompt();">输入框</button>
	<button onclick="test_comfirm();">确认框</button> 

	<script type="text/javascript">
		// 消息框
		function test_alert() {
			alert('消息框！');
		}

		// 输入框
		function test_prompt() {
			var item = prompt('请输入年龄');  // item得到输入的值
			alert(item);
			alert(prompt('请输入年龄', 18));  // 将输入的值输出
		}
		
		/**
		 * 确认框
		 * 返回值：boolean（true|false）
		 */
		function test_comfirm() {
			var result = confirm('真的要改吗？');
			if (result) {
				var ele = document.getElementById("dv");
				ele.style.color = "red";
				ele.innerHTML = "<span>div is red</span>";
			} else {
				alert("没事别瞎点");
			}
		}
	</script>

消息框：
在这里插入图片描述
输入框:

确认框：

确定

取消

1.2、打开窗口

window.open()方法

window.location.href = "index.html";
既可以导航到一个特定的URL也可以用来打开一个新的窗口

<input type="button" name="open" value="sxt" onclick='open_sxt();' />

    <script type="text/javascript">
		function open_sxt() {
			window.open('http://www.shsxt.com', '_block');
			// window.open();  // 空白窗口
		}
	</script>

window.open()  打开
    1.网址
    2.打开方式  _self _blank
    3.样式...

1.3、关闭窗口

window.close()：关闭窗口。
例：点击按钮关闭当前窗口。

<input type="button" value="关闭窗口" onclick="window.open('about:blank', '_self').close();" />

1.4、时间函数

setInterval(function(){},时间)

定时器
    内置的方法
    作用:
        每隔一段时间或者延迟一段事件执行某些代码
    分类:
        1.重复执行定时器  执行多次
             返回值=setInterval(function(){},时间)
             时间ms为单位

        2.延迟执行定时器  只执行一次
            setTimeout(function(){},时间)

     清除定时器
        clearInterval(返回值)
        clearTimeout(返回值)

setTimeout(function(){},时间)
在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以clearTimeout(id)来清除指定函数的执行。

<h1 id="h1"></h1>
<input type="button" value="停止显示时间" onclick='stop_show();' />

<script type="text/javascript">
	// 延迟3 秒后出现 alert
	function hello() {
		alert("对不起, 久等了！");
	}
	window.setTimeout("hello()", 3000);
			
	// 不停的打印当前时间，当时间秒数为0时显示为红色
	var timeout;
			
	function show_time() {
		// 拿到当前时间
		var date = new Date();
		var time = date.toLocaleString();
		// 拿到相应对象
		var h1 = document.getElementById('h1');
		h1.innerHTML = time;
				
		console.log(date.getSeconds());
var sec = date.getSeconds();
		sec = sec % 10;  // 对10取余

		// 根据需求添加样式
		if(0 == sec) {  // 当时间的秒数变成0时，显示红色字体
			h1.innerHTML = '<span style="color:red">' + time + '</span>';
		} else {
			h1.innerHTML = time;
		}
				
		/*
		 * 定时操作，只执行一次
		 * 		第一个参数：执行的方法；
		 * 		第二个参数：定时，单位是毫秒
		 */
		timeout = window.setTimeout(show_time, 1000);  // 接收setTimeout()返回的 ID值
	}
			
	window.setTimeout(show_time, 1000);  // 只执行了一次
			
	// 停止操作
	function stop_show() {
		clearTimeout(timeout);  // 返回的ID值用来停止函数
	}
</script>

在这里插入图片描述

2、window对象属性

window对象的双重身份决定着，在该对象中既有着核心语法中的全局方法和属性，又有着和浏览器相关的属性和方法，以下的一些对象都是属于window对象的属性值。

三.history历史对象

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

history对象的属性：

length，返回浏览器历史列表中的 URL 数量。

history对象的方法：

`back()`：加载 history 列表中的前一个 URL。

`forward()`：加载历史列表中的下一个 URL。

当页面第一次访问时，还没有下一个url。

`go(number|URL)`: URL 参数使用的是要访问的 URL。

而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面。go(-2)上上个

JS_BOM_history_a.html

	<body>
		<h1>A页面</h1>
		
		<a href="JS_BOM_history_b.html">进入B页面</a><br />
		
		<button type="button" onclick="window.history.forward();">前进至B页面</button>
	</body>

JS_BOM_history_b.html

	<body>
		<h1>B页面</h1>
		
		<a href="JS_BOM_history_c.html">进入C页面</a><br />
		
		<button type="button" onclick="window.history.forward();">前进至C页面</button><br />
		
		<button type="button" onclick="window.history.back();">后退至A页面</button>
	</body>

JS_BOM_history_c.html

	<body>
		<h1>C页面</h1>
		
		<button type="button" onclick="window.history.go(-1);">后退至B页面</button><br />
		<button type="button" onclick="window.history.go(-2);">后退至A页面</button>
	</body>

四.location位置对象

location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。

location 对象的属性:

`href`：设置或返回完整的 URL

location 对象的方法:

`reload()`：刷新重新加载当前文档。

window.location.reload();

`replace()`：替换用新的文档替换当前文档。

window.location.replace();

	<input type="button" value="刷新" onclick="window.location.reload();" />

	<input type="button" name="" id="" value="shsxt官网" onclick="open_sxt();" />

	<script type="text/javascript">
		function open_sxt() {
			// 用新的文档替换当前文档
			alert(window.location.href); // 获取完整的url
			window.location.href = "http://www.shsxt.com";
				
			// 用新的文档替换当前文档
			// window.location.replace("http://www.baidu.com");
		}
	</script>

五.document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通过 window.document 属性对其进行访问。

document对象的body属性，提供对元素的直接访问，cookie属性，用来设置或返回与当前文档有关的所有cookie，write()方法，向文档写HTML表达式或JavaScript代码。还有其他属性和方法。在Document对象中讲解。

该对象作为DOM中的核心对象存在。

六、cookie对象

cookie的意图：

在本地客户端的磁盘上以很小的文件形式保存数据。

cookie的应用:

如：保存用户信息，下次自动登录。

cookie的组成:

名称对应值的文本形式组成 name=value。添加相同名称的cookie后者会覆盖前者

完整格式：

name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

向本地磁盘写入cookie（若有中文需要编码）：

document.cookie = 'name=value';
document.cookie = 'name=' + encodeURIComponent('value');

获取cookie（若有中文需要编码）：

document.cookie;
decodeURIComponent(document.cookie);

设置失效时间：

document.cookie = 'name=value; expires=' + date字符串;

删除cookie：

重新创建cookie，并把时间设置为当前时间之前即可。

	<button type="button" onclick="set_cookie();">添加cookie</button>
	
	<button type="button" onclick="get_cookie();">获取cookie</button>
	
	<button type="button" onclick="del_cookie();">删除cookie</button>
	
	<script type="text/javascript">
		// 添加cookie
		function set_cookie() {
			var exp = new Date();
			exp.setTime(exp.getTime() + 5000);
			console.log(exp.toUTCString());
			// 添加cookie且设置失效时间为10秒
			// 添加相同名称的cookie后者会覆盖前者
			document.cookie = 'name=' + encodeURIComponent('张三') + '; expires=' + exp.toUTCString();
			document.cookie = 'name2=' + encodeURIComponent('李四') + '; expires=' + exp.toUTCString();
			document.cookie = 'name3=' + encodeURIComponent('王五') + '; expires=' + exp.toUTCString();
		}
		
		// 获取cookie
		function get_cookie() {
			var _cookie = decodeURIComponent(document.cookie);
			console.log(_cookie);
			var cookie_arr = _cookie.split('; ');
				
			for (var i in cookie_arr) {
				console.log(cookie_arr[i]);
			}
		}		

		// 删除cookie
		function del_cookie() {
			var exp = new Date();
			// 设置一个比当前时间小的时间即可
			exp.setTime(exp.getTime() - 1);
			// 添加cookie且设置失效时间为10秒
			// 根据name可以指定删除的cookie
			document.cookie = 'name=' + encodeURIComponent('张三') + '; expires=' + exp.toUTCString();
		}
	</script>

添加cookie:

在这里插入图片描述
获取cookie：

删除cookie:

如图name被删除了
在这里插入图片描述

BF-LoneSilverWind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript BOM对象（浏览器对象模型）

JavaScript - BOM一.理解    ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那么BOM（浏览器对象模型）则无疑才是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何的网页内容无关。多年来，缺少事实上的规范导致BOM既有意思又有问题，因为浏览器厂商会按照各自的想法随意去扩...
复制链接

扫一扫