HTML에서 노드란 무엇인가?

16927 단어 Node html Node

🔆 1. 노드란?

HTML문서에 관한 모든 것을 담고 있는, 계층적 정보 단위

HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다.

HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해준다.

아래 사진을 보면 이해가 팍된다.

HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다.

이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다.

노드 트리는 최상위 레벨인 루트 노드(root node, 사진에서 Document)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.

자바스크립트에서는 HTML DOM을 이용해 노드 트리에 포함된 모든 노드에 접근할 수 있다.

🔆 2. 노드의 종류

HTML문서의 모든 것은 노드이며, HTML 문서를 구성하는 대표적인 노드의 종류는 다음과 같다.

노드	설명	nodeName
문서 노드(document node)	HTML 문서 전체를 나타내는 노드	#document
요소 노드(element node)	모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드	태그 이름(대문자)
속성 노드(attribute node)	모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가짐.	속성 이름
텍스트 노드(text node)	HTML 문서의 모든 텍스트는 텍스트 노드	#text
주석 노드(comment node)	HTML 문서의 모든 주석은 주석 노드	#comment

nodeName(Value/Type) : 노드 고유의 이름 (값/타입)

🔆 3. 노드 간의 관계

노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재한다.

루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(paranet node)를 가진다.

모든 요소 노드는 자식 노드(child node)를 가질 수 있다.

++)

형제 노드(sibling node) : 같은 부모 노드를 가지는 모든 노드

조상 노드(ancestor node) : 부모 모드를 '포함'해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드

자손 노드(descendant node) : 자식 노드를 '포함'해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드

🔆 4. 실제 document 를 만들어 노드 이해하기

< base>

<!DOCTYPE html>
  <head>
    <title>JavaScript Node</title>
  </head>

  <body>
    <p id="A"></p>
    <p id="B"></p>
    <script>
//여기에 코드 입력!!!
    </script>
  </body>
</html>

자 이 친구를 베이스로 한다. 아주 베이직한 html 문서이다. 여기서 script 안에 다양한 코드를 넣는다고 생각한다.

근본 중의 근본, document 란 무엇인가.

console.log(document)

자 일단 document 라는 root node 가 무엇인지 살펴보자.

html 과 head, body 등을 포함하고 있는 '객체' 이다.

(1) getElementsByTagName() 메서드를 이용하는 방법

getElementsByTagName() 메소드는 특정 태그 이름을 가지는 모든 요소를 ~~노드 리스트~~의 형태로 반환한다.

(다만 현재 크롬에서는 HTMLCollection 형태로 반환하고 있다..! 버그 요소가 있으니 무조건 노드리스트라고 외움X)

따라서 이 메서드가 반환하는 노드 리스트(혹은 HTMLCollection)를 통해 노드에 접근이 가능하다.

document.getElementsByTagName('img')

getElementById() 도 있는데 TagName()을 하는 이유는, 태그들이 node이기 때문이다!

(2) 노드 간의 관계를 이용하여 접근하는 방법

parentNode / childNodes / firstChild / lastChild / nextSibling / previousSibling

이들을 사용해서 노드에 접근한다.

(3) nodeName로 접근해보기

💥 nodeName 프로퍼티는 노드 고유의 이름을 저장하므로, 수정할 수 없는 읽기 전용 프로퍼티입니다.

<!DOCTYPE html>
<html lang="ko">

  <head>
    <meta charset="UTF-8">
    <title>JavaScript Node Access</title>
  </head>

  <body>

    <h1>nodeName 프로퍼티</h1>
    <p id="document"></p>
    <p id="html"></p>

    <script>
// (1) HTML 문서의 모든 자식 노드 중에서 두 번째 노드의 이름을 선택함.document.getElementById("document").innerHTML = document.childNodes[1].nodeName;// HTML

// (2) html 노드의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택함.document.getElementById("html").innerHTML = document.childNodes[1].childNodes[0].nodeName;// HEAD
    </script>

  </body>

</html>

자자 이제 노드가 코드에서 어떻게 작동하는지 알기 위해서 실제로 활용해본다.

위 코드의 결과와 원리는 다음 사진과 같다.

document 라는 root node가 있으며, 그 밑으로 모두 child node가 된다.

따라서 위 코드에서 (1)(2)와 같은 결과가 나오는 것이다.

실제로 childNodes[index]의 index 값을 바꾸면 그 값이 위 사진과 같이 바뀐다.

그리고 #text는 왜 있는건지 싶을 것이다. 분명히 head 태그와 body 태그 사이에는 아무 것도 없는데!

여기서 #text는 공백을 의미한다. 실제로 </head><body> 이런 식으로 묶어보면, #text 대신에 #comment가 나온다.

innerHTML : Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정

(4) nodeValue로 접근해보기

<!DOCTYPE html>
<html lang="ko">

  <head>
    <meta charset="UTF-8">
    <title>JavaScript Node Access</title>
  </head>

  <body>

    <h1 id="heading">nodeValue 프로퍼티</h1>
    <p id="text1">텍스트</p>
  	<p id="text2">텍스트</p>

    <script>

      var headingText = document.getElementById("heading").firstChild.nodeValue;

      document.getElementById("text1").innerHTML = headingText;
      document.getElementById("text2").firstChild.nodeValue = headingText;

    </script>

  </body>

</html>