노드

HTML 요소와 노드 객체

HTML 요소는 HTML 문서를 구성하는 개별적인 요소

HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환

<aside> 💡

트리 자료구조

노드들의 계층 구조로 이루어진 자료구조

부모 노드(parent node)와 자식 노드(child node)로 구성되어 노드 간의 계층적 관계(부자, 형제 관계)를 표현하는 비선형 자료구조

<aside> 🌴

비선형 자료구조

선형 자료구조(배열, 스택, 큐, 링크드 리스트, 해시 테이블)와 달리 하나의 자료 뒤에 여러 개의 자료가 존재할 수 있는 자료구조를 의미

트리와 그래프가 대표적인 비선형 자료구조

</aside>

트리의 주요 구성요소

루트 노드 (Root Node)
- 최상위에 있는 노드로 부모 노드가 없음
- 0개 이상의 자식 노드를 가질 수 있음
부모 노드 (Parent Node)
- 하나 이상의 자식 노드를 가진 노드
자식 노드 (Child Node)
- 부모 노드를 가진 노드
형제 노드 (Sibling Node)
- 같은 부모를 공유하는 노드들
리프 노드 (Leaf Node)
- 자식 노드가 없는 노드
간선/링크 (Edge/Link)
- 두 노드 사이의 연결을 의미

</aside>

노드의 객체 타입

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li id="apple">Apple</li>
        <li id="banana">Banana</li>
        <li id="orange">Orange</li>
    </ul>
    <script src="app.js"></script>
</body>
</html>

위 html 문서를 파싱하여 만들어진 DOM의 모습

문서 노드(document node)

DOM 트리의 최상위에 존재하는 루트 노드
브라우저가 렌더링하는 HTML 문서 전체를 가리키는 객체로 전역 객체 window의 document 프로퍼티에 바인딩
window.document 또는 document로 참조 가능
모든 자바스크립트 코드는 script 태그에 의해 분리되어 있어도 하나의 전역 객체 window를 공유하므로 HTML 문서당 document 객체는 유일!
문서 노드, 즉 document 객체는 DOM 트리의 루트 노드이자 DOM 트리의 모든 노드에 접근하기 위한 진입점(entry point) 역할
요소, 어트리뷰트, 텍스트 노드에 접근하려면 반드시 문서 노드를 통해야 함

요소 노드(element node)

HTML 요소를 가리키는 객체