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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
---
title: Document.getElementById()
slug: Web/API/Document/getElementById
tags:
- API
- DOM
- Document
- Elementi
- Referenza
- Web
- getElementById
- id
- metodo
translation_of: Web/API/Document/getElementById
---
<div>{{ ApiRef("DOM") }}</div>
<p>Il metodo {{domxref("Document")}} <code><strong>getElementById()</strong></code> restituisce un oggetto {{domxref("Element")}} che rappresenta l'elemento la cui proprietà {{domxref("Element.id", "id")}} corrisponde alla stringa specificata. Poiché gli ID degli elementi devono essere univoci se specificati, sono un modo utile per accedere rapidamente a un elemento specifico.</p>
<p>Se hai bisogno di accedere a un elemento che non ha un ID, puoi usare {{domxref("Document.querySelector", "querySelector()")}} per trovare l'elemento usando un qualsiasi {{Glossary("CSS selector", "selettore")}}.</p>
<h2 id="Sintassi">Sintassi</h2>
<pre class="eval">var <em>element</em> = <em>document</em>.getElementById(<em>id</em>);
</pre>
<h3 id="Parametri">Parametri</h3>
<dl>
<dt><strong><code>id</code></strong></dt>
<dd>L'ID dell'elemento da localizzare. L'ID è una stringa sensibile al maiuscolo/minuscolo, che è univoca all'interno del documento; solo un elemento può avere un dato ID.</dd>
</dl>
<h3 id="Valore_di_ritorno">Valore di ritorno</h3>
<p>Un oggetto {{domxref("Element")}} che descrive l'oggetto elemento DOM che corrisponde all'ID specificato o <code>null</code> se nel documento non è stato trovato alcun elemento corrispondente.</p>
<h2 id="Esempio">Esempio</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><html>
<head>
<title>getElementById example</title>
</head>
<body>
<p id="para">text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html></pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">function changeColor(newColor) {
var elem = document.getElementById('para');
elem.style.color = newColor;
}</pre>
<h3 id="Risultato">Risultato</h3>
<p>{{ EmbedLiveSample('Esempio', 250, 100) }}</p>
<h2 id="Note_di_utilizzo">Note di utilizzo</h2>
<p>La maiuscola di <code>"Id"</code> nel nome di questo metodo deve essere corretta affinché il codice funzioni; <code>getElementByID()</code> <em>non è</em> valido e non funzionerà, per quanto naturale possa sembrare.</p>
<p>A differenza di altri metodi di ricerca degli elementi come {{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}, <code>getElementById()</code> è disponibile solo come metodo per l'oggetto globale <code>document</code>, e <em>non</em> è disponibile come metodo su tutti gli oggetti elemento nel DOM. Poiché gli ID devono essere univoci nell'intero documento, non sono necessarie versioni "locali" della funzione.</p>
<h2 id="Esempio_2">Esempio</h2>
<pre><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="parent-id">
<p>hello word1</p>
<p id="test1">hello word2</p>
<p>hello word3</p>
<p>hello word4</p>
</div>
<script>
var parentDOM = document.getElementById('parent-id');
var test1 = parentDOM.getElementById('test1');
// throw error
// Uncaught TypeError: parentDOM.getElementById is not a function
</script>
</body>
</html></pre>
<p>Se non ci sono elementi con l'<code>id</code> fornito, questa funzione restituisce <code>null</code>. Nota che il parametro <code>id</code> è case-sensitive, quindi <code>document.getElementById("<strong>M</strong>ain")</code> restituirà <code>null</code> invece dell'elemento <code><div id="<strong>m</strong>ain"></code> perché "M" e "m" sono diversi per gli scopi di questo metodo.</p>
<p><strong>Gli elementi non presenti nel documento </strong>non vengono cercati da <code>getElementById()</code>. Quando crei un elemento ed assegni un ID ad esso, devi inserire l'elemento nell'albero del documento con {{domxref("Node.insertBefore()")}} o un metodo simile prima di poterlo ottenere con <code>getElementById()</code>:</p>
<pre class="brush: js">var element = document.createElement('div');
element.id = 'testqq';
var el = document.getElementById('testqq'); // el sarà nullo!
</pre>
<p><strong>Documenti non HTML.</strong> L'implementazione del DOM deve avere informazioni che indicano quali attributi sono di tipo ID. Gli attributi con il nome "id" non sono di tipo ID a meno che non siano definiti nella DTD del documento. L'attributo <code>id</code> è definito come di tipo ID nei casi comuni di <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 altri. Si prevede che le implementazioni che non sanno se gli attributi siano di tipo ID o non restituiscano <code>null</code>.</p>
<h2 id="Specifiche">Specifiche</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specifica</th>
<th scope="col">Stato</th>
<th scope="col">Commento</th>
</tr>
<tr>
<td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
<td>{{Spec2('DOM1')}}</td>
<td>Definizione iniziale per l'interfaccia</td>
</tr>
<tr>
<td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
<td>{{Spec2('DOM2 Core')}}</td>
<td>Sostituisce DOM 1</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
<td>{{Spec2('DOM3 Core')}}</td>
<td>Sostituisce DOM 2</td>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>Intende rimpiazzare DOM 3</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>
<p>{{Compat("api.Document.getElementById")}}</p>
<h2 id="Vedi_anche">Vedi anche</h2>
<ul>
<li>{{domxref("Document")}} riferimento per altri metodi e proprietà che è possibile utilizzare per ottenere riferimenti a elementi nel documento.</li>
<li>{{domxref("Document.querySelector()")}} per i selettori tramite query come <code>'div.myclass'</code></li>
<li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - ha un metodo di utilità per consentire a <code>getElementById()</code> di ottenere 'xml:id' nei documenti XML (come restituito dalle chiamate Ajax)</li>
</ul>
|
