ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 노드, 추가, 삭제하기
      카테고리 없음 2024. 8. 9. 15:13

      목차

      • DOM에서 노드 추가, 삭제하기
      • 노드리스트란?
      • 새로운 노드 추가 과정
      • 텍스트 노드를 사용하는 새로운 요소 추가하기
      • 속성값이 있는 노드 추가하기

       

      DOM에서 노드 추가, 삭제하기
      웹 문서에서 처음 화면에서는 보이지 않다가 클릭이나 이벤트가 발생하면 내용이 나타나는 경우가 있습니다.
      이런 동작은 css의 display속성을 사용해서 만들수도 있지만 DOM트리에 새로운 노드를 추가하는 방법도 있습니다. 이때 주의할점은 노드를 추가하면 단순히 요소 노드뿐 아니라 텍스트와 속성 노드도 함께 추가해주어야 합니다.

       

      노드리스트란?
      DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 '노드리스트(node list)'를 사용해야 합니다.
      dom에 접근할때 querySelectorAll()메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있습니다.
      이때 노드 정보를 여러개 저장한 것이 노드 리스트 입니다.
      배열과 비슷하게 동작한다는 특징이 있습니다.
      여러 개 노드 중 특정한 노드를 불러오고 싶다면 아래와 같은 기본형을 사용합니다.

      (기본형)
      document.querySelectorAll( ' li ' )[인덱스번호]

       

      노드리스트 사용해보기

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>노드, 추가, 삭제하기</title>
  </head>
  <body>
    <h1>자바스크립트</h1>
    <ul id="item_list">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ul>
    <script>
      /**/
      const liList = document.querySelectorAll("li");
      console.log(document.querySelectorAll("li")[1]);
    </script>
  </body>
</html>

       

      새로운 노드 추가 과정
      새로운 노드를 추가할 때에는 DOM트리를 구성하는 기본 원칙에 따라 추가하여 생성할 수 있습니다.
      단순히 태그에 해당하는 요소 노드뿐만 아니라 텍스트노드와 속성노드도 추가해야 합니다.
      예를 들어 img태그요소를 자바스크립트를 이용해 동적으로 생성하고 싶다면 <img>태그의 요소노드 뿐만 아니라 속성에 해당하는 src, alt 같은 속성 노드도 추가해줘야 합니다.
      어떠한 웹 문서의 DOM트리에 새로운 노드를 추가하려면 그 문서에 새로운 소스 코드를 작성해야 합니다.
      그래서 새 노드를 추가할때에는 웹 문서에 어떤 소스를 추가할지 먼저 생각하고 그에 따라 요소노드나 텍스트, 속성노드도 만들어야 합니다.

       

      텍스트 노드를 사용하는 새로운 요소 추가하기
      1. 요소 노드 만들기 - createElement()메서드
      : DOM에 새로운 요소를 추가할때 가장 먼저 해야 할 일은 요소 노드를 만드는 것입니다.
      이때 사용하는 메서드는 createElement()메서드인데 괄호 안에 해당하는 요소 노드를 만들면 됩니다.

      (기본형)
      document.createElement('노드명');

      2. 텍스트 노드 만들기 - createTextNode()메서드
      : 새로운 요소 노드를 만들었다면 그 다음은 내용을 다는 텍스트 노드를 자식노드로 만들어 연결해야 합니다.
      텍스트 노드를 만드는 메서드는 createTextNode()메서드이고, 아래의 기본형을 사용합니다.

      (기본형)
      document.createTextNode('텍스트');

      3. 자식 노드로 연결하기 - appendChild()메서드
      : 위 1번과 2번은 새로운 p노드를 만들고, textnode를 따로따로 만들어둔  상태입니다.
      아직까지는 노드만 생성된 상태이고 부모노드와 자식노드가 연결되지 않은 상태입니다.
      appendChild()메서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할때 사용합니다.
      이때 appendChild()메서드를 사용해서 연결하는 노드는 자식노드 중 맨 끝에 추가됩니다.

      (기본형)
      newP.appendChild('자식노드');

       

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

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>노드, 추가, 삭제하기</title>
  </head>
  <body>
    <h1>자바스크립트</h1>
    <ul id="item_list">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ul>
    <div id="container">
      <h2>DOM노드 추가 삭제하기</h2>
      <!-- 링크를 클릭하면 addP()함수가 한번만 실행되도록 합니다. -->
      <a href="#" onclick="addP(); this.onclick='';">더보기</a>
      <div id="info"></div>
    </div>
    <script>
      /**/
      function addP() {
        //   1. 새로운 p요소 노드를 만들기
        let newP = document.createElement("p");

        //   2. 새로운 요소 노드에 들어갈 텍스트 노드 만들기
        let txtNode = document.createTextNode(
          "DOM은 Document Object Model의 약자이다."
        );

        //   3. 텍스트노드를 자식노드로 연결하기
        newP.appendChild(txtNode);

        // 4. 부모태그 요소인 #info에 newP를 자식 노드로 연결하기
        document.getElementById("info").appendChild(newP);
      }
    </script>
  </body>
</html>

       

      속성값이 있는 노드 추가하기
      1. 요소노드 만들기(위 내용 참고)

      2. 속성노드 만들기 - creatAttribute()메서드
      : 속성 노드를 추가할 때 creatAttribute()메서드를 사용합니다.

      (기본형)
      document.creatAttribute('속성명');

      3. 속성 노드에 값 추가하기 - .value프로퍼티
      : 생성한 속성 노드에 값을 추가할 때에는 .value프로퍼티를 이용합니다.

      (기본형)
      요소노드.value = '속성값';

      4. 속성노드를 부모노드에 추가하기 - .setAtributeNode()메서드
      : 속성 노드는 요소노드의  자식으로 연결해야 합니다.
      새로 만든 속성 노드를 요소노드에 연결하려면 setAtributeNode()메서드를 사용합니다.
      만약 추가할 속성이 요소 노드에 이미 들어있다면 기존 속성노드를 새 속성 노드로 대체합니다.

      (기본형)
      요소노드. setAtributeNode('속성노드')

      5. 속성 노드를 연결한 요소노드를 부모노드에 추가하기(위 내용 참고)

       

      속성값이 있는 노드 추가하기 

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>노드, 추가, 삭제하기</title>
  </head>
  <body>
    <div id="container">
      <h2>DOM노드 추가 삭제하기</h2>
      <!-- 링크를 클릭하면 addP()함수가 한번만 실행되도록 합니다. -->
      <a href="#" onclick="addP(); this.onclick='';">더보기</a>
      <div id="info"></div>
    </div>
    <script>
      /*
       */

      //  <a href= 'http://www.naver.com'>네이버</a>추가하기
      function addP() {
        //   1. 새로운 p요소 노드를 만들기
        let newP = document.createElement("p");

        // 1-1. 새로운 img요소 노드를 만들기
        let newImg = document.createElement("img"); //<img />

        //   2. 새로운 P요소 노드에 들어갈 텍스트 노드 만들기
        let txtNode = document.createTextNode(
          "DOM은 Document Object Model의 약자이다."
        );

        // 2-1. 새로운 img요소 노드에 들어갈 속성 노드 만들기
        let srcNode = document.createAttribute("src");
        let altNode = document.createAttribute("alt");

        // 2-2. 속성 노드에 값 추가하기
        srcNode.value = "./img/image_1.jpg";
        altNode.value = "여자";

        //   3. 텍스트노드를 자식노드로 연결하기
        newP.appendChild(txtNode);

        // 3-1. 속성 노드를 자식 노드로 연결하기
        newImg.setAttributeNode(srcNode);
        newImg.setAttributeNode(altNode);

        // 4. 부모태그 요소인 #info에 newP를 자식 노드로 연결하기
        document.getElementById("info").appendChild(newP);
        // 4-1. 부모태그 요소인 #info에 newP를 자식노드로 연결하기
        document.getElementById("info").appendChild(newImg);

        // 네이버로 연결되는 a 태그 만들기
        let newA = document.createElement("a");
        let naverNode = document.createTextNode("네이버");
        let naverNode2 = document.createAttribute("href");
        naverNode2.value = "https://www.naver.com";

        newA.appendChild(naverNode);
        newA.setAttributeNode(naverNode2);
        // 네이버 링크 연결
        document.getElementById("info").appendChild(newA);
      }
    </script>
  </body>
</html>
    Designed by Tistory.

    티스토리툴바