目录
第三节：JavaScript 修改 DOM 节点 CSS 样式
第一节：JavaScript 处理 DOM 事件
第二节：JavaScript 操作 DOM 节点
|
1，JavaScript 修改 DOM 节点 2，JavaScript 添加 DOM 节点 3，JavaScript 删除 DOM 节点 |
第三节：JavaScript 修改 DOM 节点 CSS 样式
dom节点：
js处理dom事件：
<script type="text/javascript">
function fun1(){ alert("点我干嘛！"); }
</script>
<head><body>
<input type="button" value="点我一下" οnclick="fun1()" />
</body></head>
js操作dom节点：
<script type="text/javascript">
function modifyDOM(){
document.getElementById("txt".innerHtml="用户名 : ");
document.getElementById("userName").value="Jack";
}
function addDOM(){
var para1=document.creatElement("p");
var node1=document.creatTextNode("说明：这个节点被添加在了前面。");
var para2=document.creatElement("p");
var node2=document.creatTextNode("说明：这个节点被添加在了后面。");
para1.appendChild(node1);
para2.appendChild(node2);
var parent=document.getElementById("parent");
var son1=document.getElementById("son1");
parent.insertBefore(para1,son1); //在子节点之前加。
parent.appentChild(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="text">:</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></head>
js修改DOM节点css样式：
<script type="text/javascript">
function modifyDOMCSS(){
document.getElementById("girl").style.color="red";
}
</script>
<head><body>
<p id="gril">女程序员</p>
<input type="button" value="修改DOM节点样式" οnclick="modifyDOMCSS()" />
</body></head>
来源：CSDN
作者：_清风明月
链接：https://blog.csdn.net/HDZ1821/article/details/104373205