轉載來自：https://www.jianshu.com/p/632c7dcc67a3

javascript 原生方法對dom節點的操作包括：訪問（查詢）、建立、新增、刪除、替換、插入、複製、移動等。

//查詢節點
document.getElementById("id");// 通過id查詢，返回唯一的節點
document.getElementsByClassName("class");// 通過class查詢，返回值為nodeList型別
document.getElementsByTagName("div");// 通過標籤名查詢，返回值為nodeList型別

//建立節點
document.createDocumentFragment();//建立記憶體文件碎片
document.createElement();//建立元素
document.createTextNode();//建立文字節點
 
//新增節點
var ele = document.getElementById("my_div");
var oldEle = document.createElement("p");
var newEle=document.createElement("div");
ele.appendChild(oldEle);

//刪除節點
ele.removeChild(oldEle);

//替換節點
ele.replaceChild(newEle,oldEle);

//插入節點
ele.insertBefore(oldEle,newEle);//在newEle之前插入 oldEle節點

//複製節點
var cEle = oldEle.cloneNode(true);//深度複製，複製節點下面所有的子節點
cEle = oldEle.cloneNode(false);//只複製當前節點，不復制子節點

//移動節點
var cloneEle = oldEle.cloneNode(true);//被移動的節點
document.removeChild(oldEle);//刪除原節點
document.insertBefore(cloneEle,newEle);//插入到目標節點之前
 

createElemet:建立文件碎片～

var node = document.createElement("nodeName");

createTextNode： 建立文字節點

var txt = document.createTextNode("這是一段文字");

appendChild: 新增子節點(屬性節點，文字節點，元素節點)

var parent = document.getElementById("parent");
parent.appendChild(node) ;

insertBefore: 把一個新元素插入到現有元素之前

parentEment.insertBefore(newElement,targetElement);
 

元素節點的父元素必須死元素節點，屬性節點和文字節點的自元素不允許是元素節點

自己實現一個insertAfter:把一個元素插到現有元素之後

function insertAfter(newElement,targetElement){
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement,targetElement.nextSibling)
  }
}
 

自己實現一個 lastChildrenElement: 獲取最後一個元素節點

// * 萬用字元
function lastChildElement(element) {
    var elementArray = element.getElementsByTagName('*');
    if (elementArray.length<1) return;
    return elementArray.pop();
}

js 設定和更新 css

var para = document.getElementById("element");
para.style.color = "black";
para.style.font = "2em 'times',serif";