devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：你好赵伟 | 2024-05-06 10:52:12

赞

踩

document获取input元素绑定事件

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

Document获取元素

方法

getElementById()
  1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
  2. get 获得 element 元素 by 通过 驼峰命名法
  3. 参数 id是大小写敏感的字符串
  4. 返回的是一个元素对象
例子
<div id="time">2019-9-9</div>
<script>
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    console.dir(timer);
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
补充

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'));

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
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被按下');
}

  • 1
  • 2
  • 3
  • 4

执行事件步骤

  1. 获取事件源
  2. 绑定事件 注册事件
  3. 添加事件处理程序

常见事件

onclick

点击后触发的事件

onfocus

获得焦点触发的事件

onblur

失去焦点触发的事件

元素属性选择

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

标签.属性名=属性;

  • 1

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

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

  • 1

实战演练

注册页面

要求

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

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

用户名输入框需要判断用户名是否为‘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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/543852
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号