[자바스크립트] - DOM에서 노드 추가, 삭제하기 / 노드리스트 / 텍스트 노드를 사용하는 새로운 요소 추가하는 법

'태그를 동적으로 생성한다' = html에 없는 태그를 자바스크립트로 생성한다 라는 뜻

---

 

웹 문서에서 처음 화면에서는 보이지 않다가 클릭이나 이벤트가 발생하면 내용이 나타나는 경우가 있다. 

이런 동작은 CSS의 display 속성을 사용해서 만들 수도 있지만, 

DOM트리에 새로운 노드를 추가하는 방법도 있다. 

 

이때 주의할 점은 노드를 추가하면 단순히 요소 노드뿐 아니라 텍스트와 속성 노드도 함께 추가해주어야 한다는 점이다.

 

노드리스트란?

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

dom에 접근할 때 querySelectorAll( )매서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다. 

이때 노드 정보를 여러 개 저장한 것이 노드 리스트이다. 

배열과 비슷하게 동작한다는 특징이 있다. 

 

여러 개 노드 중 특정한 노드를 불러오고 싶다면 아래와 같은 기본형을 사용한다. 

[기본형]

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

 

  const liList = document.querySelectorAll("li");

      console.log(liList[2]);

 

변수에 담아놨다가 인덱스 번호로 가져오는 게 일반적이다. 

 

---

새로운 노드 추가 과정

새로운 노드를 추가할 때에는 DOM트리를 구성하는 기본 원칙에 따라 추가하여 생성할 수 있다. 

단순히 태그에 해당하는 요소 노드뿐만 아니라 텍스트 노드와 속성 노드도 추가해야 한다. 

예를 들어 img태그요소를 자바스크립트를 이용해 동적으로 생성하고 싶다면

<img>태그의 요소노드 뿐만 아니라 속성에 해당하는 src, alt같은 속성 노드도 추가해줘야 한다. 

어떠한 웹 문서의 DOM트리에 새로운 노드를 추가하려면 그 문서에 새로운 소스 코드를 작성해야 한다. 

그래서 새 노드를 추가할 때는 웹 문서에 어떤 소스를 추가할지 먼저 생각하고 그에 따라 요소노드나 텍스트, 속성노드도 만들어야 한다. 

 

---

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

 

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

: DOM에 새로운 요소를 추가할 때 가장 먼저 해야 할 일은 요소 노드를 만드는 것이다. 

이때 사용하는 매서드는 createElement( )매서드인데 괄호 안에 해당하는 요소 노드를 만들면 된다. 

[기본형]

document.createElement('노드명');

ex) document.createElement('p');

 

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

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

텍스트 노드를 만드는 매서드는 createTextNode( )매서드이고, 아래의 기본형을 사용한다. 

[기본형]

document.createTextNode('텍스트');

 

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

: 위 1번과 2번은 새로운 p노드를 만들고, textnode를 따로따로 만들어둔 상태이다. 

아직까지는 노드만 생성된 상태이고, 부모노드와 자식노드가 연결되지 않은 상태이다. 

 appendChild( )매서드는 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용한다. 

이때  appendChild( )매서드를 사용해서 연결하는 노드는 자식노드 중 맨 끝에 추가된다. 

*항상 자식이 부모한테 연결되야한다. 

[기본형]

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

 

---

예제 ) 더보기 버튼을 클릭하면 아무것도 없던 div #info에서 자바스크립트로 p코드 생성해서 보여주기 

 

 

이 과정이 어렵다면 innerHTML을 사용해도 된다. 

단, innerHTML의 경우 갈아치우게 되는 것이기에 기존 구조는 싹 다 사라진다. 

기존의 내용은 유지해줘야한다면 위의 내용을 써줘야한다. 

 

html

 

 <div id="container">

      <h2>DOM노드 추가 삭제하기</h2>

      <!-- 링크를 클릭하면 addP()함수가 한번만 실행되도록 한다. 뒤에 ''빈문자를 쓰면 한번만 실행되도록 하게 하는 것  -->

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

      <div id="info"></div>

    </div>

 

 

자바스크립트

 //새로운 노드 추가 과정

      function addP() {

        // 1. 새로운 p 요소 노드를 만들기 <p> </p>가 생성됨.

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

        // 2. 새로운 요소 노드에 들어갈 텍스트 노드 만들기 p에 들어갈 문구 생성

        let txtNode = document.createTextNode(

          "DOM은 Document Object Model의 약자다"

        );

        // 3. 텍스트 노드를 자식노드로 연결하기 <p>내용</p>이렇게 연결됨

        newP.appendChild(txtNode);

        // 4. 부모태그요소인 #info에 newP를 자식 노드로 연결하기

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

      }