JavaScript事件之dom对象表单操作方法
JavaScript中的事件
1、onclick = "";//单点触发
2、ondblclick = "";//双击触发
3、onchange = "";//值发生改变是触发
4、onfocus = "";//获得焦点是触发
5、onblur = "";//失去焦点是触发
6、onmouserover= "";//鼠标进入某个元素时触发
7、onmouseout = "";//鼠标离开某个元素触发
8、onload="";//页面加载完的时候执行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js事件</title>
</head>
<body>
<input type="button" value="单击" onclick="fun1()"/>
<input type="button" value="双击" ondblclick="fun2()"/>
<select onchange="fun3()">
<option>111</option>
<option>222</option>
</select>
<input type="text" onfocus="fun4()" onblur="fun5()" value="请输入用户名" id="usename"/>
<p id="status" onmouseover="fun6()" onmouseout="fun7()">鼠标你过来</p>
</body>
<script>
function fun1(){
alert("我是单击事件");
}
function fun2(){
alert("我是双击事件");
}
function fun3(){
alert("我是改变事件");
}
function fun4(){
//alert("获得焦点");
document.getElementById("usename").value="";
}
function fun5(){
//alert("失去焦点");
document.getElementById("usename").value="请输入用户名";
}
function fun6(){
document.getElementById("status").innerHTML = "鼠标已经放上来";
}
function fun7(){
document.getElementById("status").innerHTML = "鼠标已经移开了";
}
</script>
</html>
dom对象
childNotes //获取所有子节点
children //获取所有子节点，并排除空节点
firstChild //第一个子节点
lastChild //最后一个子节点
previousSibling //上一个兄弟节点
nextSibling //下一个兄弟节点
nodeType;//节点类型(1:标签2:文本节点)
className;//获取class样式名称
方法：
getAttribute(属性名);//获取节点对象的属性值
setAttribute(属性名,属性值);//css属性名是什么这里就是什么
<body>
<div class="index">
测试 css
</div>
<input type="button" value="fun1" onclick="fun1()";
</body>
<script>
//跟换div样式
function fun1(){
var d = document.getElementsByTagName("div")[0];
//alert(d.className);
//d.className = "index1";
//d.style.backgroundColor="blue";
//alert(d.getAttribute("class"));
d.setAttribute("style","background-color:blue;");
}
</script>
</html>
form表单：
获取form表单节点
1、document.getElementById(id);
2、document.forms//所有form节点对象，以数组形式返回
3、document.表单name
通过js设置表单属性
action
method
name
submit()//自动提交
事件方法：onsubmit
提交前对form表单做验证
<body>
<form id="fm1" name="fmname" action="login.php" method="post" onsubmit="return sub()">
用户名：<input id="username" type="text" name="username">
<input type="submit" value="提交">
</form>
</body>
<script>
/*
//给表单添加属性
var ob = document.getElementById("fm1");//取表单节点方法一
var ob1 = document.forms;//取表单节点方法二
var ob2 = document.fmname;//取表单节点方法三
//alert(ob2);
ob2.action = "login.php";
ob2.method = "post";
//ob2.submit();
*/
//提交前对form表单做验证
function sub(){
var intp = document.getElementById("username");
if(intp.value.length==0){
alert("你的用户名是透明的");
return false;
}else{
return true;
}
}
</script>
</html>
