增
可以增加
Element，元素
Attribute，屬性
Text，文本
DOM節(jié)點創(chuàng)建最常用的便是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：也就是文檔碎片，它表示一種輕量級的文檔，主要是用來存儲臨時節(jié)點，DocumentFragment不是文檔樹的一部分，它是保存在內(nèi)存中的，大量操作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用于刪除指定的子節(jié)點并返回子節(jié)點
<body>
<div id="aa">aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
</body>
<script>
var div = document.getElementById("aa") //找到對應(yīng)的節(jié)點
var remove = div.parentNode.removeChild(div); //刪除，remove指向被刪除節(jié)點的引用，它仍然存在于內(nèi)存中，可以對其進行下一步操作
console.log(remove)
</script>
控制臺輸出被刪除的子節(jié)點：
改
appendChild() insertBefore() replaceChild()
parent.appendChild(child)：將child追加到parent子節(jié)點的后面，如第一個例子所示
parent.insertBefore(a,b)：將a節(jié)點插入到另外b節(jié)點的前面
<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節(jié)點替換另一個b節(jié)點
上面的例子稍稍修改<script>里面的內(nèi)容：
<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：返回節(jié)點子樹內(nèi)與之匹配的第一個Element節(jié)點。如果沒有匹配的節(jié)點，則返回null
document.querySelectorAll：返回一個包含節(jié)點子樹內(nèi)所有與之匹配的Element節(jié)點列表，如果沒有相匹配的，則返回一個空節(jié)點列表。
<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區(qū)別：
getElement* 的實時性體現(xiàn)在返回集合的時候，getElementsBy*和querySelectorAll返回的都是一個節(jié)點集合，類似于數(shù)組，兩種方法的區(qū)別就在于這個集合會不會自動更新。
querySelectorAll 返回的是一個 Static Node List，而 getElementsBy 系列的返回的是一個 Live Node List，可能會導(dǎo)致無限循環(huán)的問題。
https://www.zhihu.com/question/24702250
節(jié)點之間的關(guān)系
屬性操作
setAttribute：給元素設(shè)置屬性，或者修改已經(jīng)存在的屬性
getAttribute：返回指定的特性名相應(yīng)的特性值，如果不存在，則返回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
