dom树节点的增删改插

节点是dom树的树枝,元素节点是给树枝添加了果实.

1.获取节点树

 　　var div=document.querySelector(".div");    ==>.div(属性标签)

2.增加：给节点树添加元素(果实)

　　var newdiv=document.createElement("p");  ==>创建了一个元素但还没添加到树上

　　扩展：document.createTextNode();　　　　　创建文本节点　

　　　　　document.createComment();                 创建注释节点

　　　　　document.createDocumentFragment();  文档片段接口（不怎么懂，百度）

3.插入:

　　div.appendChild(newdiv);                          ==>添加到节点树上,这时树上多了一个p标签的元素节点 剪切操作

　　 扩展: div.insertBefore(span,p);      在p标签之前插入一个span标签

4.删除:

　　span.remove()　　　　　　　==>销毁span标签  (思考是否真正销毁,还是未销毁只是剪切出来了)

　　扩展:div.removeChild(span)      删除子元素节点(span)

5.替换

　　div.replaceChild(p,span);         ==>将p标签替换为span标签

　　扩展:克隆p标签的属性

　　　　var clonep=p.cloneNode(true);

　　　　div.appendChild(clonep);   ==>获取的节点不会导致内存增大 （位置的移动）不是复制了一份过来

6.给标签添加属性名和属性值:

　　div.setAttribute('class','demo');   ==><div class="dmo"></div>

　　div.getAttribute('id')         ==>获取id名   div.setAttribute('id','only')  ; div.getAttribute('id')  ==>only