1. 操作 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节点" οnclick="modifyDOM()"/>
<input type="button" value="添加DOM节点" οnclick="addDOM()"/>
<input type="button" value="删除DOM节点" οnclick="removeDOM()"/>
</body>
</html>
修改DOM节点按钮，效果如下
添加DOM节点
默认添加Dom节点在后面
删除Dom节点
2. js修改 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节点样式" οnclick="modifyDOMCSS()"/>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
