js增加、删除、替换DOM对象

当网页被加载时，浏览器会创建页面的文档对象模型DOM，即Document Object Model

整个文档为一个文档节点(document对象)

每个html元素为一个元素节点(element对象)

html元素内的文本为文本节点(textNode对象)

html元素的属性为属性节点(attribute对象)

html注释为注释节点(comment对象)

 

节点自身属性：

nodeType：节点类型

nodeName：节点名称

nodeValue：节点值

attributes：节点的属性节点

innerHTML：节点的所有内容，包含节点下的文本，子标签等

innerText：节点的文本内容，不包含子标签

 

导航属性：

parentElement / parentNode：父节点标签

children：所有子标签

firstElementChild：节点的第一个子元素标签

lastElementChild：节点的最后一个子元素标签

nextElementSibling：下一个兄弟元素标签

previousElementSibling：上一个兄弟元素标签

 

添加元素

parent.appendChild(child) ：用于向parent父元素中添加新元素，添加到尾部

parent.insertBefore(newchild,oldchild)：用于向parent父元素中添加新元素newchild，且添加到oldchild元素的前面。

<div id="div" style='background:pink'>  <!--一个div下包含两个段落-->
　　<p id="p1">这是一个段落。</p>
　　<p id="p2">这是另外一个段落。</p>
</div>
<script>
　　var para1 = document.createElement("p");   //创建段落p元素
　　var node1 = document.createTextNode("这是一个新的段落，添加到尾部。");  //创建文本节点
　　para1.appendChild(node1);  //将文本节点添加到p元素，这两步可直接使用para1.innerHTML='这是一个新的段落，添加到尾部。'
　　var para2 = document.createElement("p");
　　var node2 = document.createTextNode("这是一个新的段落，添加到开头。");
　　para2.appendChild(node2);
　　var element1 = document.getElementById("div");  //获取父元素div
　　var element2 = document.getElementById("p1");  //获取第一个段落元素
　　element1.appendChild(para1);  //向父元素中添加创建的子元素，默认放在最后面
　　element1.insertBefore(para2,element2);  //向父元素中添加创建的子元素，位置在element2元素前面
</script>

以上，document.createElement("p")为创建段落，document.createTextNode("*")为创建文本节点。

element1.appendChild(para1)为添加子元素到末尾，element1.insertBefore(para2,element2)为添加子元素到指定元素前面。

 

 

 删除元素parent.removeChild(child)，删除元素必须知道其父元素

<div id="div1" style='background:pink'>
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

 

 

替换元素parent.replaceChild(newchild,oldchild)，使用newchild元素替换oldchild元素

<div id="div1" style='background:pink'>
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child);
</script>