2019-7-24 [HTML_JavaScript] BOM对象 windows对象 confim()方法及区别 history对象 locatio对象 document对象及方法_name="message"> ' ' '><script>document.locatio-CSDN博客

本文链接：https://blog.csdn.net/weixin_45172861/article/details/97290474

文章目录

0.JavaScript内置对象介绍
1 BOM对象概述
2. document对象概述
- 2.1 document的常用方法:
3. HTML颜色表

0.JavaScript内置对象介绍

1 BOM对象概述

BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
在这里插入图片描述
BOM可实现功能
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

1.1举例说明 :页面定义一个按钮,点击按钮跳转至百度

代码 :

<!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>

在这里插入图片描述

1.2 window对象的常用方法有:

在这里插入图片描述
这里面前两个我们已经用过了而open() 和 close()只是打开或关闭页面,没啥好研究的,那么接下来我们看下

1.3 confirm()方法

confirm()：将弹出一个确认对话框
语法:
confirm(“对话框中显示的纯文本”)

1.4 confirm()与alert ()、 prompt()区别:

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回
null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

1.5 举例说明 : 删除记录

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window的窗口</title>
		<script type="text/javascript">
			function deleteById(id){
				var flag = window.confirm("请确定是否删除该记录？！");
				//alert(flag);
				if(flag){
					alert("id为" +id+"的记录被删除");
				}else{
					alert("取消删除操作");
				}
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="删除" onclick="deleteById(1)" />
	</body>
</html>

1.6 history对象主要管理浏览记录及其常用方法

在这里插入图片描述
对应history对象我们只要记住一个方法就是 go();

一般我们做页面跳转的时候应用它会比较多,比如从数据展示页面跳转至添加页面,添加页面就可以配置一个按钮叫返回,然后执行的方法就是history.go(-1);

比如有两个页面
page1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location的使用</title>
		<script type="text/javascript">
			
			function func(){
				//设置需要跳转的网页有三种语式
				//法一:
				window.location="http://www.hainiuxy.com";
				//法二:
				window.location.href="http://www.hainiuxy.com"
				//法三:
				location.href="http://www.hainiuxy.com";
			}
		</script>
	</head>
	<body>
		<input type="button" value="海牛官网" onclick="func()">
		<br>
			<a href="js10.html">js10.html</a>
		<br>	
		<input type="button" value="前进" onclick="history.forward()" />
		<input type="button" value="前进" onclick="history.go(1)" />
	</body>
</html>

被跳转的js10.html页面如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		我是跳转到的第二个页面，嘻嘻<br>		
		<input type="button" value="后退" onclick="history.back()" />
		<input type="button" value="后退" onclick="history.go(-1)" />
	</body>
</html>

第一个网页：
在这里插入图片描述
第二个网页：

1.7 location对象主要管理页面跳转及其常用属性和常用方法

在这里插入图片描述

2. document对象概述

document 对象 : 主要管理页面中的各种元素的

JS把页面所有的标签都看成对象,而document对象包含的就是标签之间的一些标签,通过document对象可以获取他们并进行操作;

2.1 document的常用方法:

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>document</title>
		<script type="text/javascript">
			function fun(){
				1.//getElementById,根据id获得表单元素
				var p1 = document.getElementById("p1");
				alert(p1.innerHTML);//获得p标签之间的内容
				
				2.//getElementsByName,根据标签的name属性值获得一组标签
				var ps1 = document.getElementsByName("g1");
				alert(ps1.length);
				 for(var i = 0;i<ps1.length;i++){
					alert(ps1[i].innerHTML);
				} 
			
				3.//getElementsByTagName,根据标签名称获得一组标签
				var ps2 = document.getElementsByTagName("p");
				alert(ps2.length);
				
				4.//点击按钮获得文本的值
				var username = document.getElementById("username").value;
				alert(username);
				
				5.//点击按钮,设置老黄的文字颜色为黄色
				var p3 = document.getElementById("p3");
				p3.style.color = "yellow";
				
				6.//点击按钮,设置p5的内容
				var p5 = document.getElementById("p5");
				p5.innerHTML = "hello ,胖兰";
				p5.innerHTML = "<b>hello,胖兰</b>";
				p5.innerText = "<b>hello,胖兰</b>";
			}
		</script>
	</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="username" value="admin"><br>		
		<input type="button" value="按钮" onclick="fun()" />
	</body>
</html>