English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML DOM은 JavaScript가 노드 관계를 통해 노드 트리를 탐색할 수 있도록 허용합니다
W3C HTML DOM 표준에 따르면, HTML 문서의 모든 내용은 노드입니다：
전체 문서는 문서 노드입니다
각 HTML 요소는 요소 노드입니다
HTML 요소 내의 텍스트는 텍스트 노드입니다
각 HTML 속성은 속성 노드입니다(사용을 권장하지 않습니다)
모든 주석은 주석 노드입니다
HTML DOM을 사용하면 JavaScript가 노드 트리의 모든 노드에 접근할 수 있습니다
새 노드를 생성하고 모든 노드를 수정하거나 제거할 수 있습니다
노드 트리의 노드는 계층 관계를 가집니다
용어 '부모', '자식', '형제자매'는 관계를 설명하는 데 사용됩니다
노드 트리에서 최상위 노드는 뿌리(또는 뿌리 노드)라고 합니다
각 노드는 하나의 부모 노드를 가집니다. 뿌리 노드(뿌리 노드는 부모 노드가 없습니다)를 제외하고
한 노드는 여러 자식 노드를 가질 수 있습니다
형제자매(형제자매)는 같은 부모 노드를 가진 노드입니다
<html> <head> <title>DOM Tutorial</title> </head> <h1>DOM Nodes</h1> <p>Hello, World</p> </html>
위의 HTML에서 읽을 수 있습니다：
<html>是根节点，并且没有父节点
<html>是<head>和<body>的父级
<head>是<html>的第一个孩子
<body>是<html>的最后一个孩子
和：
<head>有一个孩子：<title>
<title>有一个孩子（一个文本节点）：“ DOM Tutorial”
<body>有两个孩子：<h1>和<p>
<h1>有一个孩子（一个文本节点）：“ DOM Nodes”
<p>有一个孩子（一个文本节点）：“ Hello，world”
<h1>和<p>是同级
您可以使用以下节点属性在具有JavaScript的节点之间导航：
형제 노드에 접근하려면firstChild使用DOM节点的属性来访问节点的第一个直接子节点。
<p id="para"> <span>First span</span> <b>First Bold</b> </p> <script> <p>This is third P inside DIV< alert(para.firstElementChild.nodeName); // returns SPAN </script>测试看看 «/›
注意：在上面的示例中，输出将是#text，因为插入了文本节点以维护标记之间的空白。任何空格都会创建一个#text节点，从单个空格到多个空格，返回，制表符等。
但是，如果删除空格，则不会插入#text节点，并且span元素将成为段落的第一个子元素：
<p id="para"><span>First span</span> <b>First Bold</b></p> <script> <p>This is third P inside DIV< alert(para.firstChild.nodeName); // returns SPAN </script>테스트를 보세요‹/›
访问第一个孩子也可以这样进行：
para.childNodes[0].nodeName; // returns SPAN테스트를 보세요‹/›
형제 노드에 접근하려면lastChild使用DOM节点的属性来访问节点的最后一个直接子节点。
para.lastChild.nodeName; // returns B테스트를 보세요‹/›
为避免出现#text或#comment노드firstChild并lastChild返回该问题，您可以选择使用：
firstElementChild属性返回指定父元素的第一个子元素。
<p id="para"> <span>First span</span> <b>First Bold</b> </p> <script> <p>This is third P inside DIV< alert(para.firstElementChild.nodeName); // returns SPAN </script>테스트를 보세요‹/›
lastElementChild属性返回指定父元素的最后一个子元素。
<p id="para"> <span>First span</span> <b>First Bold</b> </p> <script> <p>This is third P inside DIV< alert(para.lastElementChild.nodeName); // returns B </script>테스트를 보세요‹/›
注：주의:본nodeName
형제 노드에 접근하려면부모 노드에 접근parentNode
<div>
속성을 사용하여 DOM 트리에서 지정된 노드의 부모 단계에 접근할 수 있습니다./p>
<p>This is first P inside DIV</p>
<p id="para">This is second P inside DIV</p>
</div>
<script>
<p>This is third P inside DIV<
var para = document.getElementById("para"); // alert(para.parentNode.nodeName);
</script>테스트를 보세요‹/›returns DIV속성은 지정된 요소의 부모 요소를 반환합니다.parentElement
형제 노드에 접근하려면previousSibling및nextSibling속성을 사용하여 DOM 트리에서 상위와 하위 노드에 접근할 수 있습니다.
<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>테스트를 보세요‹/›또는, 다음을 사용하여previousElementSibling및nextElementSibling백스페이스 텍스트 노드를 건너뜀으로써 상위와 하위 동급 요소를 가져올 수 있습니다.
<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<div id="div-3">Here is div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>테스트를 보세요‹/›textContent속성은 노드의 텍스트 내용을 나타냅니다.
다음 두 속성은 전체 문서에 접근할 수 있습니다：
document.body속성은 문서의 요소를 설정하거나 반환합니다.
<!DOCTYPE html> <html> <p>Hello, World!</p> <div> <p>DOM 루트 노드</p> <p>document.body 속성은 문서의 body 요소를 설정하거나 반환합니다.</p> </div> <script> alert(document.body.innerHTML); </script> </html>테스트를 보세요‹/›
document.documentElement속성은 문서의<html>요소.
<!DOCTYPE html> <html> <p>Hello, World!</p> <div> <p>DOM 루트 노드</p> <p>document.documentElement 속성은 문서의 루트 요소를 반환합니다.</p> </div> <script> alert(document.documentElement.innerHTML); </script> </html>테스트를 보세요‹/›
nodeType속성은 지정된 노드의 노드 형식을 숫자로 반환합니다.
var x = document.getElementById("myPara").nodeType;테스트를 보세요‹/›DOM 트리는 다양한 형식의 노드로 구성되어 있습니다. 예를 들어, 요소, 텍스트, 주석 등입니다.
각 노드는 하나의nodeType속성은 처리할 노드 형식을 찾기 위해 사용할 수 있습니다。
아래 표는 가장 중요한 노드 형식을 나열합니다：
| 노드 | 형식 | 예 |
|---|---|---|
| ELEMENT_NODE | 1개 | <p class="heading">Hello, World</p> |
| ATTRIBUTE_NODE | 2 | class =“heading”（권장하지 않음） |
| TEXT_NODE | 3 | Hello, World |
| COMMENT_NODE | 8 | <！--이는 주석입니다--> |
| DOCUMENT_NODE | 9 | HTML 문서 자체（<html>의 부모） |
| DOCUMENT_TYPE_NODE | 10 | <！doctype html> |