🌱 기초 프론트엔드
DOM이 뭔가요?
쉽게 이해하기
가계도를 생각해 보세요. 할아버지 밑에 아버지, 그 밑에 나... 이렇게 계층 구조로 표현되죠. DOM도 비슷해요. HTML 태그들을 부모-자식 관계의 나무 구조로 정리한 거예요. 이 지도가 있어야 JavaScript가 '아, 이 버튼이 어디 있구나' 하고 찾아서 조작할 수 있어요.
핵심 정리
브라우저가 HTML을 이해하기 위해 만드는 나무 구조의 지도예요.
자세히 알아보기
DOM은 Document Object Model의 약자로, 브라우저가 HTML 문서를 이해하고 조작할 수 있도록 만든 객체 모델입니다. HTML 파일은 그냥 텍스트일 뿐이에요. 브라우저는 이 텍스트를 읽어서 트리 구조로 변환하는데, 이게 바로 DOM입니다.
예를 들어 <div> 안에 <p>와 <button>이 있다면, DOM에서는 div가 부모 노드가 되고 p와 button이 자식 노드가 됩니다. 이 구조 덕분에 JavaScript가 'p 태그를 찾아서 글자색을 빨간색으로 바꿔줘' 같은 명령을 내릴 수 있어요.
DOM은 실시간으로 변할 수 있습니다. 사용자가 버튼을 누르면 JavaScript가 DOM을 수정해서 새로운 요소를 추가하거나 스타일을 바꾸죠. 예를 들어 '더보기' 버튼을 누르면 숨겨진 내용이 나타나는 건, JavaScript가 DOM에 새 요소를 추가한 거예요.
실무에서는 document.querySelector() 같은 메서드로 DOM 요소를 찾고, .textContent나 .style로 내용과 스타일을 바꿉니다. React 같은 프레임워크는 이 과정을 자동화해서, 개발자가 직접 DOM을 건드릴 일을 줄여주죠. 하지만 DOM이 뭔지 알아야 디버깅할 때 브라우저 개발자 도구에서 뭘 보고 있는지 이해할 수 있어요.