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); //替换，并放在开头位置