DOM(Document Object Model) 제어
웹 브라우저는 HTML 문서를 읽고, 자바스크립트가 조작할 수 있도록 화면의 모든 요소들을 객체(Object) 트리 형태로 메모리에 올려놓습니다. 이것이 DOM입니다.document.querySelector로 요소를 가져와서 이벤트를 달아주고 스타일을 바꾸는 것이 프론트엔드 인터랙티브 웹의 가장 기본입니다.
브라우저 꼭두각시 인형극 (DOM 조작)
JavaScript (조종사)
document.querySelector()
조종 (Manipulation)
HTML DOM (꼭두각시)
"스타일, 내용, 애니메이션이
실시간 변경됨!"
실시간 변경됨!"
<!-- HTML -->
<h1 id="title">로고</h1>
<button id="btn">색상 변경</button>
<script>
// 1. 문서에서 요소 찾아오기
const titleElement = document.querySelector("#title");
const buttonElement = document.querySelector("#btn");
// 2. 이벤트 리스너(클릭 감지기) 달아주기
buttonElement.addEventListener("click", function() {
// 3. 클릭 시 CSS 스타일 변경
titleElement.style.color = "red";
// 4. 클릭 시 텍스트 변경
titleElement.textContent = "클릭됨!";
});
</script>