DOM
1. DOM의 객체화와 노드
DOM은 문서 내의 모든 요소를 노드라는 객체로 나타냅니다. 이 노드들은 계층 구조로 연결되어 있으며, 각각의 노드는 문서 내의 특정 부분을 나타냅니다. 노드는 HTML의 요소, 속성, 텍스트 등을 추상화하여 프로그래밍적으로 다룰 수 있게 해 줍니다.
이때, "객체"라는 표현은 DOM의 노드들을 프로그래밍 언어에서 다룰 수 있는 객체로 변환해 주는 것을 의미합니다. 각 노드는 특정 유형을 나타내며, 이러한 노드 객체들을 통해 JavaScript 등의 스크립트 언어를 사용하여 웹 페이지를 동적으로 조작할 수 있습니다.
2. 노드 유형과 태그
DOM에서 각 요소들은 노드로 표현됩니다. 노드에는 여러 종류가 있으며, 주요한 노드 유형으로는 다음과 같은 것들이 있습니다:
- 요소 노드(Element Node): HTML 요소 자체를 나타냅니다. 예를 들어, <div>, <p>, <a>와 같은 HTML 태그들이 해당됩니다.
- 텍스트 노드(Text Node): HTML 요소 안의 텍스트를 나타냅니다. 예를 들어, <p> 태그 안의 "안녕하세요!"와 같은 텍스트가 해당됩니다.
- 속성 노드(Attribute Node): HTML 요소의 속성을 나타냅니다. 예를 들어, class, id, src와 같은 속성들이 해당됩니다.
- 주석 노드(Comment Node): HTML 주석을 나타냅니다. <!-- 주석 내용 -->과 같은 주석이 해당됩니다.
- 문서 노드(Document Node): 전체 문서를 나타내며, 루트 노드입니다.
- 문서 타입 노드(Document Type Node): 문서의 형식을 정의합니다. <!DOCTYPE html>과 같은 선언이 해당됩니다.
- 문자 데이터 노드(Character Data Node): 특정 문자 데이터를 나타냅니다. 주로 CDATA 섹션에서 사용됩니다.
- 공백 노드(Whitespace Node): 공백 문자를 나타냅니다.
3. 노드 트리 구조
DOM은 웹 페이지의 요소들을 트리 구조로 표현합니다. 이를 노드 트리 구조라고 합니다. 이 구조는 요소들의 부모-자식 관계를 나타내며, 웹 페이지의 계층 구조를 잘 반영합니다. 그러나 주의할 점은, DOM의 구조가 HTML과 1:1로 일치하지 않는다는 점입니다.
예를 들어, HTML에서 table 태그의 경우. HTML에서는 table 태그 아래에 tbody 태그를 작성하지 않아도 되지만, DOM에서는 이 둘 사이에 tbody 태그가 해당되는 노드가 존재합니다. 이렇게 DOM은 HTML 구조를 기반으로 하지만 조금 더 복잡한 노드 계층 구조를 가지게 됩니다.
노드들은 계층구조 내에서 부모-자식 관계를 가지며 우리는 이 계층적인 구조를 이용하여 웹 페이지의 요소들을 구성하고 접근할 수 있습니다.
4. HTML Element와 Element Node의 차이
DOM에서 Node와 Element는 서로 다른 개념입니다. Node는 문서의 모든 객체를 나타내며, Element는 문서의 HTML 요소를 나타냅니다. 이렇게 둘을 나눈 이유는 문서의 모든 객체를 표현하는 Node에서 HTML 요소에 특화된 기능과 프로퍼티를 제공하기 위함입니다.
예를 들어, <p> 태그는 Element이면서 동시에 Node입니다. 그러나 텍스트 노드나 주석 노드 등도 Node이지만 Element는 아닙니다.
HTML 문서에서 "태그"는 요소를 정의하는 역할을 합니다. 태그는 여는 태그와 닫는 태그로 구성되며, 사이에 콘텐츠를 포함할 수 있습니다. "HTML 요소"는 이러한 태그를 포함한 전체적인 개념을 말하며, 예를 들어 <p> 태그는 단락 요소를 의미합니다. 이러한 HTML 요소는 프로그래밍적으로 다루기 위해 "Element Node"로 나타낼 수 있습니다.
"Element Node"는 DOM 트리에서 HTML 요소를 나타내는 노드를 의미합니다. 각각의 HTML 요소는 하나의 Element Node로 표현됩니다. 이 Element Node는 해당 요소의 모든 정보와 속성을 담고 있습니다. 요소의 이름, 속성, 컨텐츠 등을 포함하여 요소에 대한 모든 조작이 이 노드를 통해 이루어집니다.
"DOM Node"는 DOM 트리의 노드를 의미합니다. 이는 HTML 요소뿐만 아니라 텍스트, 주석, 속성 등 모든 문서 요소를 포함합니다. 다시 말해, 모든 것이 노드입니다. 결과적으로, "DOM Element"는 "DOM Node"의 하위 개념입니다. 모든 요소가 노드이지만, HTML 요소가 Element Node로 특별히 구분됩니다.
5. NodeList와 HTMLCollection의 차이
5.1 NodeList: childNodes와 관련
DOM에서 childNodes는 현재 노드의 모든 자식 노드를 포함하는 프로퍼티입니다. 이는 텍스트 노드, 주석 노드, 요소 노드 등 모든 종류의 노드를 포함합니다. childNodes를 사용하면 모든 자식 노드를 NodeList 형태로 얻을 수 있습니다. childNodes를 사용하는 DOM 메서드는 getElementById, querySelectorAll 등이 있습니다.
5.2 HTMLCollection: children와 관련
반면에 children은 현재 요소의 모든 자식 요소들을 포함하는 프로퍼티입니다. 이는 요소 노드만을 대상으로 하며, 텍스트 노드나 주석 노드는 포함하지 않습니다. children을 사용하면 요소 노드에 집중된 HTMLCollection을 얻을 수 있습니다. children을 사용해서 HTMLCollection을 얻을 수 있는 DOM 메서드는 getElementsByTagName, getElementsByClassName 등이 있습니다.
5.3 두 컬렉션의 차이점
두 프로퍼티 모두 자식 노드를 가져오는 데 사용되지만, 그 반환 형태와 포함하는 노드의 종류에서 차이가 있습니다.
- NodeList: childNodes를 통해 얻어진 결과로, 텍스트 노드, 주석 노드, 요소 노드 등 다양한 노드를 포함합니다.
- HTMLCollection: children을 통해 얻어진 결과로, 요소 노드만을 포함합니다.
참고.
'SeSAC' 카테고리의 다른 글
| [SeSAC] 웹 풀스택 과정_프론트엔드와 백엔드에서의 자바스크립트 역할 / 클라이언트-서버 구조 (0) | 2023.08.12 |
|---|---|
| [SeSAC] 웹 풀스택 과정_뭐든 만들어 보기(미니프로젝트) (0) | 2023.08.07 |
| [SeSAC] 웹 풀스택 과정_JQuery (0) | 2023.08.04 |
| [SeSAC] 웹 풀스택 과정_CSS/Bootstrap (0) | 2023.08.01 |
| [SeSAC] 웹 풀스택 과정_JavaScript DOM(1) (0) | 2023.07.31 |
