자바스크립트 DOM 조작 – 요소 추가, 생성, 제거 for SAPUI5 기초

자바스크립트 DOM 조작과 관련하여, 문서 객체 모델 DOM(Document Object Model)의 정의에 대해서는 이전 문서를 참조해 보시기 바랍니다.

각각의 DOM 요소는 하나하나가 객체이기 때문에 생성, 추가, 삭제 등의 기능을 제공하고 있습니다.

문서 객체는 Parent와 Child로 구성이 되며, 어떠한 객체가 있을 때 상위의 객체를 Parent 객체, 하위의 객체를 Child 객체라고 합니다.

예를 들어, 아래의 코드가 있다면

...
<body>
  <div id="div1">
    Div1
</div>
...
</body>
...

body 기준으로 div은 하위 객체가 되며, div 기준으로 body는 상위 객체가 됩니다.

따라서 이 개념을 알고 있다면 객체를 생성, 이동, 제거 등도 쉽게 할 수 있습니다.

 

자바스크립트 DOM 조작 – 객체 엘리먼트의 생성

객체 엘리먼트는 createElement() 매소드를 통해 생성이 가능합니다.

Docuement.createElement() 는 자바스크립스 상에서 html에 태그를 추가하여 html 요소를 만들 수 있도록 해줍니다.

let element = document.createElement(tagName[, options]);

이렇게 생성된 엘리먼트는, 텍스트를 넣어준다거나 스타일을 변경하고 속성을 수정할 수 있습니다. 이렇게 생성된 코드는 Parent 객체에서 appendChild를 메소드를 통해 상위 객체에 넣어줄 수 있습니다.

아래의 코드는 엘리먼트를 생성하고 텍스트를 삽입 후 글자색을 red로 바꾼 소스입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1">
    Div1
  </ div >
    <script>
      //신규 엘리먼트 생성
      const h1 = document.createElement('h1');
      h1.textContent = "new element"
      h1.style.color = "red"
      //r객체를 가져온 후 append child로 추가
      const div1 = document.querySelector( "#div1")
      console.log( div1 );
      div1.appendChild( h1 )
    </script>
</body>
</html>

new element를 생성하는 방법 - 자바스크립트 DOM 조작

createElement를 활용하여 다음과 같이 생성이 가능합니다.

const a1 = document.createElement("a");           ---<a></a>
const div1 = document.createElement("div");       ---<div></div>
const input1 = document.createElement("input");   ---<input></input>
const p1 = document.createElement("p");           ---<p></p>

자바스크립트 DOM 조작 – 문서 객체 삭제하기

생성 createElement 와 마찬가지로, 객체를 삭제할 수 있으며 삭제시에는 웹브라우저 상에서 해당 객체는 삭제되어 보이지 않게 됩니다.

객체요소.removeChild() 의 형태로 사용됩니다.

아래는 setTimeout() 함수를 사용하여 createElement로 생성 후 5초 후에 removeChild()를 통해 삭제한 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 
</head>
<body>
  
  <div id="div1">
    Div1
  </div>
 
    <script>
      //신규 엘리먼트 생성
      const h1 = document.createElement('h1');
      h1.textContent = "new element"
      h1.style.color = "red"
 
      //r객체를 가져온 후 append child로 추가
      const div1 = document.querySelector( "#div1")
      console.log( div1 );
      div1.appendChild( h1 )
 
      setTimeout(  () => {
        //div1.removeChild( h1 )
        h1.parentNode.removeChild( h1 )
      }, 5000)
    </script>
 
</body>
</html>

 

자바스크립트 DOM 조작 – 문서 객체의 이동

단순히 appendChild()로 이동하고자 하는 곳에 코드를 작성해 주는 경우, 원래 있던 위치에서 빠지고 새로운 위치에 보이게 되어 이동의 효과를 줄 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="div1">
      <h2>Div1 객체</h2>
    </div>
    <hr />
    <div id="div2">
      <h2>Div2 객체</h2>
    </div>
 
    <script>
      //신규 엘리먼트 생성
      const div1Obj = document.querySelector("#div1");
      div1Obj.style.color = "red";
      const div2Obj = document.querySelector("#div2");
      div2Obj.style.color = "blue";
 
      const h2Elem = document.createElement("h2");
      h2Elem.textContent = "h2추가된 엘리먼트";
 
      div1Obj.appendChild(h2Elem);
 
      //문서 객체의 이동
      setTimeout( () =>{
        div2Obj.appendChild( h2Elem );
      }, 5000)
    </script>
  </body>
</html>

div2로 이동하는 객체 - 자바스크립트 DOM 조작

DOM 객체 3가지 주요 메소드의 주요 특성을 정리하면 다음과 같습니다.

  • document.createElement()를 통해 문서 객체 생성
  • document.appendChild()를 통해 문서 객체 추가(혹은 이동)
  • document.removeChild()를 통해 문서 객체 삭제

 

mdn mozilla 생성 편, 추가 편, 삭제 편 문서를 참고하여 작성하였으며, 해당 링크를 통해 더 자세하게 있습니다.