🧱 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 조작 덕분이야! 😄
'js' 카테고리의 다른 글
배열 메서드 forEach, map, fill, filter, reduce (0) | 2025.03.30 |
---|---|
DOM 요소 선택 방법 getElementById, querySelector, querySelectorAll (0) | 2025.03.22 |
HTML 요소에 내용 추가하는 3가지 방법 — append, textContent, innerHTML (0) | 2025.03.22 |
indexOf, lastIndexOf, includes 배열이나 문자열에서 특정 값 찾기 (0) | 2025.03.22 |
배열의 내용을 합치고 나누는 join과 split (0) | 2025.03.22 |