BOM操作及DOM表单案例练习

最新推荐文章于 2023-02-10 16:42:07 发布

码小余の博客

最新推荐文章于 2023-02-10 16:42:07 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： javascript css html

本文链接：https://blog.csdn.net/Cool_breeze_/article/details/106086810

版权

前端专栏收录该内容

78 篇文章 2 订阅

订阅专栏

BOM

BOM是什么

BOM的全称为Browser Object Model,被译为浏览器对象模型。
BCM提供了独立于HTML页面内容，而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及
与浏览器窗口之间通信等功能。
BOM由一系列对象构成，这些对象可以简单理解为是由各个浏览器所提供的，例如Window对象等。

Window对象是什么

BOM中最核心的对象就是Window对象，该对象表示运行HTML页面的浏览器窗口。
在浏览器环境中，Window对象具有双重角色。该对象既是允许JavaScript逻辑访问浏览器窗口的一
个对象，又是ECMAScript规范中的Global全局对象。
这就说明了，在浏览器环境中运行、JavaScript逻辑时，在全局作用域中定义的对象、变量和函数都是
Window对象的属性和方法。
也可以通过Window对象访问Global全局对象的属性和方法。例如NaN、undefined和parselnt()方
法等。

window对象示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象</title>
	</head>
	<body>
		<script type="text/javascript">
			// window对象是浏览器窗口中的顶级(全局)对象
			
			// 全局变量 - window对象的属性
			var v = 100;
			console.log(v)
			console.log(window.v)
			// 函数 - window对象的方法
			function fun() {
				console.log("this is function...")
			}
			fun()
			window.fun()
			
			// 删除对象的属性
			// delete window.v
			// console.log(window.v)
			
			// window对象的属性和方法在调用时 - 允许省略"window."
			console.log(window.document)
		</script>
	</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dLCN1IpV-1589293560311)(C:\Users\20445\AppData\Roaming\Typora\typora-user-images\image-20200512093826499.png)]

Window对象的属性

Window对象的属性数量较多，包含了浏览器窗口的基本信息、也包含了一些复杂的信息。可以人为
将Window对象分为以下三类:

BOM中其他对象，例如Navigator对象等。
一些有关浏览器窗口的基本信息等，这些属性多属于DOM 0级别，并不是W3C标准规范。
包含了大量有关HTML 5版本新增的功能等。

浏览器窗口的宽带和高度

Window对象提供的属性中可以获取当前浏览器窗口的宽度和高度，具有两组:

innerWidth和innedHeight属性
只读属性，返回当前浏览器窗口的可视宽度和高度。如果存在滚动条，也包含滚动条。
outterWidth和outterHeight属性
只读属性，返回当前浏览器窗口的整个宽度和高度。

图片跟随窗口变化示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片跟随窗口变化</title>
	</head>
	<body>
		<img id="img" src="img/th.jpg" >
		<script type="text/javascript">
			var img = document.getElementById("img")
			// resize事件 - 当窗口大小变化时触发
			window.addEventListener("resize", () => {
				console.log(window.innerWidth, window.innerHeight)
			})
		</script>
	</body>
</html>

实现效果：

Window对象与self属性

Window对象的self属性返回当前浏览器窗口的只读属性。换句话讲，self 属性返回的是Window对象
的引用。

console.log(window == window.self);

也可以通过以下代码判断当前浏览器是否是最顶层窗D:

if (window.top != window.self) {
	console.log("这个窗口不是最顶层窗口"); 
}else{
	console.log("这个窗口是最顶层窗口");
}

Window对象的方法

Window对象的方法，主要从以下几方面进行学习:

系统提示框: alert()方法、 confirm()方法和prompt()方法
打开与关闭窗口: open()与close(方法、showModalDialog()
DOM规范标准0级别的一些方法
定时器: setTimeol ut()与clear Timeout()、setinterval()与cleadnterval()

Navigator对象

Navigator对象包含了一些有关浏览器状态的信息。可以通过window.navigatoc属性得到Navigator
对象。
Navigator对象提供一系列常用属性，获取当前浏览器的信息。

属性名称	描述
appCodeName	浏览器的代码名
appName	浏览器的名称
appVersion	浏览器的平台和版本信息
platform	运行浏览器的操作系统平台

console.log('浏览器的代码名: ' + navigator.appCodeName);
console.log('浏览器的名称: ' + navigator.appName);
console.log('浏览器的平台和版本信息:' + navigator.appVersion);
console.log('运行浏览器的操作系统平台:' + navigator.platform);

userAgent属性

Navigator对象的userAgent属性返回由客户机发送服务器的Jser - agent头部的值。userAgent属
性是一个只读的字符串，声明了浏览器用于HT TP请求的用户代理头的值。

浏览器产品	userAgent属性值
Firefox	Moilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
Chrome	Moilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML， like Gecko) Chrome/52.0.2743.82 Safari/537.36
IE 8	Moilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0;SL CC2; .NET CL _R 2.0.50727; NET CL R 3.5.30729; NET CL R 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
IE 11	Moilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SL CC2; NET CL R 2.0.50727; .NET CL R 3.5.30729; .NET CL R 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
Safari	Moilla/5.0 (Macintosh; Intel Mac OS X 10124) AppleWebkit/603.1.30 (KHTML, like Gecko) Version/10.1 Safari/603.1.30

var ua = navigator.userAgent
if (/firefox/i.test(ua)) {
    console.log("当前使用的是 Firefox 浏览器")
} else if (/chrom/i.test(ua)) {
    console.log("当前使用的是Chrome浏览器")
} else if(/safari/i.test(ua)){
    console.log("当前使用的是Safari 浏览器")
} else if(/msie/i.test(ua)){
    console.log("当前使用的是IE 11之前版本的浏览器")
} else if("ActiveXObject." in window){
    console.log("当前使用的是IE 11浏览器")
}

if (/windows/i.test(ua)){
    console.log("当前使用的是Windows操作系统");
}else if (/mac/i.test(ua)){
    console.log("当前使用的是Mac操作系统");
}else if (/android/i.test(ua)){
    console.log("当前使用的是Android操作系统");
}else if (/iphone/i.test(ua)){
    console.log("当前使用的是iPhone操作系统");
}

History对象是什么

History对象包含用户在浏览器中访问过的URL (网址)。

length属性: History对象的length属性可以获取用户在浏览器中访问网址的数量。
```
console.log('用户访问的网址数量为:'+ history.length);
```
History对象还提供了以下方法实现浏览器前进和后退功能。

方法名称	描述
forward()	实现跳转下一个页面，作用和浏览器的前进按钮一样
back()	实现转跳到上一个页面，作用和浏览器的回退按钮一样
go()	实现跳转到指定的页面。如果为负数表示后退,如果为正数表示前进

Location对象是什么

Location对象包含了浏览器的地址栏中的信息，该对象主要用于获取和设置地址。
Location对象很特别，因为该对象既是Window对象的属性，又是Document对象的属性。

console.log(window.location == document.location);// true

Location对象的属性

Location对象不仅存储了地址栏中的信息，还提供了解析功能。可以通过不同的Location对象的属性
访问不同的地址栏中的信息。

属性名称	描述
host	返回服务器名称和端口号
hostname	返回服务器名称
href	返回当前加载页面的完整URL
pathname	返回当前JRL .中的目录和文件名
port	返回当前URL中的端口号
protocol	返回页面使用的网络协议

通过可以获取和设置浏览器的地址栏中的地址信息。

//获取当前浏览器窗口的地址栏信息
console.log('Location对象为: ' + window.locaticn); 
//设置当前浏览器窗口的地址栏信息
window.location = 'http://www.wolongxueyuan.com';

上述功能同样可以通过L ocation对象的bref属性完成。

//获取当前浏览器窗口的地址栏信息
console.log('Location对象的href属性为: ' + location.href);
//设置当前浏览器窗口的地址栏信息
location.href = 'http://www.wolongxueyuan.com';

查询字符串参数

L ocation对象提供了search属性，用于返回JRL包含的查询字符串。

//取得查询字符串并去掉开头的问号
var qs = location.search.length > 0 ? location.search.substring(1) :";

Locaton对象的方法

Location对象提供了以下方法:

方法名称	描述
assign()	载入一个新的文档，作用和直接修改Location相同
reload()	重新载入当前文档，作用和刷新按钮一样。参数为true时，则会强制清空缓存刷新页面
replace()	用新的文档替换当前文档(不会生成历史记录，不能使用回退按钮回退)

刚学完DOM表单,就顺便写个案例练习一下~

表单验证案例

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证案例</title>
	</head>
	<style type="text/css">
		* {
			box-sizing: border-box;
		}
		
		body {
			background-image: url(img/2015263.jpg);
			background-repeat: no-repeat;
		}
		
		#form {
			width: 500px;
			height: 800px;
			margin: 50px auto;
		}
		
		#form h1 {
			color: #DCD75F;
		}
		
		.model {
			width: 480px;
			height: 52px;
			margin-bottom: 40px;
			position: relative;
		}
		
		.model input {
			width: 100%;
			height: 100%;
			border: 1px solid #aaa;
			border-radius: 4px;
			font-size: 20px;
			color: #aaa;
			padding-left: 20px;
			outline: none;
		}
		
		.model input:focus {
			border: 1px solid #549df8;
		}
		
		#submit {
			width: 480px;
			height: 60px;
			background-color: #3083ff;
			border: none;
			outline: none;
			border-radius: 4px;
			box-shadow: 0 5px 8px 0 rgba(24,95,255,.1);
			text-align: center;
			font-weight: lighter;
			color: #fff;
			font-size: 24px;
		}
		
		.model .error {
			color: red;
			display: none;
		}
		
		.model .success {
			width: 40px;
			height: 100%;
			position: absolute;
			top: 0px;
			left: 440px;
			border-radius: 4px;
			background-image: url(img/benefits.png);
			background-size: 100%;
			background-position: 0;
			display: none;
		}
		
		.model .tips {
			display: none;
		}
	</style>
	<body>
		<form id="form" action="#">
			<h1>欢迎注册我的网页</h1>
			<div class="model">
				<!-- 
					placeholder - 点击输入框 输入框中的原提示文字不消失 光标停留在前面，开始输入文字后消失
				 -->
				<input type="text" id="username" placeholder="用户名">
				<div class="error name_error"></div>
				<div class="success name_success"></div>
			</div>
			<div class="model" id="pwd_model">
				<input type="password" id="password" placeholder="密码">
				<div class="error pwd_error"></div>
				<div class="success pwd_success"></div>
				<div class="tips">不能包括空格</div>
				<div class="tips">长度为8-16个字符</div>
				<div class="tips">必须包含字母、数字、符号中至少2种</div>
			</div>
			<div class="model">
				<input type="password" id="confirm_password" placeholder="重复密码">
				<div class="error confirm_error"></div>
				<div class="success confirm_success"></div>
			</div>
			<input type="submit" id="submit" value="立即注册">
		</form>
		<script type="text/javascript">
			// 获取所有的input输入框
			var username = document.getElementById("username")
			var password = document.getElementById("password")
			var confirmPassword = document.getElementById("confirm_password")
			var submit = document.getElementById("submit")
			
			// 获取到所有的错误提示div
			var nameError = document.getElementsByClassName("name_error")[0]
			var pwdError = document.getElementsByClassName("pwd_error")[0]
			var confirmError = document.getElementsByClassName("confirm_error")[0]
			
			// 获取到所有的正确提示div
			var nameSuccess = document.getElementsByClassName("name_success")[0]
			var pwdSuccess = document.getElementsByClassName("pwd_success")[0]
			var confirmSuccess = document.getElementsByClassName("confirm_success")[0]
			
			// 获取密码规则的温馨提示
			var tips = document.getElementsByClassName("tips")
			
			// 获取密码model
			var pwdModel = document.getElementById("pwd_model")
			
			
			
			// 用户名随便写~(但是不能为空)
			// username获得焦点时，提示
			username.addEventListener("focus", function() {
				// 点击这个输入框后，先把字体变成黑色的
				username.style.color = "#000"
			})
			// username失去焦点时，验证
			username.addEventListener("blur", checkName)
			
			/* 点击密码框，提示信息
				* 获取焦点时，提示用户密码规则
				* 失去焦点时，验证密码规则
					* 如果错误则提示哪错了
					* 如果正确则验证正确
					* 如果密码为空，提示
			*/
		   password.addEventListener("focus", function() {
			   // 点击这个输入框后，先把字体变成黑色的
			   password.style.color = "#000"
			   
			   pwdError.textContent = ""
			   for (var i = 0; i < tips.length; i++) {
				   var tip = tips[i]
				   tip.style.display = "block"
				   pwdModel.style.marginBottom = "66px"
			   }
		   })
		   
		   // 设置规则
		   /*
			* 不能包含空格
			* 长度为8-16个字符
			* 必须包含字母、数字、符号中至少2种
		   */
		   password.addEventListener("blur", checkPwd)
		   
		   // 重复密码
		   /*
			比较是否和上面设置的密码一致
		   */
		   confirmPassword.addEventListener("focus", function() {
			   // 点击这个输入框后，先把字体变成黑色的
			   confirmPassword.style.color = "#000"
		   })
		   
		   confirmPassword.addEventListener("blur", checkConfirmPwd)
		   
		   function checkName() {
			  if (username.value === "") {
				  console.log("用户名为空")
				  nameError.textContent = "用户名不能为空"
				  nameError.style.display = "block"
				  nameSuccess.style.display = "none"
				  return false
			  } else {
				  nameError.textContent = ""
				  nameError.style.display = "none"
				  // 提示正确
				  nameSuccess.style.display = "block"
				  return true
			  }
		   }
		   
		   function checkPwd() {
			   for (var i = 0; i < tips.length; i++) {
				   var tip = tips[i]
				   tip.style.display = "none"
			   }
			   pwdModel.style.marginBottom = "40px"
			   
			   
			   var noSpaceReg = /^[^\s]+$/
			   var lenReg = /.{8,16}$/
			   var leastTwoReg = /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{8,16}$/
			   
			   var pwdValue = password.value
			   if (password.value === "") {
				   pwdError.textContent = "密码不能为空"
				   pwdError.style.display = "block"
				   pwdSuccess.style.display = "none"
				   return false
			   } else if (!noSpaceReg.test(pwdValue)) {
				   pwdError.textContent = "密码中不能包含空格"
				   pwdError.style.display = "block"
				   pwdSuccess.style.display = "none"
				   return false
			   } else if (!lenReg.test(pwdValue)) {
				   pwdError.textContent = "密码长度为8-16位字符"
				   pwdError.style.display = "block"
				   pwdSuccess.style.display = "none"
				   return false
			   } else if (!leastTwoReg.test(pwdValue)) {
				   pwdError.textContent = "密码中必须包含字母、数字、符号中至少2种"
				   pwdError.style.display = "block"
				   pwdSuccess.style.display = "none"
				   return false
			   } else if (noSpaceReg.test(pwdValue) && lenReg.test(pwdValue) && leastTwoReg.test(pwdValue)) {
				   pwdError.textContent = ""
				   pwdError.style.display = "none"
				   // 提示正确
				   pwdSuccess.style.display = "block"
				   return true
			   }
		   }
		   
		   function checkConfirmPwd() {
			   if (password.value !== confirmPassword.value) {
				   confirmError.textContent = "密码不一致,请重新输入"
				   confirmError.style.display = "block"
				   confirmSuccess.style.display = "none"
				   return false
			   } else {
				   confirmError.textContent = ""
				   confirmSuccess.style.display = "block"
				   return true
			   }
		   }
		   
		   // 提交注册
		   submit.addEventListener("click", function(event) {
			   if (!checkName() || !checkPwd() || !checkConfirmPwd()) {
				   // 说明其中肯定有一项是不符合规则的，则不能提交
				   event.preventDefault()
			   }
		   })
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

码小余の博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
BOM操作及DOM表单案例练习

BOMBOM是什么BOM的全称为Browser Object Model,被译为浏览器对象模型。BCM提供了独立于HTML页面内容，而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与浏览器窗口之间通信等功能。BOM由一系列对象构成，这些对象可以简单理解为是由各个浏览器所提供的，例如Window对象等。Window对象是什么BOM中最核心的对象就是Window对象，该对象表示运行HTML页面的浏览器窗口。在浏览器环境中，Window对象具有双重角色。该对象既是允许JavaScript逻
复制链接

扫一扫