js基础篇 07 Document获取元素事件元素属性选择实战演练

最新推荐文章于 2024-08-28 14:41:59 发布

LeyoBiang

最新推荐文章于 2024-08-28 14:41:59 发布

阅读量594

点赞数

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

本文链接：https://blog.csdn.net/qilie_32/article/details/114176150

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

07 Document获取元素事件元素属性选择实战演练

Document获取元素

方法

getElementById()

因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
get 获得 element 元素 by 通过驼峰命名法
参数 id是大小写敏感的字符串
返回的是一个元素对象

例子

<div id="time">2019-9-9</div>
<script>
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    console.dir(timer);
</script>

补充

console.dir 可以打印我们返回的元素对象更好的查看里面的属性和方法

getElementsByTagName()

1.返回的是获取过来元素对象的集合以伪数组的形式存储的

2.我们想要依次打印里面的元素对象我们可以采取遍历的方式

3.如果页面中只有一个该元素返回的还是伪数组的形式

4.如果页面中没有这个元素返回的是空的伪数组的形式

5.element.getElementsByTagName(‘标签名’); 父元素必须是指定的单个元素

例子

var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
for (var i = 0; i < lis.length; i++) {
    console.log(lis[i]);
}
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

getElementsByClassName()

H5新增，根据类名获得某些元素集合

querySelector()

H5新增，返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box #nav

querySelectorAll()

H5新增，querySelectorAll()返回指定选择器的所有元素对象集合

属性

body

获取body 元素

html、documentElement

获取html 元素

innerHTML

获取标签内的的内容

innerText

获取标签内的的文字，不识别标签

事件

事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素

事件三要素

事件源

事件被触发的对象像是qt中的信号

事件类型

如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下

事件处理程序

通过一个函数赋值的方式完成

例子

var btn = document.getElementById('btn');
btn.onclick = function() {
    alert('btn被按下');
}

执行事件步骤

获取事件源
绑定事件注册事件
添加事件处理程序

常见事件

onclick

点击后触发的事件

onfocus

获得焦点触发的事件

onblur

失去焦点触发的事件

元素属性选择

如果该属性是标签的属性，则可以直接

标签.属性名=属性;

如果该属性是其css的style属性，则需要

标签.style.属性名=属性;

实战演练

注册页面

要求

有一个用户名输入框和两个密码输入框，

用户名输入框要显示用户名的失焦文字

用户名输入框需要判断用户名是否为‘biang’，

如果是则呈现用户名已被注册，如果不是则呈现用户名可用

第一个输入框须判断是否长度大于或等于8，

如果是则呈现密码可用，如果不是则呈现密码长度需要大于或等于8

第二个密码输入框需要判断是否密码和第一个密码输入框里面的密码是否一致，

如果是则呈现两次输入的密码一致，如果不是则呈现两次输入的密码不一致

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册页面</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			ul{
				width: 500px;
			}
			ul li h4{
				display: inline-block;
				width: 120px;
				text-align: center;
				line-height: 10px;
			}
			ul li span{
				color: red;
			}
			ul li {
				height:30px;
				list-style: none;
			}
			.account{
				color: gainsboro;
			}
			ul li:last-child {
				height:60px;
				margin-right: 200px;
				text-align: center;
			}
			.submit-tip{
				display: inline-block;
				width: 300px;
				height: 30px;
				text-align: center;
			}
			.submit{
				width: 100px;
				height: 30px;
				background-color: white;
				border: 1px solid aqua;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<h4>账号：</h4>
				<input type="text" class="account" value="请输入账号" />
				<span class="account-tip"></span>
			</li>
			<li>
				<h4>密码：</h4>
				<input type="password" class="password-first" />
				<span class="password-first-tip"></span>
			</li>
			<li>
				<h4>再次输入密码：</h4>
				<input type="password" class="password-second" />
				<span class="password-second-tip"></span>
			</li>
			<li>
				<span class="submit-tip"></span>
				<input type="button" class="submit" value="注册" />
			</li>
		</ul>
		
		<script type="text/javascript">
			account = document.getElementsByClassName('account')[0];
			password1 = document.getElementsByClassName('password-first')[0];
			password2 = document.getElementsByClassName('password-second')[0];
			accountTip = document.getElementsByClassName('account-tip')[0];
			password1Tip = document.getElementsByClassName('password-first-tip')[0];
			password2Tip  = document.getElementsByClassName('password-second-tip')[0];
			submit = document.getElementsByClassName('submit')[0];
			submitTip= document.getElementsByClassName('submit-tip')[0];
			
			var flags=[false,false,false];
			function password2Check(){
				console.log('password2Check');
				if(password2.value!=''){
					if(flags[1]==false){
						password2Tip.innerText='密码不符合规范';
						password2Tip.style.color='red';
						flags[2]=false;
					}else
					if(password2.value==password1.value){
						password2Tip.innerText='两次输入的密码一致';
						password2Tip.style.color='green';
						flags[2]=true;
					}else{
						password2Tip.innerText='两次输入的密码不一致';
						password2Tip.style.color='red';
						flags[2]=false;
					}
				}
			}
			account.onfocus=function(){
				if(this.value=='请输入账号'){
					this.value='';
					this.style.color='black';
					flags[0]=false;
				}
			}
			account.onblur=function(){
				if(this.value==''){
					this.value='请输入账号';
					this.style.color='gainsboro';
					flags[0]=false;
				}else
				if(this.value=='biang'){
					accountTip.innerText='该用户名已被注册';
					flags[0]=false;
				}else{
					accountTip.innerText='该用户名可用';
					accountTip.style.color='green';
					flags[0]=true;
				}
			}		
			password1.onblur=function(){
				if(this.value!=''){
					if(this.value.length>=8){
						password1Tip.innerText='密码可用';
						password1Tip.style.color='green';
						flags[1]=true;
					}else{
						password1Tip.innerText='密码长度需要大于或等于8';
						password1Tip.style.color='red';
						flags[1]=false;
					}
				}
				password2Check();
			}
			password2.onblur=password2Check;
			
			submit.onclick=function(){
				if(!flags[0]){
					submitTip.innerText='用户名不满足条件';
				}else if(!flags[1]){
					submitTip.innerText='密码不满足条件';
				}else if(!flags[2]){
					submitTip.innerText='密码重新输入不满足条件';
				}else {
					submitTip.innerText='注册成功';
					submitTip.style.color='green';
				}
			}
		</script>
	</body>
</html>