오늘은 인터랙션 코딩이나 vanila javascript 프로젝트를 할 때 많이 활용하는 Node와 Element에 대해 알아보겠습니다.
Node? Element?
노드와 엘리먼트의 차이점을 알기 위해서는 노드가 무엇인지를 먼저 알아야 합니다.
<html>
<head>
<title>Main</title>
</head>
<body>
<!-- Main page -->
<h2>Main</h2>
<p>Hello World</p>
</body>
</html>
위 코드를 살펴보겠습니다.
일반적으로 봤을 때는 html엘리먼트들과 텍스트, 주석들이 있습니다.
노드 관전에서 보겠습니다.
<html>은 <head>와 <body> 자식 노드들이 있습니다.
<head>는 <title>이라는 노드가 있고,
<body>는 <!-- -->, <h2>, <p> 노드들이 있습니다.
그리고 <p> 안에는 Hello World라는 노드가 있습니다.
html의 모든 태그들을 노드이고, 주석/텍스트들 또한 노드입니다.
노드란 여러 가지 DOM 타입들이 상속하는 인터페이스입니다.
노드 타입들 중 하나가 Element입니다.
노드의 타입들은 아래와 같습니다.
Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
Node.TEXT_NODE
Node.CDATA_SECTION_NODE
Node.PROCESSING_INSTRUCTION_NODE
Node.COMMENT_NODE
Node.DOCUMENT_NODE
Node.DOCUMENT_TYPE_NODE
Node.DOCUMENT_FRAGMENT_NODE저희가 자주 사용하는 것들은 아래 세 가지입니다.
- Node.ELEMENT_NODE -> html에서 사용하는 HTMLElement입니다.
- Node.TEXT_NODE -> 일반 텍스트 요소입니다.
- Node.COMMENT_NODE -> 주석입니다.
예시
childNodes와 children을 콘솔에 찍어보며 더 자세히 알아보겠습니다.
element.childNodes
https://developer.mozilla.org/ko/docs/Web/API/Node/childNodes
element.childNodes - Web API | MDN
childNodes는 주어진 요소의 자식 노드 모음( collection )을 반환합니다.
developer.mozilla.org
주어진 요소의 자식 노드 모음( collection )을 반환합니다.
<div class="test">
<!-- Hello!! -->
<p>Hello World</p> This is text
</div>const test = document.querySelector(".test");
console.log(test.childNodes)childNodes는 아래와 같이 모든 노드를 출력합니다.
- test
- comment
- text
- p
- text
이상한 점을 발견했습니다.
주석과, p태그, 텍스트만 나올 것을 예상했지만 text가 두 개 더 포함되어있습니다.
공백 때문에 생긴 text인데요.
<div class="test"><!-- Hello!! --><p>Hello World</p> This is text</div>위와 같이 공백을 아예 제거해주면 text가 사라집니다.
여기서 알 수 있는 점은 Node는 공백, 주석, 태그, 텍스트 등 모든 속성을 포함하고 있습니다.
만약 childNodes를 사용하게 된다면 이 점을 주의하셔야 합니다.
element.children
https://developer.mozilla.org/en-US/docs/Web/API/Element/children
Element.children - Web APIs | MDN
The read-only children property returns a live HTMLCollection which contains all of the child elements of the element upon which it was called.
developer.mozilla.org
주어진 요소의 자식 html엘리먼트 모음( collection )을 반환합니다.
const test = document.querySelector(".test");
console.log(test); // div.test
console.log(test.children); // HTMLCollection [p]
test와 test.children을 콘솔에 찍어보았습니다.
test는 div태그를 출력합니다.
children은 p태그만 출력합니다.
childNodes와 다르게 엘리먼트만 뽑아내는 것을 볼 수 있습니다.
번외로 HTMLCollection을 모르신다면 콘솔에서 둘 다 html 엘리먼트들만 가져오는 것 같아 보이실 겁니다.
그렇다면 모두 Node.ELEMENT_NODE일까요?
console.log(test.nodeType === Node.ELEMENT_NODE); // true
console.log(test.children.nodeType === Node.ELEMENT_NODE); // falseNode.ELEMENT_NODE와 비교해 보겠습니다.
test는 document 선택자로 직접 접근을 하였기 때문에 true값을 반환합니다.
반면 children은 false를 반환합니다.
children은 HTMLCollection 유사 배열 객체이기 때문입니다.
유사 배열 객체에 대해서는 나중에 한번 정리해서 올리겠습니다.
마무리
지금까지의 내용을 간단하게 정리해 보면 이렇습니다.
1. Element는 Node에 속해있는 타입입니다.
2. Node는 HTML 태그들 외에 주석, 텍스트 등 많은 타입들을 포함하고 있습니다.
Element와 Node를 사용하면 많은 인터랙션을 효과를 낼 수 있습니다.
하지만 사용하는 방식이 다르니 유의하시기 바랍니다.
'Front-end > 깊게 파고들기' 카테고리의 다른 글
| 클린 코드란 무엇일까 (0) | 2022.03.02 |
|---|---|
| React-Reudx 정리 (0) | 2022.01.27 |
| Javascript 얕은복사, 깊은복사 (0) | 2021.12.26 |
| Array.prototype.slice.call() 정리, 분석 (0) | 2021.12.25 |
| CSR vs SSR (with TTI, TTV, SEO) (0) | 2021.12.16 |