@TOC

BOM对象概述

BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
在这里插入图片描述
BOM可实现功能：

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口的大小
  • 页面的前进、后退

window对象下的主要对象

在这里插入图片描述
在这里插入图片描述
举例说明 :
页面定义一个按钮,点击按钮跳转至百度
代码 :

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例</title>
		<script type="text/javascript">
			function goBaidu(){
				window.location = "https://www.baidu.com";
			}
		</script>
	</head>
	<body>
		<button onclick="goBaidu();">点我跳转至百度</button>
	</body>
</html>

window对象的常用方法

在这里插入图片描述
confirm()：将弹出一个确认对话框
语法:
confirm("对话框中显示的纯文本")
confirm()与alert ()、 prompt()区别:
alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
举例说明 :
编写如下JS

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例</title>
		<script type="text/javascript">
			var con = window.confirm("确定要删除这条数据么?");
			if(con == true){
				alert("删除成功!");
			}else{
				alert("你取消了删除!");
			}
		</script>
	</head>
	<body>		
	</body>
</html>

history对象 主要管理浏览记录

在这里插入图片描述

location对象 主要管理页面跳转

在这里插入图片描述

document对象概述

document 对象 : 主要管理页面中的各种元素的
JS把页面所有的标签都看成对象,而document对象包含的就是<body></body>标签之间的一些标签,通过document对象可以获取他们并进行操作;
它的常用方法有:
在这里插入图片描述

按ID获取页面元素

这个常用方法大家需要记住,因为我们用JS主要用的就是document的这些获取页面元素的方法了;
举个例子 :
假设页面上有这么几个标签

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例</title>
	</head>

	<body>
		<p id="p1" name="g1">小红</p>
		<p id="p2" name="g1">大紫</p>
		<p id="p3" name="g2">老黄</p>
		<p id="p4" name="g2">瘦绿</p>
		<p id="p5" name="g3">胖蓝</p>
		<p id="p6" name="g3">五彩斑斓黑</p>
	</body>
</html>

现在呢大家都没有颜色,比如拿小红来说,想获取 "小红" 可以执行下面的代码 :

<script type="text/javascript">
    // 获取小红所在的p标签
    var hong = document.getElementById("p1"); 
    // 获取p标签中间的值
    alert(hong.innerHTML);
</script>

大家注意一个细节,就是小红这段文字是在p标签的开始于结束标签之间所以采用innerHTML属性获取
那么大家注意一个问题,比如我想获取某个标签的value值怎么办呢?

<input type="text" id="p7" value="小白" />

如果想要获取小白的话 就需要调用这样的JS方法

// 获取标签的value值
var p7 = document.getElementById("p7");
alert(p7.value);

设置样式：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例</title>
	</head>
	<body>
		<p id="p1" name="g1">小红</p>
		<p id="p2" name="g1">大紫</p>
		<p id="p3" name="g2">老黄</p>
		<p id="p4" name="g2">瘦绿</p>
		<p id="p5" name="g3">胖蓝</p>
		<p id="p6" name="g3">五彩斑斓黑</p>
		<input type="text" id="p7" value="小白" />
		<script type="text/javascript">
			// 将老黄设置为黄色
			var huang = document.getElementById("p3");
			// 设置p3的样式
			huang.style.color = "goldenrod";
		</script>
	</body>
</html>

按name属性获取标签元素

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例</title>
	</head>
	<body>
		<p id="p1" name="g1">小红</p>
		<p id="p2" name="g1">大紫</p>
		<p id="p3" name="g2">老黄</p>
		<p id="p4" name="g2">瘦绿</p>
		<p id="p5" name="g3">胖蓝</p>
		<p id="p6" name="g3">五彩斑斓黑</p>
		<input type="text" id="p7" value="小白" />
		<script type="text/javascript">
			// 按name获取
			var ps = document.getElementsByName("g1"); // 因为一次性获取了两个标签 所以PS是一个数组
			// 遍历标签数组
			for (var i = 0; i < ps.length; i++) {
				alert(ps[i].innerHTML);
			}
		</script>
	</body>
</html>

按标签获取标签元素

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>HTML案例</title>
	</head>
	<body>
		<p id="p1" name="g1">小红</p>
		<p id="p2" name="g1">大紫</p>
		<p id="p3" name="g2">老黄</p>
		<p id="p4" name="g2">瘦绿</p>
		<p id="p5" name="g3">胖蓝</p>
		<p id="p6" name="g3">五彩斑斓黑</p>
		<input type="text" id="p7" value="小白" />
		<script type="text/javascript">
			// 获取页面中所有的p标签
			var allp = document.getElementsByTagName("p");
			// 遍历循环
			for (var i = 0; i < allp.length; i++) {
				alert(allp[i].innerHTML);
			}
		</script>
	</body>
</html>

Q.E.D.