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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
---
title: Node.firstChild
slug: Web/API/Node/firstChild
tags:
- API
- DOM
- Gecko
- Node
- Node.firstChild
- Property
translation_of: Web/API/Node/firstChild
---
<div>{{ ApiRef("DOM") }}</div>
<p><strong>Node.firstChild </strong>只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 <code>null。</code></p>
<h3 id="Syntax" name="Syntax">语法</h3>
<pre class="syntaxbox"><em>var childNode</em> = <em>node</em>.firstChild;
</pre>
<h3 id="描述">描述</h3>
<p>如果有一个子节点, childNode 是节点的第一个子节点的引用，否则为null。</p>
<h3 id="Example" name="Example">例子</h3>
<h4 id="Example" name="Example">Example 1</h4>
<p>这个例子演示了<code>firstChild</code>属性的用法以及空白符节点对该属性的使用可能造成的影响.参见{{ Anch("备注") }}部分了解Gecko DOM中关于处理空白符的更多信息.</p>
<pre><p id="para-01">
<span>First span</span>
</p>
<script type="text/javascript">
var p01 = document.getElementById('para-01');
alert(p01.firstChild.nodeName)
</script>
</pre>
<p>在上面的示例中, 提示框将显示 '#text',因为在<p>标签和<span>标签之前,有一个换行符和多个空格充当了一个文本节点.在Gecko中,任意多个的空白符都将导致文本节点的插入,包括一个到多个空格符,换行符,制表符等等.</p>
<p></span>和</p>标签之间就是另外一个文本节点.</p>
<p>如果从源代码移出对应的空白符,则不会有文本节点被插入,span元素就成为了第一个子节点.下面的代码将弹出 'SPAN'.</p>
<pre><p id="para-01"><span>First span</span></p>
<script type="text/javascript">
var p01 = document.getElementById('para-01');
alert(p01.firstChild.nodeName)
</script>
</pre>
<h4 id="Example" name="Example">Example 2</h4>
<p><span id="result_box" lang="zh-CN"><span>假设我们有</span><span>一个HTML文档,如果该文档有一个DTD(文档类型定义),则下面的语句会弹出</span></span><code>[object DocumentType],如果该文档没有一个DTD,</code><span id="result_box" lang="zh-CN"><span>则下面的语句会弹出</span></span><code>[object HTMLHtmlElement]</code>.</p>
<pre class="eval">alert(document.firstChild);
</pre>
<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">备注</h3>
<p></p><p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如
<a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点,
而不是使用者所预期得到的节点.</p>
<p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a>
和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p><p></p>
<h3 id="Specification" name="Specification">规范</h3>
<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p>
<p>{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "en": "en/DOM/Node.firstChild" } ) }}</p>
|
