blob: b57a8eabc3bf763b5668be2bba2837d3e2baf5e1 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
---
title: element.childNodes
slug: Web/API/Node/childNodes
tags:
- DOM
- Gecko
- Gecko DOM Reference
translation_of: Web/API/Node/childNodes
---
<p>{{ ApiRef() }}</p>
<h3 id=".EC.9A.94.EC.95.BD" name=".EC.9A.94.EC.95.BD">요약</h3>
<p><b>childNodes</b>는 주어진 요소의 자식 노드 모음(
<i>
collection</i>
)을 반환합니다.</p>
<h3 id=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92" name=".EA.B5.AC.EB.AC.B8.EA.B3.BC_.EA.B0.92">구문과 값</h3>
<pre class="eval">var <var>ndList</var> = elementNodeReference.childNodes;
</pre>
<p><var>ndList</var>는 현재 요소의 자식인 노드 개체의 순서 있는 모음입니다. 요소가 자식이 없으면, <var>ndList</var>는 아무 노드도 포함하지 않습니다.</p>
<p><var>ndList</var>는 childNodes의 노드 목록을 저장하는 변수입니다. 그 목록은 <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">NodeList</a> 형입니다. childNodes 속성은 읽기 전용입니다.</p>
<h3 id=".EC.98.88" name=".EC.98.88">예</h3>
<pre>// parg는 <p> 요소 개체 참조
if (parg.hasChildNodes())
// 그래서, 먼저 개체가 찼는 지(자식 노드가 있는 지) 검사
{
var children = parg.childNodes;
for (var i = 0; i < children.length; i++)
{
// children[i]로 각 자식에 무언가를 함
// 주의: 목록은 유효해(live), 자식 추가나 제거는 목록을 바꿈
};
};
</pre>
<pre>// This는 노드에서 모든 자식을 제거하는 한 방법
// box는 자식 있는 요소 개체 참조
while (box.firstChild)
{
//목록은 유효해서(LIVE) 호출마다 재배열(re-index)함
box.removeChild(box.firstChild);
};
</pre>
<h3 id=".EC.A3.BC.EC.9D.98" name=".EC.A3.BC.EC.9D.98">주의</h3>
<p>노드 모음의 항목은 문자열이 아니라 개체입니다. 그 노드 개체에서 데이터를 얻으려면, 속성(예컨대 이름을 얻으려면 <code>elementNodeReference.childNodes{{ mediawiki.external(1) }}.nodeName</code> 등)을 써야 합니다.</p>
<p><code>document</code> 개체는 자식이 둘입니다. Doctype 선언과 <code>HTML</code> 요소.</p>
<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
<ul>
<li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li>
<li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li>
<li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li>
</ul>
<p>{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes" } ) }}</p>
|
