DOM
문서 개체 모델을 의미한다. 기본적으로 HTML 문서를 구조적으로 나타낸다. JS를 이용해 HTML 요소와 스타일에 엑세스해 조작할 수 있게 해준다.
예를 들어, 텍스트도 바꾸고 HTML 특성도 바꾸고 JS에서 CSS 스타일도 바꿀 수 있다.
∴ DOM은 기본적으로 HTML 문서와 JS 코드 사이의 연결점
HTML 페이지로 로드되면 브라우저가 자동으로 DOM을 생성한다.
이런 나무 구조물에 저장한다. 이 트리에서는 각각 HTML 요소가 하나의 개체이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Simple Page</title>
</head>
<body>
<section>
<p>A paragraph with a <a>link</a></p>
<p>A second paragraph</p>
</section>
<section>
<img src="dom.png" alt="THE DOM">
</section>
</body>
</html>사진은 tree structure이다. HTML의 각 요소에서 볼 수 있듯이 요소 노트와 DOM 트리가 있다. JS를 이용해 각 노드에 액세스하고 상호작용할 수 있다.
DOM은 제일 위에서 항상 문서 개체로 시작한다.
document란 JS에서 엑세스 권한을 가진 특특별한 개체이다. document는 DOM으로 들어가는 입구 역할을 한다.
문서의 첫번째 하위 요소는 보통 HTML요소이다. 왜냐하면 그건 보통 모든 HTML문서의 루트 요소이다.
다음으로, HTML은 보통 두 개의 하위 요소를 갖고 있다. 머리와 몸체이다.
물론 여기 DOM 트리에서도 찾을 수 있다. HTML에서 인접한 요소이다. 따라서 DOM에서도 형제이다. 중첩된 HTML 구조로 더 깊이들어갈 수록 DOM 트리에 점점 더 많은 하위 아이템을 추가한다. 머리와 몸통 내부에 더 많은 구성 요소가 이쏙 두 부분과 몸통 자체에도 구성 요소가 있다.
첫 단락에도 아이가 있다. 연결요소이다. 이제 DOM 트리에 모든 HTML 요소가 있다. 하지만 DOM 트리는 요소 노드 이상이다. 텍스트 자체에 대한 노드도 있고 주석과 다른것도 있다. HTML 문서안에 뭐가 있든 DOM에 있어야 한다는 규칙이 있다. DOM은 HTML 문서를 완벽하게 표현한다. 그래서 복잡한 방법으로 조작할 수 있다.
DOM과 DOM 조작할 때 사용할 수 있는 모든 메서나와 속성 문서화나 쿼리 선택기 같은게 JS의 일부라고 생각한다. 하지만 그렇지 않다. JS는 사실 ECMAScript 서양의 방언이다. DOM은관련된 모든것이 JS에 없다.
DOM이 JS언어의 일부가 아니라면 어떻게 운영되는지 궁금할 것이다. DOM과 DOM 메서드는 사실 Web API의 일부이다.
Web API는 브라우저가 구현하는 라이브러리 같은 것이다. JS 코드로부터 액세스할 수 있다. API는 응용 프로그램 프로그래밍 인터페이스를 뜻한다.
Web API는 기본적으로JS로 작성된 라이브러리이다. 자동적으로 사용 가능한 라이브러리이다. 모든 건 뒤에서 일어난다. 아무것도 불러오거나 할 필요가 없다. 브라우저가 구현하느 공식적인 DOM 사양도 있다. 그래서 DOM 조작이 모든 브라우저에서 동일하게 자동화되는거다.
'🦎 JavaScript' 카테고리의 다른 글
| [JS] 핸들링 클릭 이벤트(handling click events) (0) | 2023.03.23 |
|---|---|
| [JS] DOM 요소 선택 및 DOM조작 (0) | 2023.03.23 |
| 루프의 배열, 지속, 중단 (0) | 2023.03.16 |
| [JS] the for loop (0) | 2023.03.09 |
| [JS] 객체 방식 (0) | 2023.03.09 |