[기본 개념] 3 | (1.3) DOM 에서 노드 추가, 삭제하기

[기본 개념] 3 | (1.3) DOM 에서 노드 추가, 삭제하기

1 문서 객체 모델 (DOM)

2 DOM 요소에 접근, 속성 가져오기

3 DOM 에서 이벤트 처리하기

4> DOM 에서 노드 추가, 삭제하기

4 DOM 에서 노드 추가, 삭제하기

노드 리스트란?

 

 DOM 에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야 하는데, querySelectorAll( ) 메서드를 사용하여 노드를 여러 개 가져올 때 이 노드 정보를 여러 개 저장한 데이터 형식이 노드 리스트이다.

 

 노드 리스트는 배열은 아니지만 배열과 비슷해서 인덱스 번호로 특정 노드에 접근할 수 있다.

 

(ex. li 노드 리스트 중 두 번째 노드 가져오기)

 

document.querySelectorAll("li")[1]

 

 새로운 노드를 추가할 때는 요소 노드뿐만 아니라 텍스트 노드와 속성 노드도 추가해야 한다. 예를 들어, <img> 태그를 요소로 추가한다면 <img> 태그의 요소 노드와 속성에 해당하는 src, alt 의 노드도 추가된다.

 

텍스트 노드를 사용하는 새로운 요소 추가하기

 

 새로운 요소 노드를 추가하려면, 새로운 요소 노드 만든 후 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결해야 한다.

 

1. 요소 노드 만들기 - createElement( ) 메서드

 

기본형

document.createElement("노드명");

 

 createElement( ) 메서드를 사용해 새로운 요소 노드를 만들고, 만든 새로운 요소 노드는 변수로 저장한다. 

 

var newP = document.createElement("p");

 

2. 텍스트 노드 만들기 - createTextNode( ) 메서드

 

기본형

document.createTextNode("텍스트");

 

 

 createTextNode( ) 메서드를 사용해 텍스트 노드를 만들고, 만든 텍스트 노드는 변수로 저장한다.

 

var txtNode = document.createTextNode("DOM은 document object model의 줄임말이다.");

 

3. 자식 노드 연결하기 - appendChild( ) 메서드

 

기본형

부모노드.appendChild(자식 노드);

 

 appendChild( ) 메서드는 텍스트나 속성 노드를 만든 후, 요소 노드에 연결할 때 사용한다. 이때 appendChild( ) 메서드를 사용하여 연결하는 노드는 자식 노드 중 맨 끝에 추가되며 필요한 위치에 자식 노드로 추가하면 된다.

 

newP.appendChild(txtNode);
document.getElementById("info").appendChild(newP);

 

4. 전체 소스 코드 완성하기

 

...
<div id="container">
  <h1>DOM을 공부합시다</h1>
  <a href="#" onclick="addP(); this.onclick='';">더 보기</a>  
  // 링크를 클릭하면 addP( ) 함수가 한 번만 실행된다.
  <div id="info"></div>
</div>
<script>
  function addP() {
    var newP = document.createElement("p");
    var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말이다.");
    newP.appendChild(txtNode);
    document.getElementById("info").appendChild(newP);
  }
</script>
...

 

속성값이 있는 새로운 요소 추가하기

 

 새로운 요소를 만들면 그와 관련된 속성 노드도 만들어서 자식 노드로 연결해야 한다.

 

1. 요소 노드 만들기 - createElement( ) 메서드

 

기본형

document.createElement("노드명");

 

 createElement( ) 메서드를 사용해 새로운 요소 노드를 만들고, 만든 새로운 요소 노드는 변수로 저장한다. 

 

var newImg = document.createElement("img");

 

2. 속성 노드 만들기 - createAttribute( ) 메서드

 

기본형

document.createAttribute("속성명");

 

 createAttribute( ) 메서드를 사용해 속성 노드를 만들고, 만든 속성 노드는 변수로 저장한다. 그리고 속성값은 value 프로퍼티를 사용하여 지정한다.

 

var srcNode = document.createAttribute("src");
var altNode = document.createAttribute("alt");
srcNode.value = "images/dom.jpg";      // src 속성값 지정
altNode.valud = "돔 트리 예제 이미지";  // alt 속성값 지정

 

3. 속성 노드 연결하기 - setAttributeNode( ) 메서드

 

기본형

요소명.setAttributeNode(속성 노드);

 

 setAttributeNode( ) 메서드는 새로운 속성 노드를, 요소 노드에 추가할 때 사용한다. 만약 추가할 속성이 요소 노드에 이미 있다면 기존 속성 노드를 새 속성 노드로 대체한다.

 

newImg.setAttributeNode(srcNode);
newImg.setAttributeNode(altNode);

 

4. 자식 노드 연결하기 - appendChild( ) 메서드

 

기본형

부모노드.appendChild(자식 노드);

 

 appendChild( ) 메서드는 텍스트나 속성 노드를 만든 후, 요소 노드에 연결할 때 사용한다. 이때 appendChild( ) 메서드를 사용하여 연결하는 노드는 자식 노드 중 맨 끝에 추가되며 필요한 위치에 자식 노드로 추가하면 된다.

 

document.getElementById("info").appendChild(newImg);

 

4. 전체 소스 코드 완성하기

 

...
<div id="container">    
  <h1>DOM을 공부합시다</h1>
  <a href="#" onclick="addContents(); this.onclick='';">더 보기</a>    
  <div id="info"></div>
</div>
<script>
  function addContents() {
    var newP = document.createElement("p");
    var txtNode = document.createTextNode("DOM은 Document Object Model의 줄임말이다.");
    newP.appendChild(txtNode);
      
    var newImg = document.createElement("img");
    var srcNode = document.createAttribute("src");
    var altNode = document.createAttribute("alt");
    srcNode.value = "images/dom.jpg";
    altNode.value = "돔 트리 예제 이미지";
    newImg.setAttributeNode(srcNode);
    newImg.setAttributeNode(altNode);

    document.getElementById("info").appendChild(newP);
    document.getElementById("info").appendChild(newImg);
  }
</script>
...

 

노드 삭제하기

 

 노드를 삭제할 때는 부모 노드를 먼저 찾아 부모 노드에서 자식 노드를 삭제해야 한다. 

 

parentNode 프로퍼티

 

기본형

노드.parentNode

 

 parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환한다.

 

(ex. 웹 브라우저 콘솔 창에서 부모 노드 찾기)

 

> document.querySelectorAll("li")[1].parentNode
// > <ul id="itemList">...</ul>      --> 부모 노드 찾아줌

 

removeChild( ) 메서드

 

기본형

부모 노드.removeChild(자식 노드)

 

 removeChild( ) 메서드는 자식 노드를 삭제하는 역할을 한다. 부모 노드만 찾는다면 removeChild( ) 메서드를 사용하는 것은 간단하다.

 

(ex. li 노드 삭제하기)

 

li.parentNode.removeChild(li)

 

 

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)