js原生節點操作

weixin_33913332發表於2018-12-08

查詢節點

document.getElementById("id");//通過id查詢,返回唯一的節點,如果有多個將會返回第一個,在IE6、7中有個bug,會返回name值相同的元素,所有要做一個相容
document.getElementsByClassName("class");//通過class查詢,返回節點陣列
document.getElementsByTagName("div");

建立節點

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);//插入到目標節點之前

相關文章