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