blob: 182e6b177bb73a49a878d6a0e28d35101a79c4bd (
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
52
|
---
title: Node.childNodes
slug: Web/API/Node/childNodes
tags:
- Gecko DOM Reference
- Property
translation_of: Web/API/Node/childNodes
---
<p>{{ APIRef() }}</p>
<h2 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81">概述</h2>
<p><strong>Node.childNodes </strong> 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。</p>
<h2 id=".E8.AF.AD.E6.B3.95.E5.92.8C.E5.80.BC" name=".E8.AF.AD.E6.B3.95.E5.92.8C.E5.80.BC">语法</h2>
<pre class="eval">var <var>ndList</var> = elementNodeReference.childNodes;
</pre>
<p>ndList变量为 {{domxref("NodeList")}} 类型，且为只读。</p>
<h2 id=".E8.8C.83.E4.BE.8B" name=".E8.8C.83.E4.BE.8B">例子</h2>
<pre>// parg 是一个到 <p> 元素的引用
if (parg.hasChildNodes())
// 首先我们检查它是否包含子节点
{
var children = parg.childNodes;
for (var i = 0; i < children.length; i++)
{
// children[i]就是遍历到的每个子节点.
// 注意:该NodeList对象为LIVE类型的NodeList, 添加或删除子节点都会实时的改变整个NodeList对象.
};
};
</pre>
<pre>//下面的方法可以删除节点box的所有子节点
while (box.firstChild)
{
//box为LIVE类型的NodeList,所以firstChild属性每次会指向不同的子节点
box.removeChild(box.firstChild);
};
</pre>
<h2 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">备注</h2>
<p>集合的元素是一个节点而不是字符串。要从集合的元素获取数据，你必须使用它们的属性（例如：用 <code>elementNodeReference.childNodes{{ mediawiki.external("1") }}.nodeName</code> 获取它们的名称，等等）。</p>
<p><code>document</code>节点(文档节点)包含两个子节点： Doctype 声明和根节点。根节点通常为 <code>documentElement</code> 引用，且在 (X)HTML 文档中为 HTML 元素。</p>
<h2 id=".E8.A7.84.E8.8C.83" name=".E8.A7.84.E8.8C.83">规范</h2>
<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>
<h2 id="See_also" name="See_also" style="line-height: 30px;">相关链接</h2>
<ul>
<li>{{ domxref("Node.firstChild") }}</li>
<li>{{ domxref("Node.lastChild") }}</li>
<li>{{ domxref("Node.nextSibling") }}</li>
<li>{{ domxref("Node.previousSibling") }}</li>
<li>{{ domxref("ParentNode.children") }}</li>
</ul>
|
