DOM操作

增

可以增加

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

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

<script>
    var a = document.createElement("div");
    a.id = "aaa";
    a.style = "color:red;";
    a.innerHTML = "新的DIV";
    var text = document.createTextNode("另一个字符");
    a.appendChild(text);
    document.body.appendChild(a)
</script>

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


<body>
  <div id="div">aa</div>
  <div>bb</div>
  <div>cc</div>
  <div>dd</div>
</body>
<script>
    var fr = document.createDocumentFragment()
    var first = document.getElementById("div");
    var div;
    for (var i = 0; i < 10; i++){
        div =  document.createElement("div");
        div.innerHTML = i;
        div.style = "color:red";
        fr.appendChild(div);
    }
    first.appendChild(fr)
</script>

删

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

<body>
    <div id="aa">aa</div>
    <div>bb</div>
    <div>cc</div>
    <div>dd</div>
</body>
<script>
    var div = document.getElementById("aa")  //找到对应的节点
    var remove = div.parentNode.removeChild(div);  //删除，remove指向被删除节点的引用，它仍然存在于内存中，可以对其进行下一步操作
    console.log(remove)
</script>

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

改

appendChild() insertBefore() replaceChild()

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

<body>
    <div id="aa">aa</div>
    <div>bb</div>
    <div>cc</div>
    <div>dd</div>
</body>
<script>
    var a = document.createElement("div");
    var div = document.getElementById("aa");
    a.id = "aaa";
    a.style = "color:red;";
    a.innerHTML = "新的DIV";
    document.body.insertBefore(a,div);
</script>

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

<script>
    var a = document.createElement("div");
    var div = document.getElementById("aa");
    a.id = "aaa";
    a.style = "color:red;";
    a.innerHTML = "新的DIV";
    document.body.replaceChild(a, div);
</script>

查

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

<body>
  <div  class="div">aa</div>
  <div  class="div">bb</div>
  <div  class="div">cc</div>
  <div  class="div">dd</div>
</body>
<script>
    console.log(document.querySelector(".div"));
    console.log(document.querySelectorAll(".div"));
</script>

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：

<div id="div">aa</div>

<script>
    var div = document.getElementById("div");
    div.setAttribute("id","aa")
    div.setAttribute("class","bb")
    console.log(div.getAttribute("id"),div.getAttribute("class"))
</script>

最终会输出 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

DOM操作

增

删

改

查

节点之间的关系

属性操作

推荐阅读更多精彩内容