HTML DOM Document 对象
使用 document 对象来访问和操作 HTML
验证用户名是否有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script>
function ceshihefa() {
var usernameobj=document.getElementById("username");
var usertext=usernameobj.value;
//alert(usertext)
var patt=/^\w{5,12}$/;
if (patt.test(usertext)){
alert("输入合法")
}else {
alert("输入不合法")
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="moren">
<button onclick="ceshihefa()">校验</button>
</body>
</html>
知识点：
JS中的checked 是 和的一种属性，表示该项是不是被选择来了。
课后小题：全选 反选 和全不选的 复选框应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document.getElementsByTagName(name)</title>
<script>
function qx() {
var sz=document.getElementsByName("fx");
for (i=0;i<sz.length;i++){
//alert(sz[i].checked)
sz[i].checked=true
}
}
function qbx() {
var sz=document.getElementsByName("fx");
for (i=0;i<sz.length;i++){
//alert(sz[i].checked)
sz[i].checked=false
}
}
function fx() {
var fx=document.getElementsByName("fx")
for (i=0;i<fx.length;i++){
fx[i].checked=!fx[i].checked
}
}
</script>
</head>
<body>
我的爱好是：<br>
<input name="fx" type="checkbox" id="1" value="music" checked="checked">音乐
<input name="fx" type="checkbox" id="2" value="computer">计算机
<input name="fx" id="3" type="checkbox" value="PE">体育
<br/>
<button type="button" onclick="qx()">全选</button>
<button onclick="qbx()">全不选</button>
<button onclick="fx()">反选</button>
</body>
</html>
# document.getElementsByTagName(name) 通过标签名来查找元素
<head>
<meta charset="UTF-8">
<title>ByTagName</title>
<script>
function quanxuan(){
var inputs =document.getElementsByTagName("input")
for (var i=0;i<inputs.length;i++){
//.checkeds 是显示当前选项框的状态。
inputs[i].checked=true
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="c++" checked="checked">c++
<input type="checkbox" value="java">java
<input type="checkbox" value="js">javascript
<button onclick="quanxuan()">全选</button>
</body>
</html>
注意事项：
document 对象的三个查询方法 ，如果有id属性，有限使用getElementById方法进行查询如果没有id就用getElementByName方法进行查询如果id和name属性都没有最后用getElementByTagName进行查询
以上的方法以及要代码加载后再进行查询。这样才能查询到对象。。
