문서 객체 모델(DOM)

• 브라우저 객체 모델(BOM)의 document 객체는 웹페이지 그 자체이며, 그와 관련된 기능을 제공하는 객체
• 문서 객체 모델(DOM)은 웹페이지를 스크립트 언어와 연결해주는 계층 구조의 인터페이스
  • DOM은 자바스크립트 언어 X

문서 객체 모델의 구조와 개념

• 문서 객체 모델은, 웹 문서 안의 모든 요소를 정의하고 요소에 접근하는 방법을 제공
  • 우리가 작성한 HTML 문서를 구조화해서 표현하는 것
    
• DOM은 각 노드에 해당하는 태그나 속성을 모두 '객체'로 제공
  • 따라서 HTML 문서의 요소들은 자바스크립트 내장 객체처럼 자유롭게 접근이 가능하며 동적으로 변경할 수 있음
  • 여기까지만 이해해도 DOM이라는 인터페이스를 이용해서 자바스크립트로 HTML 요소들을 조작할 수 있음

Node의 구조와 개념

• DOM은 웹 문서를 4가지의 노드로 구분
  • Document Node : DOM 트리의 최상위 노드이자 시작점
  • Element Node : 요소가 부모 자식 관계로 나타나있으며 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드에 접근해야 함
  • Attribute Node : HTML 요소의 일부인 속성 노드이며 요소 노드를 통해 접근해서 참조, 수정할 수 있음
  • Text Node : HTML 요소의 텍스트 노드이며, 요소 노드의 자식이자 DOM 트리의 가장 작은 단위
  • Commet Node : 주석 노드
• 모든 DOM 요소는 Node 객체를 상속받음
  
• 이러한 노드(객체)들과 그 구조를 통해 우리는 웹 문서의 정보, 구조, 요소 등 에 접근하고 동적으로 변경할 수 있음
  

느낀점

• 이론적으로는 이해가 가지만, DOM의 코드를 빨리 구경해 봐야겠다.

참고

https://cucat.tistory.com/entry/%EB%AC%B8%EC%84%9C-%EA%B0%9D%EC%B2%B4-%EB%AA%A8%EB%8D%B8-DOM-%EB%85%B8%EB%93%9C-%EA%B5%AC%EC%A1%B0-%EA%B0%9C%EB%85%90