코드 그라데이션

15. 문서 객체 모델 (3) DOM에 노드 추가/삭제하기 본문

Front/Mega-JavaScript

15. 문서 객체 모델 (3) DOM에 노드 추가/삭제하기

완벽한 장면 2023. 5. 24. 21:51

노드 리스트

  • 노드 정보를 여러개 저장한 것. 배열과 비슷하게 저장함.
  • 새 노드를 추가할 때는 웹 문서에 어떤 소스를 추가할지 먼저 고려하고, 그에 따라 요소 노드나 속성 노드 등을 만들어야 한다.

 

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

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

document.createElement(노드명)
  • 그런데 이 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아니다.
  • 예를 들면 <p> 태그의 내용에 해당하는 텍스트 노드도 만들어야 한다.

 

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

  • 새로운 요소 노드를 만들었다면 그 다음은 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결해야 한다.
document.createTextNode(텍스트);

 

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

  • 아직까지는 노드를 만든 상태이며 부모 노드와 자식 노드로 연결되지는 않은 상태이다.
  • 이 메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용한다.
  • appendChild() 메서드를 사용해서 연결하는 노드는 자식 노드 중 맨 끝에 추가한다.

 

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

- [더 보기] 추가하는 부분에 addP() 함수와  this.onclick='  ' 코드가 추가되었는데,

- 이것은 addP() 함수가 한 번만 실행되도록 하기 위한 것.

- 이 코드를 추가하지 않으면 링크를 클릭할 때마다 p 요소가 계속 추가되게 될 것.

 

 

전체 코드 - 링크를 클릭하면 텍스트 표시하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>DOM</title>
  <style>
    #container{
      width:500px;
      margin:10px auto;
      padding:20px;
    }
    #info {
      margin-top:20px;
    }
  </style>
</head>
<body>
  <div id="container">    
    <h1>DOM을 공부합시다</h1>
    <a href="#" onclick="addP(); this.onclick='';">더 보기</a>    
    <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>
</body>
</html>

 

실행 결과

 

 

 

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

  • 웹 문서에서 새 이미지를 보여주려면 img 요소 노드를 추가한 후 src 속성 노드를 만들어 자식 노드로 연결해야 한다.

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

document.createElement(노드명)

 

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

  • img 요소는 src 속성을 사용해서 이미지 파일의 경로를 지정해야 브라우저에 이미지를 보여줄 수 있다.
document.createAttribute(속성명)

 

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

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

 

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

  • 이 단계 직전까지 했어도 아직 img 요소는 만들어 놓기만 한 상태이다.
  • img 요소를 화면에 표시하려면 웹 문서의 DOM에 추가해야 한다.
  • 이 메서드를 사용해 필요한 위치에 자식 노드로 추가한다.

 

5. 전체 코드 완성하기

- 텍스트 노드에 이미지를 추가한 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>DOM</title>
  <style>
    #container{
      width:500px;
      margin:10px auto;
      padding:20px;
    }
    #info {
      margin-top:20px;
    }
  </style>
</head>
<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>
</html>

 

실행 결과

 

 

----------

728x90

'Front > Mega-JavaScript' 카테고리의 다른 글

콜백 함수  (0) 2024.04.10
배열 내장 함수  (0) 2024.04.09
14. 문서 객체 모델 (2) DOM에서 이벤트 처리하기  (0) 2023.05.24
13. 문서 객체 모델 (1) 기본 개념  (0) 2023.05.23
12. 자바스크립트와 객체 (2) 브라우저와 관련된 객체  (0) 2023.05.21
'Front/Mega-JavaScript' Related Articles more
Comments