[WEB][JS] JavaScript 기초

[WEB][JS] JavaScript 기초 - DOM 제어🖥️ Dev/WEB2025. 2. 10. 01:24@청월누리

Table of Contents

웹 개발 시 JavaScript를 이용하여 HTML DOM을 제어하는 방법에 대해 정리한 글입니다.

DOM의 기본 개념

DOM의 정의

DOM(Document Object Model)은 웹 문서를 구조적으로 표현하고, 이를 프로그래밍적으로 제어할 수 있도록 브라우저에서 제공하는 트리 구조(tree structure)을 의미
웹 문서는 흔히 HTML을 통해 작성되며, 브라우저는 HTML 문서를 해석하여 DOM 트리를 생성함 >> 자바스크립트를 사용하여 DOM 트리를 수정, 선택, 삭제 등 조작이 가능

DOM 트리 구조

DOM 트리는 <html> 태그부터 <head>, <body> 등 다양한 요소들이 트리 형태로 구성되어 있음

<html>
  <head>
    <title>문서 제목</title>
  </head>
  <body>
    <div>
      <h1>DOM 예제</h1>
      <p>이 문서는 DOM 공부를 위한 예제입니다.</p>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Document
 └── html
      ├── head
      │    └── title
      └── body
           ├── div
           │    ├── h1
           │    └── p
           └── script

DOM 트리의 각 노드(Node)는 HTML 요소를 객체 형태로 표현한 것이며, 이를 DOM 노드라고 부름
트리의 최상위 객체인 document는 전체 HTML 문서를 대표하는 최상위 DOM 객체

DOM 제어의 기본 원리

자바스크립트와 DOM

자바스크립트 코드는 브라우저 엔진(V8, SpiderMonkey 등)을 통해 실행되며, document 객체를 통해 HTML 요소를 탐색하고 생성, 수정, 삭제 등의 작업을 수행
대표적으로 사용되는 DOM API가 있음

DOM과 BOM

DOM은 문서(HTML)를 조작하기 위한 객체 모델을 의미하고, .BOM(Browser Object Model)은 브라우저 창(탭), 주소, 히스토리, 스크린 등 브라우저 자체를 제어하기 위한 객체 모델을 의미
흔히 비슷한 의미로 함께 사용되지만, DOM은 문서 자체, BOM.은 브라우저 환경을 대상으로 한다는 점에서 차이가 존재

DOM 선택(요소 검색) 방법

DOM을 제어하기 위해서는 어떤 요소(element)를 조작해야하는지 찾아야 하며, 요소를 찾기 위해서는 DOM APi를 활용합니다.

id 속성을 이용한 검색

<div id="content">내용</div>

<script>
  const contentDiv = document.getElementById("content");
  console.log(contentDiv); 
</script>

document.getElementByid(id) : id 속성이 일치하는 단일 요소를 반환
가장 빠르고 직관적인 방법이지만, id는 HTML 문서 내에서 유일해야 한다는 점이 전재되어 있음

class 속성을 이용한 검색

<div class="box">박스1</div>
<div class="box">박스2</div>

<script>
  const boxes = document.getElementsByClassName("box");
  console.log(boxes); // HTMLCollection(2) [...]
</script>

document.getElementsByClassName(className) : class 속성이 일치하는 모든 요소를 HTMLCollection 형태로 반환
HTMLCollection은 배열과 유사하나, 실시간으로 구조 변화를 반영하며 배열의 매서드(map, forEach 등)를 직접적으로 사용하기는 어려움

tag 이름을 이용한 검색

<p>문단1</p>
<p>문단2</p>

<script>
  const paragraphs = document.getElementsByTagName("p");
  console.log(paragraphs); // HTMLCollection(2) [...]
</script>

document.getElementsByTagName(tagName) : 태그 이름이 일치하는 모든 요소를 HTMLCollection 형태로 반환

CSS 선택자를 이용한 선택

<div id="content" class="container">내용</div>

<script>
  const contentDiv = document.querySelector("#content.container");
  // id가 content이며, 동시에 class가 container인 요소

  const containers = document.querySelectorAll(".container");
  // class가 container인 모든 요소들(NodeList)
</script>

CSS 선택자(class, id, tag, 자식, 속성 선택자 등)를 활용해 요소를 찾는 방식
document.queryselector(selector) : CSS 선택자로 찾은 첫 번째로 일치하는 요소 하나만 반환
document.queryselectorAll(selector) : CSS 선택자로 찾은 일치하는 모든 요소를 NodeList 형태로 반환
- NodeList는 forEach 매서드를 사용할 수 있어서 HTMLCollection에 비해 조작이 편리함

DOM 요소 내용(프로퍼티) 및 스타일 변경

텍스트 내용 변경

<p id="msg">Hello World!</p>

<script>
  const msg = document.getElementById("msg");
  msg.textContent = "안녕하세요!";
</script>

DOM 요소의 텍스트를 변경할 때에는 보통 textContext 또는 innerText를 사용
- textContext : 요소 안의 모든 텍스트(스크립트, 스타일 제외)를 가져오거나 설정
- innerText : 사람에게 보이는 텍스트만 반환 및 설정 (브라우저 스타일을 고려)

HTML 자체 변경

const msg = document.getElementById("msg");
msg.innerHTML = "<strong>중요</strong> 메시지입니다.";

innerHTML을 사용하면 요소 내부의 HTML 구조를 통쨰로 읽거나 쓸 수 있음

XSS(크로스 사이트 스크립팅) 문제를 유발할 수 있으므로, 외부 입력을 직접 innerHTML에 대입할 때에는 매우 주의가 필요하다

속성(Attribute) 변경

<img id="myImage" src="old.jpg" alt="Old Image" />

<script>
  const myImage = document.getElementById("myImage");
  
  // 1) setAttribute 사용
  myImage.setAttribute("src", "new.jpg");

  // 2) 점 표기법 사용
  myImage.alt = "New Image";
</script>

element.setAttribute("속성명", "속성값") 또는 element.속성명 = "속성값"을 통해 변경 가능

스타일 변경

<div id="box" class="red-box">박스</div>

<style>
  .red-box { background-color: red; width: 100px; height: 100px; }
  .blue-box { background-color: blue; }
</style>

<script>
  const box = document.getElementById("box");
  // 인라인 스타일 수정
  box.style.border = "2px solid black";

  // 클래스 교체
  box.classList.remove("red-box");
  box.classList.add("blue-box");
</script>

인라인 스타일을 변경할 때는 element.style 객체를 사용
- ex. element.style.backgroundColor = "blue";
클래스 이름을 추가 및 삭제하여 CSS 적용을 바꾸고 싶으면, element.classList.add(), element.classList.remove(), element.classList.toggle() 등을 사용할 수 있음

DOM 요소 생성, 추가, 삭제

DOM 요소 생성

const newParagraph = document.createElement("p");
newParagraph.textContent = "새로운 문단이 생성되었습니다.";

document.createElement("태그이름")으로 새로운 요소 노드를 생성

생성한 요소를 문서에 삽입

const container = document.querySelector(".container");
container.appendChild(newParagraph);

생성한 요소는 적절한 부모 요소를 찾아 appendChild(), append(), prepend() 등을 사용하여 실제 DOM 트리에 삽입
- appendChild() : 노드만 받아들여 추가
- append() : 노드 혹은 문자열 등을 추가할 수 있음
- prepend() : 자식 요소 중 가장 앞에 노드를 추가

DOM 요소 삭제

<div class="container">
  <p id="removeMe">삭제될 문단</p>
</div>

<script>
  const removeMe = document.getElementById("removeMe");
  removeMe.remove(); 
  // 또는 removeMe.parentNode.removeChild(removeMe);
</script>

특정 요소를 삭제하기 위해서는 삭제하고자 하는 요소의 부모 요소를 통해 제거
- parent.remove(자식노드) 또는 element.remove() 사용 (단, element.remove() 최근 브라우저에서만 사용 가능)

핵심 요약

DOM은 HTML 문서를 구조화하여 자바스크립트 등에서 접근 및 수정할 수 있게 하는 객체 모델을 의미하며, 브라우저가 HTML을 해석해 구성하는 트리구조이다.
DOM 조작을 위해서는 특정 요소를 선택(getElementById, queryselector 등)하고 요소의 내용, 속성, 스타일 등을 수정하거나 생성 및 삭제할 수 있다.

'🖥️ Dev > WEB' 카테고리의 다른 글

[WEB] 웹 서버(Web Server)와 REST API 개념 정리 (0)	2025.03.07
[WEB][Node.js] Node.js 설치 및 NVM을 이용한 버전 관리 (feat. nvm-windows) (0)	2025.03.06
[WEB][JS] JavaScript 기초 - JavaScript 기본 문법 (0)	2025.02.09
[WEB][CSS] CSS 기초 - 레이아웃 관련 기본 속성 (3)	2025.02.04
[WEB][CSS] CSS 기초 - CSS 선택자와 주요 기본 속성 (0)	2025.01.31

@청월누리 :: DevKuk 개발 블로그

since 2025.01.27. ~ 개발자를 향해....🔥