Il metodo Document getElementById() restituisce un oggetto Element che rappresenta l'elemento la cui proprietà 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.
Se hai bisogno di accedere a un elemento che non ha un ID, puoi usare querySelector() per trovare l'elemento usando un qualsiasi selettore.
Sintassi
var element = document.getElementById(id);
Parametri
id- 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.
Valore di ritorno
Un oggetto Element che descrive l'oggetto elemento DOM che corrisponde all'ID specificato o null se nel documento non è stato trovato alcun elemento corrispondente.
Esempio
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>
JavaScript
function changeColor(newColor) {
var elem = document.getElementById('para');
elem.style.color = newColor;
}
Risultato
Note di utilizzo
La maiuscola di "Id" nel nome di questo metodo deve essere corretta affinché il codice funzioni; getElementByID() non è valido e non funzionerà, per quanto naturale possa sembrare.
A differenza di altri metodi di ricerca degli elementi come Document.querySelector() e Document.querySelectorAll(), getElementById() è disponibile solo come metodo per l'oggetto globale document, e non è 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.
Esempio
<!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>
Se non ci sono elementi con l'id fornito, questa funzione restituisce null. Nota che il parametro id è case-sensitive, quindi document.getElementById("Main") restituirà null invece dell'elemento <div id="main"> perché "M" e "m" sono diversi per gli scopi di questo metodo.
Gli elementi non presenti nel documento non vengono cercati da getElementById(). Quando crei un elemento ed assegni un ID ad esso, devi inserire l'elemento nell'albero del documento con Node.insertBefore() o un metodo simile prima di poterlo ottenere con getElementById():
var element = document.createElement('div');
element.id = 'testqq';
var el = document.getElementById('testqq'); // el sarà nullo!
Documenti non HTML. 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 id è definito come di tipo ID nei casi comuni di XHTML, XUL, e altri. Si prevede che le implementazioni che non sanno se gli attributi siano di tipo ID o non restituiscano null.
Specifiche
| Specifica | Stato | Commento |
|---|---|---|
| Document Object Model (DOM) Level 1 Specification The definition of 'getElementById' in that specification. |
Obsolete | Definizione iniziale per l'interfaccia |
| Document Object Model (DOM) Level 2 Core Specification The definition of 'getElementById' in that specification. |
Obsolete | Sostituisce DOM 1 |
| Document Object Model (DOM) Level 3 Core Specification The definition of 'getElementById' in that specification. |
Obsolete | Sostituisce DOM 2 |
| DOM The definition of 'getElementById' in that specification. |
Living Standard | Intende rimpiazzare DOM 3 |
Compatibilità con i browser
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
getElementById | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 5.5 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support Yes | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
Vedi anche
Documentriferimento per altri metodi e proprietà che è possibile utilizzare per ottenere riferimenti a elementi nel documento.Document.querySelector()per i selettori tramite query come'div.myclass'- xml:id - ha un metodo di utilità per consentire a
getElementById()di ottenere 'xml:id' nei documenti XML (come restituito dalle chiamate Ajax)