技術(shù)交流QQ群:1027579432棍郎，歡迎你的加入！
歡迎關(guān)注我的微信公眾號：CurryCoder的程序人生
1.為什么學(xué)習(xí)節(jié)點操作
- 獲取元素通常使用兩種方式：
-
(1).利用DOM提供的方法獲取元素
document.getElementById() document.getElementsByTagName() document.querySeletor()等 缺點：邏輯性不強银室、繁瑣 -
(2).利用節(jié)點層次關(guān)系獲取元素
- 利用父子兄節(jié)點關(guān)系獲取元素坝撑；
- 邏輯性強，但兼容性稍差粮揉；
-
(1).利用DOM提供的方法獲取元素
- 上面兩種方法都能獲取元素節(jié)點，后面都會使用抚笔，但是節(jié)點操作更簡單扶认。
2.節(jié)點概述
- 網(wǎng)頁中的所有內(nèi)容都是節(jié)點(標簽、屬性殊橙、文本辐宾、注釋等)，在DOM中膨蛮，節(jié)點使用node來表示叠纹。
-
HTML DOM樹中的所有節(jié)點均可以通過JS進行訪問，所有HTML元素(節(jié)點)均可以被修改敞葛，也可以創(chuàng)建或刪除誉察。
DOM樹.png - 一般地，節(jié)點至少擁有nodeType(節(jié)點類型)惹谐、nodeName(節(jié)點名稱)和nodeValue(節(jié)點值)三個基本屬性持偏。
- 元素節(jié)點nodeType為1；
- 屬性節(jié)點nodeType為2氨肌；
- 文本節(jié)點nodeType為3(文本節(jié)點包括文字鸿秆、空格、換行等)怎囚；
- 實際開發(fā)中卿叽，節(jié)點操作主要操作的是元素節(jié)點。
3.節(jié)點層次
- 利用DOM樹可以把節(jié)點劃分為不同的層次關(guān)系恳守，常見的是父子兄層級關(guān)系考婴。
3.1 父級節(jié)點
- parentNode屬性可返回某個節(jié)點的父節(jié)點，注意父節(jié)點特指最近的一個父節(jié)點催烘；
- 如果指定的節(jié)點沒有父節(jié)點則返回null;
node.parentNode
3.2 子節(jié)點
- parentNode.childNodes返回包含指定節(jié)點的子節(jié)點的集合蕉扮，該集合為即時更新的集合；
- parentNode.children是一個只讀屬性颗圣，返回所有的子元素節(jié)點喳钟。它只返回子元素節(jié)點屁使，其余節(jié)點不返回(重點掌握)；
- 雖然children是一個非標準奔则，但是得到了各個瀏覽器的支持蛮寂，因此可以放心使用；
- firstChild返回第一個子節(jié)點易茬，找不到就返回null酬蹋。同樣，也是包含所有的節(jié)點抽莱。
- lastChild返回最后一個子節(jié)點范抓，找不到就返回null。同樣食铐，也是包含所有的節(jié)點匕垫。
- firstElementChild返回第一個子元素節(jié)點，找不到則返回null虐呻。這個方法有兼容性問題象泵，IE9以上才支持；
- lastElementChild返回最后一個子元素節(jié)點斟叼，找不到則返回null偶惠。這個方法有兼容性問題，IE9以上才支持朗涩；
- 實際開發(fā)中忽孽，firstChild和lastChild包含其他節(jié)點，操作不方便谢床。而firstElementChild和lastElementChild又有兼容性問題扒腕，那么如何獲取第一個子元素節(jié)點或最后一個子元素節(jié)點呢？
-
解決方法：
- (1).如果想要第一個子元素節(jié)點萤悴，可以使用parentNode.children[0]瘾腰；
- (2).如果想要最后一個子元素節(jié)點，可以使用parentNode.children[parentNode.children.length - 1]覆履；
1. parentNode.childNodes(標準) 2. parentNode.children(非標準) 3. parentNode.firstChild 4. parentNode.lastChild 5. parentNode.firstElementChild 6. parentNode.lastElementChild -
解決方法：
- 注意：返回值中包含了所有的子節(jié)點蹋盆，包括元素節(jié)點、文本節(jié)點等硝全；
-
如果只想要獲得當(dāng)中的元素節(jié)點栖雾，則需要專門處理。因此一般不提倡使用childNodes伟众；
var ul = document.querySelector('ul'); for(var i = 0; i < ul.childNodes.length; i++){ if(ul.childNodes[i].nodeType == 1) { // ul.childNodes[i]是元素節(jié)點 console.log(ul.childNodes[i]); } }
3.3 兄弟節(jié)點
- nextSibling返回當(dāng)前元素的下一個兄弟節(jié)點析藕，找不到則返回null。同樣凳厢，也是包含所有的節(jié)點账胧。
- previousSibling返回當(dāng)前元素的上一個兄弟節(jié)點竞慢，找不到則返回null。同樣治泥，也是包含所有的節(jié)點筹煮。
- nextElementSibling返回當(dāng)前元素下一個兄弟元素節(jié)點，找不到則返回null居夹。這個方法有兼容性問題败潦，IE9以上才支持；
- previousElementSibling返回當(dāng)前元素上一個兄弟元素節(jié)點准脂，找不到則返回null劫扒。這個方法有兼容性問題，IE9以上才支持狸膏；
1. node.nextSibling 2. node.previousSibling 3. node.nextElementSibling 4. node.previousElementSibling -
如何解決兼容性問題沟饥？[自己封裝一個兼容性的函數(shù)]
function getNextElementSibling(element) { var el = element; while(el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; }
4.創(chuàng)建節(jié)點
- 語法格式：
document.createElement('tagName') - document.createElement()方法創(chuàng)建由tagName指定的HTML元素。因為這些元素原先不存在环戈，是根據(jù)我們的需求動態(tài)生成的，所以也稱為動態(tài)創(chuàng)建元素節(jié)點澎灸。
5.添加節(jié)點
- node.appendChild()方法將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾院塞。類似于CSS中的after偽元素。
- node.insertBefore()方法將一個節(jié)點添加到父節(jié)點的指定子節(jié)點前面性昭。類似于CSS中的before偽元素拦止。
- 語法格式：
1. node.appendChild(child) 2. node.insertBefore(child, 指定元素)
6.刪除節(jié)點
- node.removeChild(child)方法從DOM父節(jié)點中刪除一個子節(jié)點，返回刪除的節(jié)點糜颠。
7.復(fù)制(克隆)節(jié)點
- node.cloneNode()方法返回調(diào)用該方法的節(jié)點的一個副本汹族，也稱為克隆節(jié)點或拷貝節(jié)點。
- 注意：如果括號參數(shù)為空或false其兴，則是淺拷貝顶瞒。即只克隆復(fù)制節(jié)點本身，不克隆里面的子節(jié)點元旬。
8.三種動態(tài)創(chuàng)建元素的區(qū)別
- document.write()：直接將內(nèi)容寫入頁面的內(nèi)容流榴徐，但是文檔流執(zhí)行完畢，則它會導(dǎo)致頁面全部重繪匀归。
- document.innerHTML：將內(nèi)容寫入某個DOM節(jié)點坑资，不會導(dǎo)致頁面全部重繪。innerHTML創(chuàng)建多個元素效率更高(不要拼接字符串穆端，采用數(shù)組形式拼接)**袱贮，結(jié)構(gòu)稍微復(fù)雜。
- document.createElement()：創(chuàng)建多個元素效率會稍低一點体啰，但是結(jié)構(gòu)更清晰攒巍。
- 總結(jié)：不同瀏覽器下嗽仪，innerHTML效率要比createElement高!
