[JS] DOM에서 노드 추가∙삭제하기 (1)

선영·2022년 8월 30일

JS

목록 보기

25/25

노드 리스트(node list)란

DOM에서 새로운 노드를 만들어주거나 삭제할 때 사용.
DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있음. 이때 노드 정보를 여러 개 저장한 것이 노드 리스트임. 배열과 비슷하게 동작.

<body>
  <h1>Web Programming</h1>
  <ul id="itemList">
    <li>HTML</li>
	<li>CSS</li>
	<li>Javascript</li>
  </ul>
</body>

새로운 노드 추가 과정

어떠한 태그를 노드로 추가한다면, 단순히 태그에 해당하는 요소 노드뿐만 아니라 텍스트 노드와 속성 노드도 추가해야 함. 예를 들어, <img>태그를 요소로 추가한다면 src, alt 노드도 추가됨.

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

더보기 링크를 클릭하면 그 아래에 간단한 텍스트가 표시되는 스크립트 소스

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

기본형 document.createElement(노드명)

  // p 요소 노드 만들기  
  var newP = document.createElement("p");

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

기본형 document.createTextNode(텍스트)

  // p 요소의 텍스트 노드 만들기 
  var txtNode = document.createTextNode("DOM은 document ovject model의 
                                        줄임말입니다.");

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

기본형 부모노드.appendChild(자식노드)

  // 텍스트 노드를 자식 노드로 연결하기
  // newP 노드를 다시 <div id="info"></div>의 자식노드로 연결함.
  newP.appendChild(txtNode); 
  document.getElementById("info").appendChild(newP);

appendChild() 메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용. 자식 노드 중 맨 끝에 추가됨.

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

<body>
  <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>
</body>