24、Docuement对象中的方法介绍
getElementById()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
//需求:当用户点击了校验按钮,要获取输入框中的内容,然后验证其是否合法
//验证的规则是:必须由字母,数字,下划线组成,并且长度是5到12位。
function onclickFun() {
//1.当我们要操作一个标签的时候,一定要先获取这个标签对象
var usernameObj = document.getElementById("username");
//[object HTMLInputElement]它就是dom对象
var usernameText=usernameObj.value;//获取输入框输入的值
//如何验证字符串,符合某个规则,需要使用正则表达式技术
var patt=/^\w{5,12}$/;
//test()方式用于测试某个字符串,是不是匹配我的规则
//匹配就返回true。不匹配就返回false。
if (patt.test(usernameText)){
alert("用户名合法!");
}else{
alert("用户名不合法!");
}
}
</script>
<body>
用户名:<input type="text" id="username"/>
<button onclick="onclickFun()">校验</button>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//表示字符串中,是否包含字母e
//var patt=new RegExp("e");
//表示字符串中是否包含字母a或b或c
//var patt=/[abc]/;
//表示字符串中是否包含小写字母
//var patt=/[a-z]/;
//表示字符串中是否包含大写字母
//var patt=/[A-Z]/;
//表示字符串中是否包含任意数字
//var patt=/[0-9]/;
//表示要求字符串,是否包含字母、数字、下划线
//var patt=/\w/;
//表示要求字符串中是否包含至少一个a
//var patt=/a+/;
//表示要求字符串中是否包含零个或多个a
//var patt=/a*/;
//表示要求字符串中是否包含一个或零个a
//var patt=/a?/;
// 表示要求字符串中是否包含三个a
//var patt=/a{3}/;
// 表示要求字符串中是否包含至少三个连续的a,最多5个连续的a
//var patt=/a{3,5}/;
// 表示要求字符串中是否包含至少三个连续的a
//var patt=/a{3,}/;
// 表示要求字符串必须以a结尾
//var patt=/a$/;
// 表示要求字符串必须以a开头
//var patt=/^a/;
//表示要求字符串中是否包含至少三个连续的a
//var patt=/a{3,5}/;
// 表示要求字符串中是否包含至少三个连续的a,最多5个连续的a(从头到尾必须匹配)
//var patt=/^a{3,5}$/;
var str="abcd";
alert(patt.test(str));
</script>
</head>AZ
<body>
</body>
</html>
两种常见的验证提示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript">
//需求:当用户点击了校验按钮,要获取输入框中的内容,然后验证其是否合法
//验证的规则是:必须由字母,数字,下划线组成,并且长度是5到12位。
function onclickFun() {
//1.当我们要操作一个标签的时候,一定要先获取这个标签对象
var usernameObj = document.getElementById("username");
//[object HTMLInputElement]它就是dom对象
var usernameText=usernameObj.value;//获取输入框输入的值
//如何验证字符串,符合某个规则,需要使用正则表达式技术
var patt=/^\w{5,12}$/;
//test()方式用于测试某个字符串,是不是匹配我的规则
//匹配就返回true。不匹配就返回false。
var usernameSpanObj=document.getElementById("usernameSpan");
//innerHtml 表示起始标签和结束标签中的内容
//innerHtml 这个属性可读可写
usernameSpanObj.innerHTML="sb";
if (patt.test(usernameText)){
usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"18\" height=\"18\">";
}else{
usernameSpanObj.innerHTML="<img src=\"false.png\" width=\"18\" height=\"18\">";
}
}
</script>
<body>
用户名:<input type="text" id="username"/>
<span id="usernameSpan" style="color: red">
</span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
getElementsByName()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll() {
//让所有复选框都选中
//document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
//这个集合的操作和数组一样
//集合中每个元素都是dom对象
//这个集合的元素顺序是他们在html页面中从上到下的顺序
var hobbies=document.getElementsByName("hobby");
//checked表示复选框的选中状态,如果选中是true,不选中是false
//这个属性可读,可写
//alert(hobbies.length);//3
for (var i=0;i<hobbies.length;i++){
hobbies[i].checked=true;
}
}//全选
function checkNo() {
//document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
//这个集合的操作和数组一样
//集合中每个元素都是dom对象
//这个集合的元素顺序是他们在html页面中从上到下的顺序
var hobbies=document.getElementsByName("hobby");
//checked表示复选框的选中状态,如果选中是true,不选中是false
//这个属性可读,可写
//alert(hobbies.length);//3
for (var i=0;i<hobbies.length;i++){
hobbies[i].checked=false;
}
}//全不选
function checkReverse() {
var hobbies=document.getElementsByName("hobby");
for (var i=0;i<hobbies.length;i++){
hobbies[i].checked=!hobbies[i].checked;
}
}//反选
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
注:
document对象的三个查询方法,如果有id属性,优先getElementById方法进行查询
如果没有id属性,则优先使用getElementByName方法来查询
如果id属性和name属性都没有最后再按标签名来查getElementByTagName
以上三个方法,代码一定要在页面加载完成之后执行,才能查询到标签对象。