files/pt-br/web/api/document/getelementbyid/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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

---
title: document.getElementById()
slug: Web/API/Document/getElementById
tags:
  - API
  - DOM
  - Document
  - Elements
  - Method
  - Reference
  - Web
  - getElementById
  - id
translation_of: Web/API/Document/getElementById
---
<div>{{ ApiRef("DOM") }}</div>

<h2 id="Summary" name="Summary">Sumário</h2>

<p>Retorna a referência do elemento através do seu ID.</p>

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

<pre class="eval">var elemento = document.getElementById(id);
</pre>

<p>onde</p>

<ul>
 <li><code>elemento</code> é uma referência a um objeto {{domxref("Element")}}, ou null se um elemento com o ID especificado não estiver contido neste documento.</li>
 <li><code>id</code> é uma string que diferência maiúsculas e minúsculas representando o ID único do elemento sendo procurado.</li>
</ul>

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

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Exemplo getElementById&lt;/title&gt;
  &lt;script&gt;
  function mudarCor(novaCor) {
    var elemento = document.getElementById("para1");
    elemento.style.color = novaCor;
  }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p id="para1"&gt;Algum texto de exemplo&lt;/p&gt;
  &lt;button onclick="mudarCor('blue');"&gt;Azul&lt;/button&gt;
  &lt;button onclick="mudarCor('red');"&gt;Vermelho&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

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

<p>Os novatos devem notar que a caixa de 'Id' no nome deste método <em>deve</em> estar correta para o código da função - 'getElementByID <em>não funciona</em>, por mais natural que possa parecer.</p>

<p>Se não existe um elemento com o id fornecido, esta função retorna <code>null</code>. Note que o parâmetro ID diferência maiúsculas e minúsculas. Assim document.getElementById("Main") retornará <code>null</code> ao invés do elemento <code>&lt;div id="<strong>m</strong>ain"&gt;,</code> devido a "M" e "m" serem diferentes para o objetivo deste método.</p>

<p><strong>Elementos que não estão no documento</strong> não são procurados por <code>getElementById</code>. Quando criar um elemento e atribuir um ID ao mesmo, você deve inserir o elemento na árvore do documento com <code><a href="/en-US/docs/DOM/Node.insertBefore" title="en-US/docs/DOM/Node.insertBefore">insertBefore</a></code> ou método similar antes que você possa acessá-lo com <code>getElementById</code>:</p>

<pre class="brush: js">var elemento = document.createElement("div");
elemento.id = 'testqq';
var el = document.getElementById('testqq'); // el será null!
</pre>

<p><strong>Documentos não-HTML.</strong> A implementação do DOM deve ter informações que diz quais atributos são do tipo ID.  Atributos com o nome "id" não são do tipo ID a menos que assim sejam definidos nos documentos DTD. O atributo <code>id</code> é definido para ser um tipo ID em casos comuns de  <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, e outros. Implementações que não reconhecem se os atributos são do tipo ID, ou não são esperados retornam <code>null</code>.</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade do Navegador</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{ CompatGeckoDesktop(1.0) }}</td>
   <td>5.5</td>
   <td>7.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>1.0</td>
   <td>{{ CompatGeckoMobile(1.0) }}</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

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

<p><code>getElementById</code> foi introduzido no DOM Level 1 para documentos HTML e movidos para todos documentos no DOM Level 2</p>

<ul>
 <li>Especificação núcleo DOM Level 2: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId">getElementById</a></li>
</ul>

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

<ul>
 <li>referências de <a href="/en-US/docs/DOM/document" title="en-US/docs/DOM/document">document</a> para outros métodos e propriedades podem ser usados para obter referências para elementos no documento.</li>
 <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> -  tem um método utilitário que permite que obtenha 'xml:id' em documentos XML</li>
</ul>