目录
1 JavaScript处理DOM事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fun() {
alert("点我干嘛!");
}
</script>
</head>
<body>
<input type="button" value="点我一下" onclick="fun()"/>
</body>
</html>
运行结果:
2.JavaScript操作做DOM结点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript操作DOM节点</title>
<script type="text/javascript">
function modifyDOM(){
document.getElementById("txt").innerHTML="用户名:";
document.getElementById("userName").value="Jack";
}
function addDOM(){
var para=document.createElement("p");
var node=document.createTextNode("...前...");
var para2=document.createElement("p");
var node2=document.createTextNode("...后...");
para.appendChild(node);
para2.appendChild(node2);
var parent=document.getElementById("parent");
var son1=document.getElementById("son1");
parent.insertBefore(para, son1);
parent.appendChild(para2);
}
function removeDOM(){
var parent=document.getElementById("parent");
var son1=document.getElementById("son1");
parent.removeChild(son1);
}
</script>
</head>
<body>
<div id="parent">
<div id="son1">
<font id="txt">:</font><input type="text" id="userName" name="userName"/>
</div>
</div>
<input type="button" value="修改DOM节点" onclick="modifyDOM()"/>
<input type="button" value="添加DOM节点" onclick="addDOM()"/>
<input type="button" value="删除DOM节点" onclick="removeDOM()"/>
</body>
</html>
运行结果:
3.JavaScript修改DOM结点CSS样式;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript修改DOM节点CSS样式</title>
<script type="text/javascript">
function modifyDOMCSS(){
document.getElementById("gril").style.color="red";
}
</script>
</head>
<body>
<p id="gril">女程序猿</p>
<input type="button" value="修改DOM节点样式" onclick="modifyDOMCSS()"/>
</body>
</html>
运行结果: