DOM에서 노드 추가•삭제하기

노드 리스트

 

DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트(node list)를 사용해야 한다.

• DOM에 접근할 때 querySelectorALl() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다.
• 노드 정보를 여러 개 저장한 것이 노드 리스트이다.
  (배열과 비슷하게 동작한다.)
  

  document.querySelectorAll("li")​

• 노드 리스트는 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있다.
  

  document.querySelectorAll("li")[1]​

• 새로운 노드 추가 과정
  1. 모든 HTML 태그는 요소(element) 노드이다.
  2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드이다.
  3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다.
  4. 주석은 주석(comment) 노드이다.
• 위의 원칙에 따라 어떠한 태그를 노드로 추가한다면 단순히 태그에 해당하는 요소 노드뿐만 아니라 텍스트 노드와 속성 노드도 추가해야 한다.

 

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

 

1. 요소 노드 만들기 - createElement() 메서드
   - DOM에 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것이다.
   

   document.createElement(노드명)
   
   // ex) var newP = document.createElement("p")​

2. 텍스트 노드 만들기 - createTextNode() 메서드
   - 새롭게 요소 노드를 만들었다면 그다음은 내용을 담은 텍스트 노드를 자식 노드로 만들어 연결해야 한다.
   

   document.createTextNode(텍스트);
   
   // ex) var txtNode = document.createTextNode("DOM은 document object model의 줄임말이다.");​

3. 자식 노드 연결하기 - appendChild() 메서드
   - appendChild() 메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용한다.
   - appendChild() 메서드를 사용해서 연결하는 노드는 자식 노드 중 맨 끝에 추가된다.
   

   부모노드.appendChild(자식노드)
   
   // ex) newP.appendChild(txtNode);
   //     document.getElementById("info").appendChild(newP);​

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

   <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(노드명);
   
   // ex) var newImg document.createElement("img");​

2. 속성 노드 만들기 - createAttribute() 메서드
   - img 요소는 src 속성을 사용해서 이미지 파일의 경로를 지정해서 브라우저에 이미지를 보여줄 수 있다.
   - 속성 노드를 만든 후 속성 값은 value 프로퍼티를 사용해서 지정한다.
   

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

3. 속성 노드 연결하기 - setAttributeNode() 메서드
   - 속성 노드는 요소 노드의 자식으로 연결해야 한다.
   - 만약 추가할 속성이 요소 노드에 이미 들어 있다면 기존 속성 노드를 새 속성 노드로 대체한다.
   

   요소명.setAttribute(속성노드)
   
   // ex) newImg.setAttribute(srcNode)​

4. 자식 노드 연결하기 - appendChild() 메서드
   - img 요소를 화면에 표시하려면 웹 문서의 DOM에 추가해야 한다.
   - appendChild() 메서드를 사용해서 필요한 위치에 자식 노드를 추가한다.
   

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

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

   <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>​

   
   
   

cf) 링크를 클릭했을 때 함수가 한 번만 실행되도록 하기

<a href="#" onclick="addP(); this.onclick='';"></a>

 

노드 삭제하기

 

• 노드를 삭제할 때 부모 노드에서 자식 노드를 삭제해야 한다.
  (삭제해야 할 노드가 있다면 반드시 부모 노드 먼저 찾아야 한다.)
• parentNode 프로퍼티
  - DOM 트리의 노드는 바로 삭제할 수 없으므로 먼저 부모 노드에 접근해야 한다.
  - parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환한다.
  

  노드.parentNode​

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

  부모노드.removeChild(자식노드)
  
  // ex) li.parentNode.removeChild(li)