正確遍歷節點 - javascript childNodes

我正在嘗試使下面的一段代碼爲每個子節點工作一次。該函數也按照邏輯刪除節點，因爲多於一個子節點似乎不會遍歷每個子節點。正確遍歷節點 - javascript childNodes

//Deleting from child node 
      var target =document.getElementById(element.name).childNodes[0];    
      if(target.hasChildNodes()) 
      { 
       var children = new Array(); 
       children = target.childNodes; 
       for(child in children) 
       { 
       if(children[child].tagName == 'DIV'){ 
        //target.removeChild[child]; 
        var deleteChild = document.getElementById(target.childNodes[child].id); 
        deleteChild.parentNode.removeChild(deleteChild); 
       } 
       } 
      }

在特殊情況下，我有4個「Div」作爲孩子，這隻能刪除兩個DIV，而不是全部。我認爲長度也在不斷變化，因此它無法得到所有的孩子。

這是正確的遍歷方式，我錯過了明顯的東西？

來源

2017-02-09 NewBee

而不是解釋你描述的內容，點擊編輯器中的<<>按鈕並顯示你有什麼 - 添加HTML並且你有一個[mcve] - 記得輸出和預期輸出 – mplungjan

當使用[ 'childNodes']（https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes#Notes），你還在收集textNodes，空格，甚至評論。由於您沒有發佈任何HTML，因此無法確定，而您正在討論穿越DOM ......這就像在沒有地圖的情況下解釋地理信息一樣。 – zer00ne

你是完全正確的：問題是當你引用的NodeList（target.childNodes）是活的時，你正在使用一個靜態索引：當你刪除一些子節點時它會被更新。

最簡單的方法是製作一個元素的子節點的靜態列表。你好像試圖做到這一點，但Javascript有動態輸入，所以var children = new Array();基本上沒有任何用處。它並不強制NodeList成爲一個數組。你想要的功能是Array.from：

var children = Array.from(target.childNodes); 
var child; // don't forget to declare this variable 
for(child in children) 
{ 
    if(children[child].tagName == 'DIV'){ 
     //target.removeChild[child]; 
     var deleteChild = target.childNodes[child]; // simplify 
     deleteChild.parentNode.removeChild(deleteChild); 
    } 
}

注意Array.from是一個新十歲上下的功能，所以你應該對舊版瀏覽器提供了一個墊片。

來源

2017-02-09 07:42:30 lonesomeday

感謝您的輸入我會嘗試這種方法，似乎減少長度和循環計數器也做這項工作。如果有人想知道這是什麼意思循環與（int i = 0;我減少長度計數器以及我每次刪除一個孩子節點1。 – NewBee

@NewBee不，如果最後兩個子節點都是'div'元素，這將不起作用。 – lonesomeday

正確遍歷節點 - javascript childNodes

回答

相關問題