javaweb_js的dom节点操作应用

来源：互联网发布：古典舞演出服淘宝网编辑：程序博客网时间：2024/05/18 12:03

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function checkInfo(){
var txtName= document.getElementById("txtName");//获取该元素
if(txtName.value==""){
var findNodes = document.getElementById("info").children;
if(findNodes.length==0) {
var appendDom = document.createElement("span");
appendDom.innerHTML = "*用户名不能为空";
appendDom.style.color = "red";
//把该节点加入到某个节点的子节点下
document.getElementById("info").appendChild(appendDom);
}
return false;
}else{
////查找某个节点下所有的子节点的集合
var findNodes = document.getElementById("info").children;
if(findNodes.length>0){
document.getElementById("info").removeChild(findNodes[0]);
}
}
var txtPwd = document.getElementById("txtPwd");
if(txtPwd.value==""){
return false;//只要在表单的单击事件中有return false，表单就不会提交数据
}
}
</script>
</head>
<body>
<form name="form1" action="work2.html">
用户名:<input type="text" name="txtName" id="txtName" /><em id="info"></em><br>
密码:<input type="password" name="txtPwd" id="txtPwd"/><br>
<input type="submit" value="登陆" onclick="return checkInfo();"/>
</form>
</body>
</html>

1 0