您的位置：首页 > Web前端 > JavaScript

javascript入门实例四

2016-02-20 11:41 585 查看

工具: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航