1. 程式人生 > >javascript 原生方法對dom節點的操作,建立、新增、刪除、替換、插入、複製、移動等操作

javascript 原生方法對dom節點的操作,建立、新增、刪除、替換、插入、複製、移動等操作

<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>