자바스크립트 HTML DOM Navigation

HTML DOM으로, 노드 관계(node relationships)를 사용하여, 노드 트리(node tree)를 탐색 할 수 있습니다.


DOM 노드(Nodes)

W3C HTML DOM 표준에 따르면, HTML 문서(document)의 모든 것이 노드(node)입니다:

  • 전체 문서(entire document)는 document node입니다.
  • 모든 HTML 요소(element)는 element node입니다.
  • HTML 요소(elements)안의 text는 text nodes입니다.
  • 모든 HTML 속성(attribute)은 attribute node입니다. (사용되지 않음(deprecated))
  • 모든 주석(comments)은 comment nodes입니다.

DOM HTML tree

HTML DOM을 사용하여, JavaScript로 노드 트리에 있는 모든 노드에 액세스 할 수 있습니다.

새 노드를 만들 수 있고, 모든 노드를 수정하거나 삭제할 수 있습니다.


노드 관계(Node Relationships)

노드 트리 안의 노드는 서로 계층 관계를 갖습니다.

부모, 자식 및 형제(parent, child, and sibling)라는 용어는 관계를 설명하기 위해 사용됩니다.

  • 노드 트리에서 최상위 노드는 루트 (또는 root node)라고 합니다.
  • 루트(이것은 부모가 없음)를 제외하고, 모든 노드에는 정확히 하나의 부모가 있습니다.
  • 노드는 많은 수의 자식을 가질 수 있습니다.A node can have a number of children
  • 형제(Siblings)(brothers 또는 sisters)는 같은 부모를 가진 노드입니다.



  
      DOM Tutorial
  

  
      

DOM Lesson one

Hello world!

Node tree

위의 HTML을 보면:

  • <html>은 root 노드입니다.
  • <html>은 부모가 없습니다.
  • <html>은 <head>와 <body>의 부모입니다.
  • <head>은 <html>의 첫 번째 자식입니다.
  • <body>은 <html>의 마지막 자식입니다.

and:

  • <head>은 하나의 자식이 있습니다: <title>
  • <title>은 하나의 자식이 있습니다(a text node).: "DOM Tutorial"
  • <body>은 2개의 자식이 있습니다: <h1>과 <p>
  • <h1>은 하나의 자식이 있습니다: "DOM Lesson one"
  • <p>는 하나의 자식이 있습니다: "Hello world!"
  • <h1>과 <p>는 형제(siblings)입니다.

노드 사이의 탐색 (Navigating Between Nodes)

자바스크립트로, 다음 노드 속성(node properties)을 사용하여, 노드 사이의 탐색을 할 수 있습니다:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Child Nodes와 Node Values

Example


DOM Tutorial

element node <title>(위 예제에서)은 text를 포함하지 않습니다.

이것은 값이 “DOM Tutorial”인 text node를 포함합니다.

text node의 값은 노드의 innerHTML 속성(property)으로 액세스할 수 있습니다:


var myTitle = document.getElementById("demo").innerHTML;

innerHTML 속성에 액세스하는 것은, 첫 번째 자식의 nodeValue에 액세스하는 것과 같습니다


var myTitle = document.getElementById("demo").firstChild.nodeValue;

첫 번째 자식에 대한 액세스는 다음과 같이 수행할 수도 있습니다:


var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

다음 3개의 모든 예제는 <h1> 요소의 텍스트를 가져 와서 <p> 요소에 복사합니다:

Example

My First Page


My First Page

Example

My First Page


My First Page

Example

My First Page


My First Page


InnerHTML

이 튜토리얼에서는 innerHTML 속성(property)을 사용하여 HTML 요소의 내용(content)을 검색합니다(retrieve).

그러나, 위의 다른 방법을 배우면, 트리 구조와 DOM 탐색(navigation)을 이해하는 데 도움이 됩니다.


DOM Root Nodes

2개의 특수 속성(properties)은 전체 문서를 액세스합니다.There are two special properties that allow access to the full document:

  • document.body – The body of the document
  • document.documentElement – The full document

Example

직접 테스트해 보십시오.


Hello World!

The DOM is very useful!

This example demonstrates the document.body property.

Example

직접 테스트해 보십시오.


Hello World!

The DOM is very useful!

This example demonstrates the document.documentElement property.


nodeName 속성(Property)

nodeName 속성 node의 이름을 지정합니다.

  • nodeName은 읽기 전용(read-only)입니다.nodeName is
  • 요소(element) 노드의 nodeName은 태그 이름(tag name)과 같습니다.
  • 속성(attribute) 노드의 nodeName은 속성(attribute) 이름입니다.
  • 텍스트(text) 노드의 nodeName은 항상 #text입니다.
  • 문서(document) 노드의 nodeName은 항상 #document입니다.

Example

H1


My First Page


nodeValue 속성(Property)

nodeValue 속성은 node의 값을 지정합니다.

  • element nodes의 nodeValue는 undefined입니다.
  • text nodes의 nodeValue는 text 자체입니다.
  • attribute nodes의 nodeValue는 attribute 값(value)입니다.

nodeType 속성(Property)

nodeType 속성은 읽기전용(read only)입니다. 이것은 node의 유형(type)을 반환합니다.

Example

1


My First Page

가장 중요한 nodeType 속성(properties)은 다음과 같습니다:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2  class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!– This is a comment –>
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

출처: JavaScript HTML DOM Navigation

Leave a comment