1. 程式人生 > >js操作dom節點,建立,複製,刪除,新增,查詢等操作總結

js操作dom節點,建立,複製,刪除,新增,查詢等操作總結

1.建立節點
document.createElement(“div”);//建立一個div元素,引數需要是標籤名;
document.createTextNode(“233”);//建立一個文字節點內容是“233”;
2.新增節點
var myli = document.createElement(“li”);
dom.appendChild(myli); //父節點下面新增一個子節點;(在所有子節點的最後)
另有,insertBefore(),insertAfter()分別是新增一個子節點在參考節點之前,之後;
insertBefore(a,b);意思是a節點會插入b節點的前面。

var oDiv = document.createElement
("div");//建立一個div元素,因為是document物件的方法。 var oDiv1 = document.getElementById("div1"); document.body.insertBefore(oDiv,oDiv1);//在oDiv1節點前插入新建立的元素節點 ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾

3.刪除節點
dom.removeChild(myli); //刪除子節點myli

4.替換節點
replaceChild(插入的節點,被替換的節點) ,用於替換節點,接受兩個引數,第一引數是要插入的節點,第二個是要被替換的節點。返回的是被替換的節點。

var replaceChild = document.body.replaceChild(div1,div2); 
//將div1替換div2  

5.查詢結點
children屬性獲取子節點的集合,

var ul = document.getElementByTagName("ul");
console.log(ul.children);
//返回ul子節點li的集合

集合具有length屬性,可以使用ul[x]方式訪問子節點
另有,childNodes,返回帶空格節點的子節點集合;
parentNode :獲取父節點;
firstChild ; 獲取第一個子節點;
lastChild ;最後一個子節點
nextSibling ; 相鄰的下一個子節點;
previousSibling ; 上一個兄弟節點;
6.複製節點
node.cloneNode(deep);
可選。預設是 false。
設定為 true,如果您需要克隆節點及其屬性,以及後代
設定為 false,如果您只需要克隆節點及其後代
一般cloneNode(true);

var ul = document.getElementByTagName("ul"); var newul = ul.cloneNode(true);

7.操作dom屬性:

node.getAttribute(name)//返回元素的屬性值,屬性由name指定 
node.setAttribute('id','myul');//設定節點的屬性
node.removeAttribute(name)// 這個方法從元素中刪除屬性name