javascript 原生方法對dom節點的操作,建立、新增、刪除、替換、插入、複製、移動等操作
阿新 • • 發佈:2019-01-24
<span style="font-size:18px;">/** * Created by hua on 2014/10/21. */ //查詢節點 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);//插入到目標節點之前 </span>