블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
2007. 6. 14. 17:07 Programing/HTML/JavaScript/CSS

Node.cloneNode(deep of type boolean)


이름에서 느껴지듯 cloneNode는 해당 노드를 복제하는 메서드다.

아래와 같은 HTML 엘리먼트들이 있다.

전체 과자


과자를 클릭하면 셀렉트박스에는 과자에 해당하는 아이템들이 등록되고
빵을 클릭하면 빵에 해당하는 아이템들이 등록되고, 전체를 클릭하면 셀렉트박스의 모든 아이템을 삭제해야 한다.

아주 간단한 작업이다.

var snack = new Array('깡좋은새우','자갈치시장','고래식사','인디언식사');
var bread = new Array('크림빵','단팥빵','식빵','바게트');


이렇게 배열로 미리 아이템들을 만들어 두고 클릭이벤트 핸들러에서 타겟에 해당하는 배열의 원소들을 OPTION객체로 만들어서 셀렉트박스에 밀어 넣어 주면 된다.

function putItem(selObj,arr){
    for(var i=0,max=arr.length; i<max; i++){
        var option = document.createElement('OPTION')
              option.value = arr[i];
              option.text = arr[i];

        selObj.add(option);
    }
}

쉽다...very easy....

그러면 위와 같이 배열을 만들지 않고 이미 만들어진 셀렉트박스의 내용을 참조하여 다른 셀렉트 박스에 똑같은 아이템을 추가해야 한다면 어떤가....

아래와 같은 상황이라면 말이다..

  

경우에 따라서 빵과 과자에 해당하는 아이템들을 타겟 셀렉트박스에 넣어야 한다면 어떤 방법을 써야 할까.
원본의 아이템을 그대로 복사해서 타겟에 추가하면 된다.

function putItem(src,target){
    //target 셀렉트박스의 아이템을 초기화(삭제)하는것은 생략한다.

    for(var i=0,max=src.length; i<max; i++){
       var newopt = document.createElement('OPTION');

       newopt.value = src.options[i].value;
       newopt.text = src.options[i].text;

       target.add(newopt);
    }
}

하지만 이 방법은 새로이 OPTION객체를 만들어야 하기때문에 value와 text를 지정하는 부분까지 덤으로 추가가 되는 단점이 있다.

이럴때 cloneNode를 쓰면 간편해진다.

function putItemNew(src,target){
    var temp = src.cloneNode(true);

    while(temp.length > 0){
       target.appendChild(temp[0]);
    }
}

원본 셀렉트 박스를 복제하여 그 원소를 타겟으로 이동시키는 방법이다.

그런데 while 블럭 안을 보고 좀 의아하다는 생각을 갖게 될 수 있다.
블럭 어디에도 temp의 childNode를 삭제하는 코드가 없는데 계속 제일 처음 원소를 타겟에 추가하고 있다.
게다가 length가 저절로 줄어서 반복문이 종료 되었다.

이유는 바로 appendChild 때문이다.
appendChild 는 해당 노드에 인자로 받은 노드를 추가 하는 메서드이다.
A에 있던 노드를 B에 추가하면 어떻게 되겠는가?
복제하여 추가하지 않는 이상 A에 있던 노드를 B로 이동시켜야 한다.
그러니 자연히 A에서는 노드가 줄어들게 되는 것이다.

위의 예제에서는 겨우 두세줄의 코드를 줄이는 것에 불과하였지만 속성이 많이 달려있는 엘리먼트의 경우를 상상하면 cloneNode의 유용함을 부인 할 수 없다.

posted by 초딩입맛제주아재
TAG

댓글을 달아 주세요