[JavaScript] 노드 추가/치환/삭제

📔 신규 노드 작성하기

① 요소/텍스트 노드 작성하기 - createElement/createTextNode 메소드

: 생성된 개개의 노드는 퍼즐 조각처럼 어디에도 관련 지을 수 없이 모두 뿔뿔이 흩어져 있는 상태 = 문서 트리에 명시적으로 추가할 필요가 있다.

document.createElement(name)  // name : 요소 이름
document.createTextNode(text)  // text : 텍스트

② 노드끼리 조립하기 - appendChild 메소드 / insertBefore 메소드
: 뿔뿔이 흩어진 노드군을 조립해 문서에 추가하는 작업이다.

• appendChild 메소드
  추가된 순서대로 제일 마지막 자식 요소로서 지정된 요소를 추가한다.
• insertBefore 메소드
  제 1인수로 지정한 노도를, 제 2인수로 지정한 자식 노드 앞에 삽입한다.
  맨 끝에 노드를 추가하고 싶은 경우, 제 2인수를 null로 지정한다.

elem.appendChild (node) // elem : 요소 객체, node : 추가할 노드

③ 속성 노드 추가하기 - createAttribute 메소드
: 속성 노드를 설정하는 것은 속성과 동일한 이름의 프로퍼티를 설정하기만 하면 되지만 createAttribute 메소드로도 속성 노드 생성 가능하다.
: 코드는 중복되긴 하지만 속성명을 문자열로 지정할 수 있으므로 '스크립트부터 동적으로 속성명을 변경할 수 있다'라는 장점이 있다.

var href = document.createAttribute('href);
href.value = url.value;    // 속성 노드의 값 설정
anchor.setAttributeNode(href); // 속성 노드를 요소 노드에 연관시킴 

---

📔 기존 노드 치환/삭제

<ul id="list">
    <li><a href="JavaScript:void(0)" data-isbn="978-4-7981-3547-2">
        개정3판 기초PHP</a></li>
    <li><a href="JavaScript:void(0)" data-isbn="978-4-7741-8030-4">
        Java포켓 레퍼런스</a></li>
    <li><a href="JavaScript:void(0)" data-isbn="978-4-7741-7984-1">
        Swift포켓 레퍼런스</a></li>
    <li><a href="JavaScript:void(0)" data-isbn="978-4-7981-4402-3">
        개정5판 ASP.NET입문</a></li>
    <li><a href="JavaScript:void(0)" data-isbn="978-4-8222-9644-5">
        앱을 만들자! Android입문</a></li>
</ul>
<input id="del" type="button" value="삭제" disabled />
<div id="pic"></div>


document.addEventListener('DOMContentLoaded', function() {
    var list = document.getElementById('list');
    var pic = document.getElementById('pic');
    var del = document.getElementById('del');

	// <ul id="list">(링크)를 클릭했을 때의 처리
    list.addEventListener('clcik', function(e) {
        var lsbn = e.target.getAttribute('data-isbn');
        
        if (isbn) {
       			 // <img> 요소를 생성
            var img = document.createElement('img');  
            img.src = 'http://www.wings.msn.to/books/' + isbn + '/' + isbn + '.jpg';
            img.alt = e.innerHTML;
            img.height = 150;
            img.width = 108;
            
            // <div> 요소 밑에 <img> 요소가 존재하는지(이미지를 표시하는 중인지)를 확인
            if(pic.getElementsByTagName('img').length > 0) {
             	// <img> 요소가 존재하는 경우, 새로운 <img> 요소로 치환
                pic.replaceChild(img, pic.lastChild);
            } else {
                 // <img> 요소가 존재하지 않는 경우, 새롭게 추가해서 [삭제] 버튼을 유효로
                del.disabled = false;
                pic.appendChild(img);
            }
        }
    }, false)
    
    // [삭제] 버튼이 클릭되었을 때의 처리
    del.addEventListener('clcik', function() {
    		// <div id="pic"> 밑의 자식 요소를 삭제하고 [삭제] 버튼을 무효로 한다
        pic.removeChild(pic.lastChild); 
        del.disabled = true;
    }, false);
}, false);

① 노드 치환하기 - replaceChild 메소드
: 자식 노드를 치환 한다.
: 치환 대상의 노드는 현재 노드의 자식 노드여야 한다.

elem.replaceChild(after, before)
          elem : 요소 객체, after : 치한 후의 노드, before : 치환 대상의 노드

② 노드 삭제하기 - removeChild 메소드
: 자식 노드를 삭제한다.
: 삭제 대상의 노드는 현재 노드에 대해 자식 노드여야 한다.

elem.removeChild (node)
		elem : 요소 객체, node : 삭제 대상의 노드

❕ data-xxxx ❕
: 앱 개발자가 목적에 따라 자유롭게 값을 설정할 수 있는 특별한 값
: 주로 스크립트(이벤트 리스너)에서 사용하기 위한 파라미터를 삽입하기 위한 속성
: 'xxxx' 부분은 알파벳 소문자, 하이픈, 밑줄 등의 문자를 사용할 수 있다. = 사용자 정의 데이터 속성

❗ HTMLCollection/NodeList 객체❗
: 객체가 문서 트리를 참조하고 있어 문서 트리로의 변경이 있으면 HTMLCollection/NodeList 객체에도 실시간으로 반영된다.

<ul id="list">
    <li>개정3판 기초PHP</li>
    <li>Java포켓 레퍼런스</li>
    <li>Swift포켓 레퍼런스</li>
    <li>개정5판 ASP.NET입문</li>
    <li>앱을 만들자! Android입문</li>
</ul>

document.addEventListener('DOMContentLoaded', function() {
    var li = document.getElementsByTagName('li');
    console.log('변경전:', li.length);          // 결과 : 변경전:5

    var li = document.getElementById('list');
    ul.appendChild(document.createElement('li'));
    console.log('변경후:' + li.length);         // 결과 : 변경후:6
}, false);