[자바스크립트] 문서 객체 모델 DOM에서 노드 추가 및 삭제하기

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

 

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

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

DOM 트리에 새로운 노드를 추가(텍스트나 속성 노드 포함)하는 방법도 있다. 

 

노드 리스트

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

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

이렇게 여러 개의 노드 정보를 저장한 것, 노드를 여러 개 저장한 데이터 형태를 노드 리스트라 한다.

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

 

 

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

 

 

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

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

기본형 : document.createElement(노드명);
               ex. let newP = document.createElement("p");

다만, 이렇게 한다고 해도 새로운 노드가 만들어진 것 뿐이지 아직 웹 문서에 새로운 노드가 추가된 것은 아니다 ! 

         <p> 태그의 내용에 해당하는 텍스트 노드도 만들어야 한다.

 

 

2. 텍스트 노드 만들기 : create TextNode() 메서드

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

기본형 : document.createTextNode(텍스트);
               ex. let txtNode = document.createTextNode("태그<p>의 텍스트 노드입니다.");

여기까지 요소 노드나 텍스트 노드는 DOM 트리에 추가는 되었지만, 연결은 되어 있지 않은 상태이다 !

 

 

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

추가하고자 하는 노드들을 만든 뒤에 appendChild() 메서드를 사용해 원하는 요소를 부모로 하여 자식 노드로 추가하는데, 

이 때 연결하고자 하는 부모 노드의 맨 끝의 자식 노드로 추가된다.

기본형 : 부모 노드.appendChild(자식 노드);
                ex. newP.appendChild(txtNode);        // 새로 만든 newP 노드에 txtNode를 자식 노드로 연결한다.
                       document.getElementByID("study").appendChild(newP);       
                        // study라는 id를 가진 노드에 새로 만든 newP 노드를 자식 노드로 연결한다.

 

 

 

+ 위의 요소 만들기와 이벤트 처리기를 접목해 링크를 클릭하면 텍스트가 표시되도록 소스를 작성해 보면, 

 

<div id= "container">

    <h1>DOM  공부하기</h1>

    <a href= "#" onclick= "addP(); this.onclick= ' '; "> 더보기 </a>        // 링크 클릭하면 addP() 함수가 한 번만 실행되도록 함 !

    <div id= "study"></div>                                                                                // 이 부분 작성이 안되면 링크 클릭할 때마다 p 요소 추가됨 !

</div>

 

<script>

    function addP() {

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

         let txtNode = document.createTextNode("태그<p>의 텍스트 노드입니다.");

         newP.appendChild(txtNode); 

         document.getElementByID("study").appendChild(newP); 

    }

</script>

 

 

 

 

 

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

 

 

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

텍스트 노드를 추가했던 것과 같은 방법으로 새로운 이미지 노드를 만들어 보겠다.

ex. let newImg = document.createElement("img");  

 

 

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

img 요소는 src 속성을 사용해 이미지 파일 경로를 지정해야 하므로, 속성 노드를 만들어야 하겠다.

기본형 : document.createAttribute(속성명);
                ex. let scrNode = document.createAttribute("src");
                       let altNode = document.createAttribute("alt");
                       srcNode.value = "images/dom.png";         // src 속성값 지정
                       altNode.value = "돔 트리 이미지";                 // alt 속성값 지정

 

 

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

속성 노드는 요소 노드의 자식으로 연결되야 하는데, 텍스트 노드와 달리 appendChild() 메서드가 아닌 setAttribute() 메서드를 사용한다.

이미 요소 노드에 추가하고자 하는 속성이 들어 있었다면, 기존 속성 노드는 추가하려고 하는 속성이 덮어쓰게 된다 !

기본형 : 요소(노드)명.setAttributeNode(속성노드);
              ex. newImg.setAttributeNode(srcNode);
                    newImg.setAttributeNode(altNode);

 

 

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

(img) 요소 노드에 (src, alt) 속성 노드를 연결해놓기까지 했지만, 이 요소 노드는 만들어지기만 하고, 웹 문서의 DOM에 추가하지는 못한 상태이다. 화면에 표시하려면 이전에 했던 것처럼 appendChild() 메서드를 사용해 필요한 위치에 자식 노드로 추가하면 된다.

ex. document.getElementById("study").appendChild(newImg);

 

 

 

+ 위의 소스에서 링크 클릭하면 텍스트가 보이는 곳에 이미지도 같이 보이도록 추가 및 변경해 작성해 보면, 

 

<div id= "container">

    <h1>DOM  공부하기</h1>

    <a href= "#" onclick= "addP_Img(); this.onclick= ' '; "> 더보기 </a>        // 링크 클릭하면 addP_Img() 함수가 한 번만 실행

    <div id= "study"></div>                                                                               

</div>

 

<script>

    function addP_Img() {

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

         let txtNode = document.createTextNode("태그<p>의 텍스트 노드입니다.");

         newP.appendChild(txtNode); 

         document.getElementByID("study").appendChild(newP); 

 

        let newImg = document.createElement("img");  

        let scrNode = document.createAttribute("src");

        let altNode = document.createAttribute("alt");

        srcNode.value = "images/dom.png";

        altNode.value = "돔 트리 이미지"; 

        newImg.setAttributeNode(srcNode);

        newImg.setAttributeNode(altNode);

        document.getElementById("study").appendChild(newImg);              // id가 study인 부모 요소의 마지막 자식 요소로 추가

    }                                                                                                                                         // 이전 존재하고 있는 텍스트 자식 요소 아래에 추가됨

</script>

 

 

 

 

 

CSS 속성에 접근하기

 

 

CSS 속성에 접근하려면 해당 스타일이 적용된 HTML 요소 다음에 예약어 style을 쓰고 속성을 작성한다.

기본형 : document.요소명.style.속성명;
              ex. document.getElementById("box").style.color = "orange";
              cf. 속성명 중 중간에 하이픈이 있는 속성은 두 단어를 합쳐 카멜식으로 표기한다.
                  ex. background-color 속성은 backgroundColor라고 속성명을 작성한다.

 

+ 이벤트와 CSS 속성 변경이 결합된 코드를 작성해보면,

 

...

<div id= "box"></div>

...

 

<script>

    let myBox = document.querySelector("#box");

    myBox.addEventListener("mouseover", function() {        // 마우스 포인터를 올리면

        myBox.style.backgroundColor = "gray";                            // 배경색이 회색으로 바뀜

        myBox.style.borderRadius = "50%";                                    // 원으로 테두리의 모양이 바뀜

    });

    myBox.addEventListener("mouseout", function() {           // 마우스 포인터를 치우면

         myBox.style.backgroundColor = "";                                     // 배경색이 원래 지정되었던 값으로 돌아옴

         myBox.style.borderRadius = "";                                             // 원래 지정되어있던 테두리 모양으로 돌아옴

    });

</script>

 

 

 

노드 삭제하기

 

 

 

working on...