노드를 올바르게 탐색 - javascript childNodes

Question

각 자식 노드에 대해 다음 코드를 한 번만 만들려고합니다. 이 기능은 또한 논리 당 노드를 삭제하므로 둘 이상의 하위 노드에 대해서는 각 하위 노드로 이동하지 않는 것처럼 보입니다.

//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"를 자식으로 가지고 있는데,이 경우에만 2 개의 DIV 만 제거합니다. 길이가 계속 변하기 때문에 나는 모든 아이들에게 다가 갈 수 없다고 생각합니다.

이 올바른 탐색 방법은 무엇입니까?

Answer 1

정확하게 맞습니다. (target.childNodes)을 참조한 NodeList이 (가) 정적 인 색인을 사용하고있는 것이 문제입니다. 그 중 일부 자식 노드를 제거하면 해당 색인이 업데이트됩니다.

가장 간단한 방법은 요소의 자식 노드에 대한 정적 목록을 만드는 것입니다. 당신은 이것을하려고하는 것 같지만 자바 스크립트는 동적 타이핑을 가지고 있으므로 var children = new Array();은 본질적으로 아무런 도움이되지 않습니다. NodeList을 배열이되도록 강제하지 않습니다. 당신이 원하는 기능은 Array.from입니다 : 당신은 오래된 브라우저 심 (shim)을 제공해야하므로 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); 
    } 
} 

하는 것으로.