241011

이경현·2024년 10월 11일

HTML 페이지와 자바스크립트 객체

HTML DOM 객체 **
BOM 객체
코어객체

  1. DOM(Document Object Model : 문서객체모델) :
    웹페이지의 콘텐츠 및 구조 스타일 요소를 구조화시켜 표현하여 프로그래밍언어가 해당문서에 접근하여 읽고 조작할 수 있도록 API(Application Programming Interface)를 제공하는 일종의 인터페이스이다.
    자바스크립트와 같은 스크립팅 언어가 쉽게 웹페이지에 접근하여 조작할 수 있도록 연결시켜주는 역할이다.

dom의 목적
dom 트리
dom 객체

+API (Application Programming Interface) : 여기서 애플리케이션은 고유한 기능을 가진 소프트웨어를 뜻한다. 인터페이스는 두 애플리케이션 간의 서비스 계약. 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의한다.
API 문서에는 개발자의 요청과 응답을 구성하는 방법에 대한 정보가 들어 있다.

DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 함. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다.

트리자료구조로 구축되기 때문에 HTMl 문서는 최종적으로 하나의 최상위 노드(root노드)에서 시작해서 자식노드들을 가지며 아래로만 뻗어 나가는 구조로 만들어진다.


위 코드를 기준으로 노드는

이런구조로 구축된다.

노드개념정리 더 필요 추가하기

document node (문서노드) : DOM Tree에서 최상위 루트노드를 나타내며, document객체를 가르킨다.
window 객체의 document 프로퍼티로 바인딩(연결)이 되어 있어 window.document , document로 참조해 사용한다.
HTML문서에서 이 노드는 오직 1개만 존재한다.

element node (요소 노드) : 모든 HTML 요소 (body, h2, div 등)는 이 요소 노드입니다. 속성 노드를 가질 수 있는 유일한 노드로서, 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있게 됩니다.

attribute node (속성 노드)
모든 HTML 요소의 속성은 이 속성 노드입니다. 요소 노드에 대한 정보를 가지고 있습니다. 그렇기 때문에 부모 노드가 아닌 해당 노드와 연결(바인딩)이 되어 있습니다.

text node (텍스트 노드)
HTML 문서의 모든 텍스트는 이 텍스트 노드라 해도 과언이 아닙니다. 텍스트 노드는 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 잎사귀를 닮았다 해 리프 노드라고 불리기도 합니다.

트리자료구조 : > 자료조사 더 필요

주말동안 정리하기 + db
https://www.codestates.com/blog/content/dom-javascript

0개의 댓글