files/pt-br/web/api/node/firstchild/index.html


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

---
title: Node.firstChild
slug: Web/API/Node/firstChild
tags:
  - API
  - DOM
  - Node
  - Node.firstChild
translation_of: Web/API/Node/firstChild
---
<div>
<div>{{APIRef("DOM")}}</div>
</div>

<p><code><strong>Node.firstChild</strong></code> é uma propriedade do tipo somente leitura que retorna o node (nó) do primeiro elemento filho de uma árvore DOM ou null no caso do elemento não ter filhos (children). </p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox"><em>var childNode</em> = <em>node</em>.firstChild;
</pre>

<p><strong>node:</strong> elemento node (nó pai) de referência para busca do seu primeiro filho (firstChild) considerada a estrutura DOM.</p>

<p><strong>childNode:</strong> elemento node (nó filho) considerado como primeiro filho (firstChild) de node (pai).</p>

<h2 id="Descrição">Descrição</h2>

<p>childNode é uma referência para o primeiro filho (node) de uma estrutura DOM, um node (nó) que não tem filhos retornará null.</p>

<h2 id="Example" name="Example">Exemplo</h2>

<p>Este exemplo demonstra o uso do firstChild e como os espaços em branco "whitespace" de um node (nó) podem interferir. </p>

<pre class="brush:html">&lt;p id="para-01"&gt;
  &lt;span&gt;First span&lt;/span&gt;
&lt;/p&gt;

&lt;script type="text/javascript"&gt;
  var p01 = document.getElementById('para-01');
  console.log(p01.firstChild.nodeName);
&lt;/script&gt;</pre>

<p>No exemplo acima, o console.log() deverá exibir '#text' porque o nó de texto inserido mantém espaços em branco 'whitespace' entre a tag &lt;p id="para-01"&gt; e a tag &lt;span&gt;. Qualquer espaço em branco poderá causar '#text'.</p>

<div class="note">
<p>"Tabs" também podem causar esse comportamento.</p>
</div>

<p>Se os espaços em branco for removidos do código, o '#text' não será mais considerado e a tag &lt;span&gt; se tornará o primeiro filho firstChild do parágrafo, conforme exemplo abaixo.</p>

<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;

&lt;script type="text/javascript"&gt;
  var p01 = document.getElementById('para-01');
  console.log(p01.firstChild.nodeName)
&lt;/script&gt;
</pre>

<p>Agora o console.log() irá exibir 'SPAN'.</p>

<h2 id="Specification" name="Specification">Especificação</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM nível 1 Core: firstChild</a></li>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM nível 2 Core: firstChild</a></li>
</ul>