DOM節(jié)點的操作

DOM節(jié)點的分類: 元素節(jié)點,文本節(jié)點,屬性節(jié)點

元素節(jié)點: html標簽,通過getElementBy...()方法獲取的就是元素節(jié)點

Document:

是代表整體頁面的最大虛擬節(jié)點,它并不是指某個具體的元素,被稱為根節(jié)點

HTML:

頁面中最大的元素節(jié)點,包含著頁面中所有的元素節(jié)點,被稱之為根元素節(jié)點

文本節(jié)點:

包含空格和換行\(zhòng)n,雙標記中間書寫的文本內(nèi)容

通過innerText屬性獲取

屬性節(jié)點:

標簽上的屬性,在js中也被構(gòu)建為節(jié)點,隸屬于所在的標簽

注釋節(jié)點:

在html頁面中書寫的注釋.也被js構(gòu)建為節(jié)點,但不會顯示在頁面中

操作節(jié)點

1.創(chuàng)建節(jié)點

作用:創(chuàng)建一個元素節(jié)點
語法:var 新的元素對象=document.createElement('標簽名');
 新的元素對象.innerText='標簽間的文本節(jié)點';
 //...設置元素屬性等操作
 

2.頁面中添加新節(jié)點

作用:向父節(jié)點中,追加子節(jié)點,該節(jié)點會是父節(jié)點中最后一個子節(jié)點
語法: 父元素.appendChild(新的元素對象);

作用:在父元素中,將新節(jié)點插入到已有子節(jié)點的前面位置
語法: 父元素.insertBefore(新的元素對象,父元素中已有的節(jié)點);

3.刪除節(jié)點

作用:刪除父節(jié)點下的某個子節(jié)點
語法:父節(jié)點.removeChild(要刪除的子元素);
作用:刪除自己和自己的所有后代節(jié)點
語法:元素對象.remove();

4.替換節(jié)點

作用:在父元素中,將某個節(jié)點替換為新創(chuàng)建的節(jié)點
語法:父元素.replaceChild(新創(chuàng)建的節(jié)點,子節(jié)點);

5.克隆節(jié)點(復制節(jié)點)

作用:返回一個新的結(jié)構(gòu)相同的元素對象
語法:var 新克隆的元素對象=元素對象.cloneNode(是否克隆后代);
參數(shù):可選的,boolean,true表示克隆后代節(jié)點,默認false不進行克隆
注意:不復制元素對象的class屬性