DOM操作

增

可以增加

Element，元素
Attribute，属性
Text，文本

DOM节点创建最常用的便是document.createElement和document.createTextNode方法

还有DocumentFragment：也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，DocumentFragment不是文档树的一部分，它是保存在内存中的，大量操作DOM时用它可以大大提升性能。

  
aa
  
bb
  
cc
  
dd

删

removeChild用于删除指定的子节点并返回子节点

    
aa
    
bb
    
cc
    
dd

控制台输出被删除的子节点：

改

appendChild() insertBefore() replaceChild()

parent.appendChild(child)：将child追加到parent子节点的后面，如第一个例子所示
parent.insertBefore(a,b)：将a节点插入到另外b节点的前面

    
aa
    
bb
    
cc
    
dd

parent.replaceChild(a,b)：将a节点替换另一个b节点
上面的例子稍稍修改

查

document.querySelector：返回节点子树内与之匹配的第一个Element节点。如果没有匹配的节点，则返回null
document.querySelectorAll：返回一个包含节点子树内所有与之匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表。

  
aa
  
bb
  
cc
  
dd

document.getElementById
document.getElementsByClassName
document.getElementsByTagName
document.getElementsByName

• getElement*，querySelector区别：
  getElement* 的实时性体现在返回集合的时候，getElementsBy*和querySelectorAll返回的都是一个节点集合，类似于数组，两种方法的区别就在于这个集合会不会自动更新。
  querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List，可能会导致无限循环的问题。
  https://www.zhihu.com/question/24702250

节点之间的关系

属性操作

setAttribute：给元素设置属性，或者修改已经存在的属性
getAttribute：返回指定的特性名相应的特性值，如果不存在，则返回null：

aa

最终会输出 aa bb

参考
http://luopq.com/2015/11/30/javascript-dom/
http://www.cnblogs.com/liuxianan/p/javascript-dom-api.html
https://segmentfault.com/a/1190000004076145