제이브루스크립트 HTML DOM 탐색

HTML DOM을 통해 노드 관계를 사용하여 노드 트리를 탐색할 수 있습니다.

DOM 노드

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

  • 전체 문서는 문서 노드입니다.
  • 모든 HTML 요소는 요소 노드입니다.
  • HTML 요소 내의 텍스트는 텍스트 노드입니다.
  • 모든 HTML 속성은 속성 노드입니다.
  • 모든 주석은 주석 노드입니다.
DOM HTML 트리

HTML DOM을 통해 노드 트리의 모든 노드를 JavaScript로 접근할 수 있습니다.

새 노드를 생성할 수 있으며, 모든 노드를 수정하고 제거할 수 있습니다.

노드 관계

노드 트리의 노드는 서로 간에 일정한 등급 관계가 있습니다.

  • 용어(부모, 자식, 동생, parent, child 및 sibling)는 이러한 관계를 설명하는 데 사용됩니다.
  • 노드 트리에서 최상단 노드는 루트(루트 노드)라고 합니다.
  • 모든 노드는 부모 노드를 가지지만, 루트(루트 노드는 부모 노드가 없습니다).
  • 노드는 일정한 수의 자식을 가질 수 있습니다.
  • 동생(형제나 여동생)은 같은 부모를 가진 노드를 의미합니다.
<html>
   <head>
       <title>DOM 강의</title>
   </head>
  <body>
       <h1>DOM 첫 번째 강의</h1>
       <p>Hello world!</p>
   </body>
</html>
DOM HTML 트리

위의 HTML에서 다음 정보를 읽을 수 있습니다:

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

또한:

  • <head>는 자식으로 <title>를 가지고 있습니다
  • <title>는 자식을 하나 가지고 있습니다（텍스트 노드）: "DOM 교본"
  • <body>는 두 자식을 가지고 있습니다：<h1>와 <p>
  • <h1>은 자식으로 "DOM 첫 번째 강의"를 가지고 있습니다
  • <p>은 자식으로 "Hello world!"을 가지고 있습니다
  • <h1>와 <p>는 형제 노드입니다

노드 간 탐색

JavaScript를 통해 노드 간을 탐색할 수 있는 다음 노드 속성을 사용할 수 있습니다:

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

자식 노드와 노드 값

DOM 처리 중에 일반적인 오류는 요소 노드에 텍스트가 포함되어 있다고 생각하는 것입니다.

예제:

<title id="demo">DOM 교본</title>

（위 예제에서의）요소 노드 <title> 포함하지 않습니다텍스트입니다.

이는 "DOM 교본" 값을 포함하고 있습니다.텍스트 노드을 통해 가져올 수 있습니다.

텍스트 노드의 값은 노드의 innerHTML 속성을 통해 접근할 수 있습니다:

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

innerHTML 속성에 접근하는 것은 첫 번째 자식 노드에 접근하는 것과 동일합니다: nodeValue：

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

처음 자식 노드에 접근하는 방법은 다음과 같습니다:

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

다음 세 가지 예제에서 가져오기: <h1> 요소의 텍스트를 복사하여 <p> 요소 내에서:

예제 1

<html>
<body>
<h1 id="id01">제한적인 첫 페이지</h1>
<p id="id02">안녕하세요!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

직접 시험해 보세요

예제 2

<html>
<body>
<h1 id="id01">제한적인 첫 페이지</h1>
<p id="id02">안녕하세요!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

직접 시험해 보세요

예제 3

<html>
<body>
<h1 id="id01">제한적인 첫 페이지</h1>
<p id="id02">안녕하세요!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

직접 시험해 보세요

InnerHTML

이 튜토리얼에서는 innerHTML HTML 요소의 내용을 가져옵니다.

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

DOM 루트 노드

전체 문서에 접근할 수 있는 두 가지 특수 속성이 있습니다:

  • document.body - 문서의 body
  • document.documentElement - 전체 문서

예제

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM은 매우 유용합니다!</p>
<p><b>document.body</b> 속성을 보여줍니다.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

직접 시험해 보세요

예제

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM은 매우 유용합니다!</p>
<p><b>document.documentElement</b> 속성을 보여줍니다.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

직접 시험해 보세요

nodeName 속성

nodeName 속성은 노드의 이름을 정의합니다.

  • nodeName은 읽기 전용입니다
  • 요소 노드의 nodeName은 태그 이름과 동일합니다
  • 속성 노드의 nodeName은 속성 이름입니다
  • 텍스트 노드의 nodeName은 항상 #text입니다
  • 문서 노드의 nodeName은 항상 #document입니다

예제

<h1 id="id01">내 첫 번째 웹 페이지</h1>
<p id="id02">안녕하세요!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

직접 시험해 보세요

주의:nodeName은 항상 대문자 태그 이름을 포함합니다.

nodeValue 속성

nodeValue 속성은 노드의 값을 정의합니다.

  • 요소 노드의 nodeValue는 undefined입니다
  • 텍스트 노드의 nodeValue는 텍스트 텍스트입니다
  • 속성 노드의 nodeValue는 속성 값입니다

nodeType 속성

nodeType 속성은 노드의 유형을 반환합니다.nodeType 읽기 전용입니다.

예제

<h1 id="id01">내 첫 번째 웹 페이지</h1>
<p id="id02">안녕하세요!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

직접 시험해 보세요

가장 중요한 nodeType 속성은:

노드 타입 예제
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (폐지)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- 이는 주석입니다 -->
DOCUMENT_NODE 9 HTML 문서 자체 (<html>의 부모)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

Type 2은 HTML DOM에서 폐지되었습니다. XML DOM에서는 폐지되지 않았습니다.