工具:eclipse
js处理DOM事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js处理DOM事件</title>
<script type="text/javascript">
function modifyDOM() {
alert("点我干啥")
}
</script>
</head>
<body>
<input type="button" value="点我一下" onclick="modifyDOM()">
</body>
</html>
js操作DOM节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作DOM节点</title>
<script type="text/javascript">
function modifyDOM(){
document.getElementById("txt").innerHTML="用户名:";
document.getElementById("user").value="jack";
}
function addDOM(){
var param=document.createElement("p");
var node=document.createTextNode("..前..");
var param2=document.createElement("p");
var node2=document.createTextNode("..后..");
param.appendChild(node);
param2.appendChild(node2);
var x=document.getElementById("x");
var y=document.getElementById("y");
x.insertBefore(param, y);
x.appendChild(node2);
}
function delDOM() {
var x=document.getElementById("x");
var y=document.getElementById("y");
x.removeChild(y);
}
</script>
</head>
<body>
<div id="x">
<div id="y">
<font id="txt"> :</font><input type="text" id="user" name="user" >
</div>
</div>
<input type="button" value="修改DOM节点" onclick="modifyDOM()">
<input type="button" value="添加DOM节点" onclick="addDOM()">
<input type="button" value="删除DOM节点" onclick="delDOM()">
</body>
</html>
修改DOM节点样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js修改DOM节点样式</title>
<script type="text/javascript">
function modifyDOMCSS() {
document.getElementById("boy").style.color="red";
}
</script>
</head>
<body>
<p id="boy"> 男程序猿</p>
<input type="button" value="修改DOM节点样式" onclick="modifyDOMCSS()">
</body>
</html>