노드(node)
HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장하고 있다.
HTML DOM은 이러한 노드들을 정의하고,
그들 사이의 관계를 설명해주는 역할을 한다.
이러한 노드 트리는 노드들의 집합이며,
노드 간의 관계를 보여준다.
노트 트리는 최상위 레벨인 루트 노드(root node)부터,
가장 낮은 레벨인 텍스트 노드(text node)까지 뻗어 내려간다.
자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.
노드의 종류
W3C HTML DOM 표준에 따르면,
HTML 문서의 모든 것은 노드이다.
HTML 문서를 구성하는 대표적인 노드의 종류는 다음과 같다.
| 노드 | 설명 |
| document node | HTML 문서 전체를 나타내는 노드 |
| element node | 모든 HTML 요소, attribute node를 가질 수 있는 유일한 노드 |
| attribute node | 모든 HTML 요소의 속성, 요소 노드에 관한 정보를 가지고 있다. 하지만, 해당 요소의 child node에는 포함되지 않는다. |
| text node | HTML 문서의 모든 텍스트 |
| comment node | HTML의 모든 주석 |
노드 간의 관계
노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다.
노드 트리의 가장 상위에는 단 하나의 root node가 존재한다.
루트 노드를 제외한 모든 노드는 단 하나의 parent node만을 가진다.
모든 element node는 child node를 가질 수 있다.
형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 가리킨다.
조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킨다.
자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킨다.
마크업을 하면서 자연스레 노드에 대해 알게 되었지만 명칭을 세세하게 알아본 적은 처음이다.
이 글은 우연히 간단명료하게 잘 정리된 글을 찾아 포스팅을 하게 되었다.
그렇다면 DOM Element란?
DOM Element
Element는 node의 특정 타입인 Node.ELEMENT_NODE를 말한다.
element는 HTML에서 태그로 적은 노드들을 지칭한다.
예를 들어, <html>, <div>, <title>과 같은 태그(Semantic)로 나타낸 것들은 전부 element이다.
주석이나 text node와 같은 것들은 HTML 태그로 표현된 것이 아니므로 element가 아니다.
하지만 paragraph 태그(<p>)는 node이자 동시에 Element이다.
DOM 프로퍼티
node에만 있는 DOM 프로퍼티와 element에만 있는 DOM 프로퍼티를 구분할 줄 알아야 한다.
node.parentNode; // Node or null
node.firstChild; // Node or null
node.lastChild; // Node or null
node.childNodes; // NodeList위 코드의 Node 프로퍼티들은 node나 NodeList이다.
여기서 NodeList는 유사 배열 객체이다.
node.parentElement; // HTMLElement or null
node.children; // HTMLCollection다음 Node 프로퍼티들은 element나 element의 집합이다.
위 두 코드 블럭을 보면,
Node의 children을 가져오는 플퍼티라는 점에서는 같지만,
NodeList 형태로 가져오는 node.childNodes와 HTMLCollection 형태로 가져오는 node.children이 있다는 것이다.
이 두 가지의 차이를 알아보자.
<p>
<b>Thanks</b> for visiting my web page!
</p>위와 같은 p 태그에 childNodes와 children으로 접근하였을 때,
그 결과는 아래와 같다.
const paragraph = document.querySelector('p');
paragraph.childNodes; // NodeList: [HTMLElement, Text]
paragraph.children; // HTMLCollection: [HTMLElement]childNodes로 접근하면 HTMLElement와 Text가 있다.
이는 곧 element node와 text node를 모두 가져왔다는 것을 의미한다.
반면에 children은 element node만 가져오고 있다.
바로 p 태그 안의 HTMLCollection인 element node만 가져오기 때문이다.
출처
http://tcpschool.com/javascript/js_dom_node
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
DOM은 무엇인가? DOM Node와 Element의 차이
여행자보험의 보장명과 보장가격을 가져오기 위해 웹크롤링을 해보았다. 사실 이 과정은 그냥, html parsing해주는 라이브러리를 사용해서 html에서 내가 원하는 정보를 가져오는 것이 전부였다. 원
velog.io
'IT > JS' 카테고리의 다른 글
| 프로토타입(prototype)에 대하여 (0) | 2021.08.20 |
|---|---|
| EventTarget.addEventListner(), event.target, event.currentTarget에 대한 정리 (0) | 2021.08.19 |
| 비동기를 동작시키는 원리 (0) | 2021.08.16 |
| "this" 키워드 개념 및 퀴즈 12개 풀이 by Sagiv ben giat (0) | 2021.08.13 |
| "this" 키워드 퀴즈 4개 풀이 by Annie Liao (0) | 2021.08.13 |