files/pt-br/web/api/node/parentnode/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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

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

<p><code><strong>Node.parentNode</strong></code> é uma propriedade DOM somente leitura que retorna o nó (node) parente de um Node referenciado na árvore DOM. É extremamente aconselhável que você conheça a estrutura DOM para um melhor estudo e aprendizado.</p>

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

<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode
</pre>

<p><code>parentNode</code> é o node parente do node referenciado. O parente de um elemento é um Element node, um Document node, ou um DocumentFragment node. Será muito complicado entender tudo isso sem conhecer a estrutura DOM e seus Elements.</p>

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

<pre class="brush:js">// Exemplo de como obter um elemento pai
parente = node.parentNode; // Retorna o elemento pai

// Obtém o primeiro &lt;li&gt; de uma lista
var li = document.getElementsById('li-first');
// A partir do &lt;li&gt; obtido, obtém o element &lt;ul&gt;
var ul = li.parentNode;

// Estrutura com parágrafos dentro de uma div
var p = document.getElementsByTagName('p');
var div = p[0].parentNode;

if (node.parentNode) {
  // remove um node da árvore (estrutura) DOM, a menos que
  // ele já não exista não estrutura
  node.parentNode.removeChild(node);
}</pre>

<h2 id="Notes" name="Notes">Notas</h2>

<p><code>Document</code> e<code> DocumentFragment</code> <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">nodes</a> nunca podem ter um node parent, sendo assim <code>parentNode</code> sempre retornará <code>null</code>. Também retornará null se o node já tiver sido criado e não ainda não estiver anexado à estrutura DOM.</p>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>0.2</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<h2 id="Specification" name="Specification">Specificações</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM nível 2 Core: Node.parentNode</a></li>
 <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM nível 3 Core: Node.parentNode</a></li>
</ul>

<h2 id="See_also" name="See_also">Veja também</h2>

<ul>
 <li>{{Domxref("Node.firstChild")}}</li>
 <li>{{Domxref("Node.lastChild")}}</li>
 <li>{{Domxref("Node.childNodes")}}</li>
 <li>{{Domxref("Node.nextSibling")}}</li>
 <li>{{Domxref("Node.previousSibling")}}</li>
 <li>{{Domxref("Node.removeChild")}}</li>
</ul>