본문 바로가기

js

DOM 조작이란

🧱 DOM이란?

✅ DOM = Document Object Model

  • HTML 문서를 자바스크립트가 다룰 수 있는 "객체" 형태로 만든 구조
  • 즉, HTML을 트리 구조로 변환한 거야

예:

 

<body>
  <h1>안녕!</h1>
  <p>DOM이 뭔가요?</p>
</body>

 

이런 HTML은 자바스크립트 입장에서 보면:

 

document.body
document.querySelector('h1')
document.querySelector('p').textContent

 

🔧 DOM 조작이란?

"자바스크립트를 이용해서 HTML 요소나 내용을 추가/수정/삭제/이동하는 것"

 

🛠️ 자주 하는 DOM 조작 예시

작업                                          예시

 

요소 찾기 document.getElementById(), querySelector()
텍스트 바꾸기 element.textContent = "변경된 텍스트"
HTML 바꾸기 element.innerHTML = "<b>굵게</b>"
스타일 변경 element.style.color = "red"
요소 추가 element.append(), appendChild()
요소 삭제 element.remove()
이벤트 연결 element.addEventListener("click", function(){ ... })

 

💡 요약하면

DOM 조작 = 브라우저 화면 속 HTML을 자바스크립트로 다루는 것

그래서 버튼 누르면 글자가 바뀌고, 요소가 생기고, 색깔이 바뀌고...
그 모든 게 DOM 조작 덕분이야! 😄