[javascript] HTML DOM 지우기

프로그래밍/Web 2009. 12. 16. 10:25 Posted by galad
createElement로 생성한 노드들을 지울때, 특정 노드 밑에 딸린 노드들을 몽창 한번에 지우는 메소드가 없는 건지 못찾은 건지,
아무튼 parentNode에 딸린 노드들을 전부 찾아서(getElementsByTag), for 루프 돌면서 지우는데 절반만 지워져서 헤매다가 원인을 찾았음

function deleteNodes(parentNode, tag) {
    var nodes = parentNode.getElementsByTagName(tag);
    var length = nodes.length;
    
    // 이건 nodes가 실시간으로 줄어들면서 length 자체가 줄어든다.
    // 따라서 아래의 for문에서 기존 nodes의 갯수만큼 루핑하면서 0번만 계속 지움.
    // i번을 삭제하면 stack overflow 남
    /*for(var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        parentNode.removeChild(node);
    }*/
    
    for(var i = 0; i < length; i++) {
        var node = nodes[0];
        parentNode.removeChild(node);
    }
}

위에 써놓은 것처럼

for(var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    parentNode.removeChild(node);
}

nodes.length로 한계치를 정하면 for 문 안에서 자식 노드를 하나씩 지울 때마다 nodes.length 가 하나씩 줄어든다. 실시간 반영?!
그래서 length를 따로 저장하고 맨 처음 것만 계속 지웠음.

'프로그래밍 > Web' 카테고리의 다른 글

[javascript] HTML DOM 생성 후 이벤트 추가  (0) 2009.12.16
[jQuery] jQuery를 이용한 ajax  (0) 2009.12.16
[jQuery] jQuery를 이용한 팝업. div, layer  (0) 2009.12.16
[json] json 사용법  (0) 2009.12.15
[html] html 특수기호  (3) 2009.09.08