자바스크립트 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)는 같은 부모를 가진 노드입니다.

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

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

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

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

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

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

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

Example

My First Page

Example

My First Page

Example

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

직접 테스트해 보십시오.

Example

직접 테스트해 보십시오.


nodeName 속성(Property)

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

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

Example

H1


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

가장 중요한 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

댓글 남기기