files/de/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

---
title: Document.getElementById()
slug: Web/API/Document/getElementById
tags:
  - API
  - DOM
  - Méthode
  - Referenz
translation_of: Web/API/Document/getElementById
---
<div>{{ ApiRef("DOM") }}</div>

<div> </div>

<div>Gibt eine Referenz zu einem Element anhand seiner <a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a> zurück.</div>

<div> </div>

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

<pre class="eval"><em>element</em> = document.getElementById(<em>id</em>);
</pre>

<h3 id="Parameter">Parameter</h3>

<ul>
 <li><code>element </code>ist eine Referenz zu einem <a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">Element</a>-Objekt oder <code>null</code> wenn sich kein Element mit der angegebenen ID im Dokument befindet.</li>
 <li><code>id </code>ist ein String, der auf Groß- und Kleinschreibung achtet und die einmalige ID des gesuchten Elements darstellt.</li>
</ul>

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

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;getElementById Beispiel&lt;/title&gt;
  &lt;script&gt;
  function changeColor(newColor) {
    var elem = document.getElementById("para1");
    elem.style.color = newColor;
  }
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p id="para1"&gt;Irgendein Text&lt;/p&gt;
  &lt;button onclick="changeColor('blue');"&gt;Blau&lt;/button&gt;
  &lt;button onclick="changeColor('red');"&gt;Rot&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

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

<p>Neue Benutzer sollten beachten, dass die Groß- und Kleinschreibung bei "Id" im Namen der Methode korrekt sein <em>muss</em>, damit der Code funktioniert - 'getElementByID' funktioniert <em>nicht</em>, auch wenn es richtig zu sein scheint.</p>

<p>Wenn kein Element mit der angegebenen id existiert, gibt die Funktion <code>null </code>zurück. Beachte, dass der ID-Parameter auf Groß- und Kleinschreibung achtet. Daraus folgt, dass <code>document.getElementById("<strong>M</strong>ain") </code>anstatt des Elements <code>&lt;div id="main"&gt;</code> <code>null</code> zurückgibt, weil "M" und "m" für den Zweck der Methode unterschiedlich sind.</p>

<p><strong>Elemente die sich nicht im Dokument befinden </strong>werden nicht von <code>getElementById </code>gesucht. Wenn man ein Element erstellt und ihm eine ID zuweist, so muss man das Element mit <code><a href="https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore" title="en-US/docs/DOM/Node.insertBefore">insertBefore</a></code> oder einer ähnlichen Methode in den Dokumentenbaum einfügen, bevor man darauf mit <code>getElementById</code> zugreifen kann.</p>

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

<p><strong>Nicht-HTML-Dokumente. </strong>Die DOM-Implementierung muss eine Information enthalten, welche angibt, welches Attribut vom Typ ID ist. Attribute mit dem Namen "id" sind solange nicht vom Typ ID bis sie in der Dokumenttypdefinition als solche definiert werden. Das <code>id</code>-Attribut ist in gebräuchlichen Fällen wie bei <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> und anderen als ID-Typ definiert. Implementierungen, die nicht wissen, ob ein Attribut vom Typ ID ist oder nicht geben erwartungsgemäß <code>null </code>zurück.</p>

<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 1;">Browserkompatibilität</strong></p>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</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>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</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">Spezifikation</h2>

<p><code>getElementById</code> wurde in DOM Level 1 für HTML Dokumente eingeführt und in DOM Level 2 zu allen Dokumenten verschoben. </p>

<ul>
 <li>DOM Level 2 Spezifikation: <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">Siehe auch</h2>

<ul>
 <li><a href="/en-US/docs/DOM/document" title="en-US/docs/DOM/document">document</a> Referenz für andere Methoden und Eigenschaften, die man benutzen kann um Referenzen zu Elementen im Dokument zu bekommen.</li>
 <li><a href="/en-US/docs/Web/API/document.querySelector">document.querySelector()</a> für Selektoren mit Abfragen wie <code>'div.myclass'</code></li>
 <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - hat eine Hilfsmethode, die es <code>getElementById </code>erlaubt, "xml:id" in XML-Dokumenten zu erhalten (wie es z.B. von Ajax-Aufrufen zurückgegeben wird)</li>
</ul>