DOM?

DOM의 정의

DOM은 문서의 각 요소(요소 노드, 텍스트 노드 등)을 객체로 표현하고,
이객체들 간의 관계를 트리구조로 나타낸다.
즉, HTML문서의 각 태그는 DOM에서 객체로 변환되어 JavaScript를 통해 프로그래밍적으로 접근하고 수정할 수 있다.

DOM의 구조

• 노드(Node): DOM의 기본 구성 요소로, 문서 내의 각 요소를 의미
  - 요소 노드: HTML 태그 div,p,a 등
  • 텍스트 노드: 요소 노드 내의 텍스트 내용
  • 속성 노드: 요소 노드의 속성 herf=""
  • 주석 노드: HTML 주석
• 트리 구조: DOM은 부모 자식관계를 가지며, 이를 트리 형태로 표현
  - html부모 head,body 자식 노드로
  

DOM의 접근 및 조작

JavaScript를 사용하여 DOM을 접근하고 조작할 수 있다.
주요 메서드와 속성

• document.getElementById(id): 특정 ID를 가진 요소를 선택
• document.getElementByClassName(className): 특정 클래스 이름을 가진 모든 요소를 선택
• document.querySelector(selector): css선택자를 사용하여 요소를 선택
• appendChild(node): 특정 노드를 부모 노드의 자식으로 추가
• removeChild(node): 특정 자식을 부모 노드에서 제거
• innerHTML: 요소의 HTML 내용을 가져오거나 설정

DOM과 이벤트

DOM은 사용자의 상호작용 (클릭, 키입력 등)에 반응하는 이벤트 처리를 할 수 있다.
이를 통해 동적인 웹 페이지르 ㄹ만들 수 있다.

DOM의 중요성

DOM은 웹 페이지의 구조를 프로그래밍적으로 이해하고 조작할 수 있도록 해준다.
이를 통해 개발자는 사용자 인터페이스를 동적으로 변경하고, 사용자 상호작용에 따라 페이지를 업데이트 할 수 있다.

정리

DOM은 웹 개발에서 필수적인 개념으로, HTML 및 XML문서의 구조를 표현하고,
JavaScript를 통해 무서를 접근하고 좆가할 수 잇는 방법을 제공한다.
이를 통해 개발자는 풍부하고 상호작용이 가능한 웹 애플리케이션을 만들 수 있다.

추가

1. DOM과 리소스
   $(document).ready()는 DOM이 완전히 로드되고 파싱된 상태에서 실행
   하지만 이미지, 스타일시트, ifrmae 등 외부 리소스의 로딩이 완료된 상태는 아니다.
   즉, DOM이 준비된 후 즉시 실행되므로, 페이지의 모든 요소가 화면에 나타나기도 전에 실행될 수 있다.

2. window.onload
   반면에 window.onload 이벤트는 페이지의 모든 요소 (이미지, 스타일시트 등 포함)가 완전히 로드된 후에 실행된다. 따라서 $(document).ready()보다 더 나중에 실행된다.

두가지 차이를 이해하고 상황에 맞게 메서드를 사용하면 좋을 것 같다.