當(dāng)你的應(yīng)用需要依賴某個(gè)特定的JavaScript類庫時(shí),你無意中總會(huì)試圖解決某些類庫自身的問題,而不是語言的問題。就比如當(dāng)我試圖將文本(可能也包含HTML元素)用一個(gè)DIV元素包起來時(shí)。假設(shè)有以下HTML:

This is some text and <a href="">a link</a>

這時(shí)候如果想把它轉(zhuǎn)換為下面這樣:

<div>This is some text and <a href="">a link</a><div>

最簡單暴力的方法是,你可以在父元素上通過 .innerHTML 屬性來執(zhí)行更新,但問題是這樣一來所有綁定的事件監(jiān)聽都會(huì)失效,因?yàn)槭褂?innerHTML 時(shí)會(huì)重新創(chuàng)建一個(gè)HTML元素。這真是個(gè)大玻璃杯！所以這時(shí)候只能利用JavaScript來實(shí)現(xiàn) ―― 尺有所短、寸有所長。下面是實(shí)現(xiàn)代碼:

var newWrapper = document.createElement('div'); while(existingParent.firstChild) { // 移動(dòng)DOM元素,不會(huì)創(chuàng)建新元素 newWrapper.appendChild(existingParent.firstChild); }

這里不能使用for循環(huán),因?yàn)?childNodes 是一個(gè)動(dòng)態(tài)節(jié)點(diǎn)組成的集合,只要移動(dòng)節(jié)點(diǎn)就會(huì)影響到他的index索引值。我們用while循環(huán)一直檢測父元素的 firstChild ,如果其返回一個(gè)代表 false 的值, 那么你就知道所有的節(jié)點(diǎn)都已經(jīng)移到新的parent中了!