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