메서드로 DOM 조작해서 문서 수정하기

메서드로 DOM 조작해서 문서 수정하기

2025. 9. 22. 23:39ㆍFront-end/JavaScript

1. 메서드로 문서 수정하기

메서드로 요소를 생성하고 수정하는 방법들을 알아보자.

1. 요소(Element), 노드(Node) 생성

document.createElement(tag)

새로운 HTML 요소 태그를 생성

// 1. <div> 요소 만들기
let div = document.createElement('div');

// 2. 만든 요소의 클래스를 'alert'로 설정
div.className = "alert";

// 3. 내용 채워넣기
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

document.createTextNode(text)

텍스트 노드를 생성한다

let textNode = document.createTextNode('안녕하세요.');

2. 요소 삽입

node.append(노드or문자열)

node의 마지막 자식으로 삽입

node.prepend(...)

노드의 맨 앞쪽 자식으로 삽입

node.before(...), node.after(...)

특정 요소의 앞이나 뒤에 삽입

<ol id="ol">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  ol.before('before'); // <ol> 앞에 문자열 'before'를 삽입함
  ol.after('after'); // <ol> 뒤에 문자열 'after를 삽입함

  let liFirst = document.createElement('li');
  liFirst.innerHTML = 'prepend';
  ol.prepend(liFirst); // <ol>의 첫 항목으로 liFirst를 삽입함

  let liLast = document.createElement('li');
  liLast.innerHTML = 'append';
  ol.append(liLast); // <ol>의 마지막 항목으로 liLast를 삽입함
</script>

node.replaceWith(...)

기존 노드를 다른 노드 또는 문자열로 교체

3. HTML 문자열 삽입

eleminsertAdjacentHTML(whenre, html)

문자열 형태의 HTML을 태그 그대로 삽입

insertAdjacentText, insertAdjacentElement

HTML 파싱 안하고 텍스트 or 요소 삽입

<div id="div"></div>
<script>
  div.insertAdjacentHTML('beforebegin', '<p>안녕하세요.</p>');
  div.insertAdjacentHTML('afterend', '<p>안녕히 가세요.</p>');
</script>

4. 삭제

node.remove()

해당 노드를 문서에서 제거

<script>
  let div = document.createElement('div');
  div.className = "alert";
  div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다.";

  document.body.append(div);
  setTimeout(() => div.remove(), 1000);
</script>

5. 복제

elem.cloneNode(deep)

요소를 복제. (deep=true)일 경우 자식 요소들까지 복제

<script>
  let div2 = div.cloneNode(true); // 메시지 창 복제
  div2.querySelector('strong').innerHTML = '안녕히 가세요!'; // 복제한 메시지 창 내용 수정

  div.after(div2); // 복제한 메시지 창을 기존 메시지 창 다음에 보여줌
</script>

6. DocumentFragment 사용

DocumentFragment

여러 노드를 한묶음으로 묶어두고, 문서에 삽입할 대 효율적으로 삽입

<script>
function getListContent() {
  let fragment = new DocumentFragment();

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    fragment.append(li);
  }

  return fragment;
}

ul.append(getListContent()); // (*)
</script>

2. 스타일 적용하기

자바스크립트로 HTML 요소의 스타일을 변경할 수 있다.

1) CSS에 클래스를 정의하고, 요소에 클래스를 붙이거나

2) 요소의 style 속성으로 직접 스타일을 지정할 수 있다.

하지만 가능하면 클래스 방식으로 하는 것이 유지보수에 더 좋다.

className

요소의 클래스 전체를 문자열로 취급

<body class="main page">
  <script>
    alert(document.body.className); // main page
  </script>
</body>

classList

클래스 하나만 추가/제거/토글하고 싶을 때 사용한다

<body class="main page">
  <script>
    for (let name of document.body.classList) {
      alert(name); // main과 page가 출력됨
    }
  </script>

style 프로퍼티

요소의 인라인 스타일을 조작할 때 사용

// 예시를 실행하면 페이지의 <body>가 깜빡거림
document.body.style.display = "none"; // hide

setTimeout(() => document.body.style.display = "", 1000); // 1초 후 다시 원래 상태로 돌아옵니다.

style.cssText

요소의 style 속성 전체를 하나의 문자열로 설정하거나 읽고 싶을 때 사용

<div id="div">버튼</div>

// cssText를 사용하면 'important' 같은 규칙도 설정할 수 있음
<script>
  div.style.cssText=`color: red !important;
    background-color: yellow;
    width: 100px;
    text-align: center;
  `;

  alert(div.style.cssText);
</script>

getComputedStyle(element, [pseudo])

요소에 최종적으로 적용된 스타일을 읽어올 때 사용한다.

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // 이제 마진과 색 정보를 얻을 수 있습니다.

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

참고

문서 수정하기

ko.javascript.info

https://ko.javascript.info/styles-and-classes

스타일과 클래스

ko.javascript.info

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

브라우저 이벤트 (0)	2025.09.23
브라우저 창 사이즈와 스크롤 정보 얻기 (1)	2025.09.22
DOM 노드에 대응하는 클래스 (0)	2025.09.22
E2 : 요소 검색하기 (0)	2025.09.08
E1 : JS로 DOM 객체 탐색하기 (0)	2025.09.07

🥔 감자의 오묘한 개발 🥔