為什么一次不能刪除完？
測試刪除節(jié)點(diǎn)時(shí)，用了點(diǎn)ES6語法：
function?clearText()?{
??var?content=document.getElementById("content");
??//?在此完成該函數(shù)
??var?childs?=?content.childNodes;
??console.log(childs);
??for(child?of?childs){
?? content.removeChild(child);
??}
}實(shí)際執(zhí)行時(shí)詭異的事情出現(xiàn)了，點(diǎn)一次沒反應(yīng)，點(diǎn)兩次消除三行，點(diǎn)三次消除剩下的兩行....
于是我用console.log把子節(jié)點(diǎn)列表返回到控制臺，
結(jié)果發(fā)現(xiàn)是一個(gè)長度11的數(shù)組，再然后特么這個(gè)數(shù)組對象居然還有五個(gè)字面量屬性，控制臺輸出如下：
[text,?h1,?text,?h1,?text,?h1,?text,?h1,?text,?h1,?text] 0:h1 1:h1 2:h1 3:h1 4:h1 length:5 __proto__:NodeList
說明第一次刪除了所有的text，第二次部分刪除了h1，第三次刪干凈了...
可是我在for循環(huán)中，console.log(child)得到了全部的節(jié)點(diǎn)列表。。。為啥不能一次刪完？
[text,?h1,?text,?h1,?text,?h1,?text,?h1,?text,?h1,?text] #text <h1>html</h1> #text <h1>php</h1> text <h1>javascript</h1> #text <h1>jquery</h1> #text <h1>java</h1> #text
2017-08-07
不知道我這樣寫有沒有什么問題，如果你能發(fā)現(xiàn)問題的話請告訴我一下哈，謝謝！
<script?type="text/javascript"> function?clearText()?{ ??var?content=document.getElementById("content"); ??//?在此完成該函數(shù) ??var?x?=?content.children; ??for(let?i?=?x.length?-?1?;i?>=0?;i--){ ??????content.removeChild(x[i]); ??} ?? } </script>2017-06-21
我已經(jīng)搞懂了，自問自答，也算做個(gè)記錄，并給后來學(xué)習(xí)的猿友提供點(diǎn)經(jīng)驗(yàn)。
function?clearText()?{ ??var?content=document.getElementById("content"); ??//?在此完成該函數(shù) ??var?childs?=?content.childNodes; ??console.log(childs); ??for(child?of?childs){ ??????content.removeChild(child); ??} }這段函數(shù)的問題在于，for of循環(huán)中，of后面跟的變量長度始終在變化，所以遞歸無法得到正確結(jié)果。
那么很簡單的方法是直接獲取childs長度然后進(jìn)行for循環(huán)，然而存在瀏覽器兼容性問題，因?yàn)榱斜黹L度不一致。
于是換個(gè)思路，如果我把取到的childNode存起來呢？這樣：
function?clearText()?{ ??let?content=document.getElementById("content"); ??let?childs?=?content.childNodes; ??let?buffers?=?childs; ??//?在此完成該函數(shù) ??for(let?buffer?of?buffers){ ?? content.removeChild(buffer); ??} }運(yùn)行結(jié)果沒有變化，可見childNodes存儲的是一個(gè)指針列表，buffer指向的對象依然是原始目標(biāo)，導(dǎo)致content的刪除子節(jié)點(diǎn)影響buffers存儲空間。
那好，再變...
function?clearText()?{ ??let?content=document.getElementById("content"); ??let?childs?=?content.childNodes; ??let?buffers?=?Array.from(childs); ??//?在此完成該函數(shù) ??for(let?buffer?of?buffers){ ?? content.removeChild(buffer); ??} }這次運(yùn)用了一個(gè)Array.from函數(shù)，這是es6新增函數(shù)，將對象存成數(shù)組。
這次buffers徹底變成了數(shù)組，console.log可以看到，原型不再是NodeList而是Array。
于是通關(guān)....
發(fā)現(xiàn)我js基礎(chǔ)不是一般的差>_<。淚