js常見的創建dom節點的方法有
createElement() 創建一個元素節點 => 接收參數為string類型的nodename
createTextNode() 創建一個文本節點 => 接收參數為string類型的text內容
createAttribute() 創建一個屬性節點 => 接收參數為string類型的屬性名稱
createComment() 創建一個注釋節點 => 接收參數為string類型的注釋文本
一、創建DOM節點
使用的命令是
var oDiv = document.createElement('div');
這樣就創建了一個div標簽。
二、插入DOM節點
移動DOM節點也就是把這個節點插入到html文檔中的某個地方，這里js給了我們兩個方法：
1.appendChild()：把節點插入到父節點的末尾。
document.body.appendChild(oDiv); //把div插入到body中，並且位於末尾
2.insertBefore()：把節點插入到父節點的某個兄弟節點的前面。
var oP = createElement('p'); //創建一個p節點
document.body.insertBefore(oP,oDiv); //把p節點插入到div的前面
三.刪除DOM節點
刪除DOM節點的方法是removeChild()。
document.body.removeChild(oP); //刪除p節點
四.查找DOM節點
查找DOM節點的方法很多，常用的有：
getElementById() //通過元素Id，唯一性
如html文檔如下：
<body>
<div id='box'></div>
</body>
這是可以使用getElementById()獲取到id為box的div。
var oDiv = document.getElementById('box');
2.getElementsByTagName() //通過元素的標簽名來選擇元素
var aDiv = getElementsByTagName('div');
要注意的是，getElementsByTagName()獲取的是一組元素，所以如果想取得上面那個id為box的div要在后面加上[0];
var oDiv = getElementsByTagName('div')[0];
五、替換DOM節點
替換DOM節點的方法是replaceChild()。
var oSpan = document.createElement('span'); //創建一個span標簽
document.body.replaceChild(oSpan,oBox); //用span標簽替換div標簽
最常用的DOM操作就是這些了，其他還有很多的方法，就目前而言，各瀏覽器兼容性不太好，所以還是推薦大家暫時只使用上述這些方法。
DocumentFragment節點不屬於文檔樹，繼承的parentNode屬性總是null。它有一個很實用的特點，當請求把一個DocumentFragment節點插入文檔樹時，插入的不是DocumentFragment自身，而是它的所有子孫節點。這個特性使得DocumentFragment成了占位符，暫時存放那些一次插入文檔的節點。它還有利於實現文檔的剪切、復制和粘貼操作。
另外，當需要添加多個dom元素時，如果先將這些元素添加到DocumentFragment中，再統一將DocumentFragment添加到頁面，會減少頁面渲染dom的次數，效率會明顯提升。
DocumentFragment文檔碎片(高效批量更新多個節點)
原始方法：
var parentNode = document.getElementsByTageName('ul')[0];
function appendDataToElement (appendToElement, num) {
let node;
for (let i = 0; i < num.length; i++) {
node = document.createElement('li');
node.innerHTML = i;
appendToElement.appendChild(node);
}
}
appendDataToElement (parentNode, num);
優化后：
var parentNode = document.ElementsByTageName('ul')[0],
fragment = document.createDocumentFragment();
function appendDataToElement(appendToElement, num) {
let node;
for (let i = 0; i < num.length; i++) {
node = document.createElement('li');
node.innerHTML = i;
fragment.appendChild(node);
}
appendToElement.appendChild(fragment);
}
appendDataToElement(parentNode, num);