DOM学习总结(四)DOM修改
DOOM修改
找到标签之后就可以对它进行修改了
可以修改:
1.改变HTML元素 比如说把 p 改为 span
2.改变HTML属性 比如说 id class
3.改变CSS样式 比如说改变字体颜色
4.添加或者删除事件
5.替换...
创建/替换 HTML 文本内容
document.getElementById("p1").innerHTML="西门吹雪";
创建新的 HTML 元素 :appendChild()
如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上
//创建一个新的 p 元素
var para=document.createElement("p");
//向 <p> 元素添加文本,首先必须创建文本节点,这段代码创建文本内容
var node=document.createTextNode("马冬梅");
//向 <p> 元素追加文本内容
para.appendChild(node);
//在什么地方追加这个新创建的元素,找到这个已经存在的 div
var element=document.getElementById("div")
//向这个已经存在的元素追加新创建的这个元素,
//这个方法是将新元素作为父元素的最后一个子元素进行添加,所以默认排在最下面
element.appendChild(para);
创建新的 HTML 元素 : insertBefore()
//把新创建的元素放在头部位置
<script> var para=document.createElement("p"); var node=document.createTextNode("买了佛冷"); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child); //把元素放到最前面 </script>
2.改变 HTML 样式
document.getElementById("p2").style.color="blue";
3.创建新的 HTML 元素
如果要添加新元素,首先要创建它,然后把它放到想要放置的位置中
<div id="d1"> <p id="p1">p1</p> <p id="p2">p2</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("p3"); para.appendChild(node); var element=document.getElementById("d1"); element.appendChild(para); </script>
4.改变 HTML 文本内容
改变元素内容的最简单的方法是使用 innerHTML 属性。
document.getElementById("p1").innerHTML="西门吹雪大战叶孤城";
5.删除已有的 HTML 元素
如果要删除 HTML 元素,必须清楚该元素的父元素是谁
var parent=document.getElementById("div1"); //找到它的父元素 var child=document.getElementById("p1"); //找到要删除的元素的 parent.removeChild(child); //从父元素中删除 //当需要删除一个元素,但是不知道它的父元素,可以使用 parentNode 属性来实现找到它的父元素 var child=document.getElementById("p1"); child.parentNode.removeChild(child);
6.替换 HTML 元素
替换 HTML DOM 中的元素,可以用 replaceChild() 方法
var para=document.createElement("p"); //找到p元素 var node=document.createTextNode("This is new."); //赋值文本内容 para.appendChild(node); //向 <p> 元素追加文本内容 var parent=document.getElementById("div1"); //找到这个已经存在的元素的父元素 var child=document.getElementById("p1"); // 找到这个元素 parent.replaceChild(para,child); //替换,并放在开头位置