Document对象的理解：
- Document它管理了所有的HTML文档内容
- document是一种树结构的文档。有层级关系
- 它让我们把所有的标签都对象化
- 我们可以通过document访问所有的标签对象
Document对象的几种方法：
getElementById()
返回对拥有指定id的第一个对象的引用
getElementByName()
返回带有指定名称的对象集合
getElementByTagName()
返回带有指定标签名的对象集合
正则表达式练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(){
var obj=document.getElementById("check");
var str=obj.value;
// 匹配由数字、字母和下划线组成并且长度为5-12个字符的字符串
var patt=/^w{5,12}$/;
if(patt.test(str)){
alert("yes!");
}
else{
alert("NO!");
}
}
</script>
</head>
<body>
<input type="text" id="check">
<br>
<button onclick="fun()">校验</button>
</body>
</html>
检验用户输入是否合法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(){
var obj=document.getElementById("check");
var str=obj.value;
// 匹配由数字、字母和下划线组成并且长度为5-12个字符的字符串
var spanObj=document.getElementById("spanID");
var patt=/^w{5,12}$/;
if(patt.test(str)){
//innerHTML表示取标签中的内容
spanObj.innerHTML="用户名合法！";
}
else{
spanObj.innerHTML="用户名不合法！";
}
}
</script>
</head>
<body>
<input type="text" id="check">
<span style="color: red" id="spanID"></span>
<br>
<button onclick="fun()">校验</button>
</body>
</html>
由笑脸哭脸代替文字：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function fun(){
var obj=document.getElementById("check");
var str=obj.value;
// 匹配由数字、字母和下划线组成并且长度为5-12个字符的字符串
var spanObj=document.getElementById("spanID");
var patt=/^w{5,12}$/;
if(patt.test(str)){
//innerHTML表示取标签中的内容
// spanObj.innerHTML="用户名合法！";
spanObj.innerHTML="<img src="img/right.png" height=30 weight=30>";
}
else{
spanObj.innerHTML="<img src="img/wrong.png" height=30 weight=30>";
}
}
</script>
</head>
<body>
<input type="text" id="check">
<span style="color: red" id="spanID">
</span>
<br>
<button onclick="fun()">校验</button>
</body>
</html>
复选框的全选、全不选、反选练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function checkAll(){
var hobbys=document.getElementsByName("hobby");
for(var i=0;i<hobbys.length;i++){
hobbys[i].checked=true;
}
}
function checkNo(){
var hobbys=document.getElementsByName("hobby");
for(var i=0;i<hobbys.length;i++){
hobbys[i].checked=0;
}
}
function checkReverse(){
var hobbys=document.getElementsByName("hobby");
for(var i=0;i<hobbys.length;i++){
hobbys[i].checked=!hobbys[i].checked;
}
}
</script>
</head>
<body>
最喜欢的角色：
<br>
<input type="checkbox" name="hobby" value="雷泽">雷泽
<input type="checkbox" name="hobby" value="班尼特">班尼特
<input type="checkbox" name="hobby" value="迪卢克">迪卢克
<br><br>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
节点的常用属性和方法
- 通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
- appendChild（oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点
- childNodes属性，获取当前节点的所有子节点
- firstChild属性，获取当前节点的第一个子节点
- lastChild属性，获取当前节点的最后一个子节点
- parentNode属性，获取当前节点的父节点
- nextSibling属性，获取当前节点的下一个节点
- previousSibling属性，获取当前节点的上一个节点
- className，用于获取或设置标签的class属性值
- innerHTML属性，表示获取/设置起始标签和结束标签中的内容
- innerText属性，表示获取/设置起始标签和结束标签中的文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>create Element和appendChild的使用</title>
<script type="text/javascript">
window.onload=function(){
var divObj=document.createElement("div");
divObj.innerText="哈哈哈哈";
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>