What is the JavaScript DOM?
- DOM은 웹 페이지와 코드 간의 핵심 인터페이스로, JavaScript가 웹 페이지를 동적으로 만들고 콘텐츠, 구조, 스타일을 제어할 수 있게 합니다. 🌐
- DOM은 'Document', 'Object', 'Model'의 약자로, HTML 페이지를 문서(Document)로, 각 HTML 요소를 JavaScript 객체(Object)로, 전체 구조를 트리 형태의 모델(Model)로 표현합니다. 🌳
- JavaScript는 DOM을 통해 웹 페이지의 요소를 생성(Create), 읽기(Read), 업데이트(Update), 삭제(Delete)하는 CRUD 작업을 수행하여 동적인 상호작용을 구현합니다. 🛠️
- 모든 HTML 요소는 JavaScript 객체로 변환되어 스크립트가 조작할 수 있게 되며,
document.title, document.URL, document.head, document.body와 같은 속성을 통해 접근하고 변경할 수 있습니다. 💡
document.all은 배열처럼 보이지만 실제로는 HTMLAllCollection이라는 특별한 객체이며, forEach와 같은 배열 메서드를 직접 사용할 수 없습니다. 🧩
- 실습을 통해
console.dir(document)로 DOM 객체의 방대한 속성과 메서드를 탐색하고, document.title = "새 제목"처럼 직접 값을 변경하여 페이지에 즉시 반영되는 것을 확인할 수 있습니다. 🚀
- 이 과정은 초보 웹 개발자를 위해 DOM의 구조 분석, 요소 탐색, 조작, 이벤트 리스닝 기술을 가르치며, 최종적으로 지출 추적기 앱을 만들며 모든 개념을 통합합니다. 💰
- DOM 학습을 위해서는 JavaScript에 대한 충분한 이해와 HTML, CSS의 기본 지식이 필요합니다. 📚