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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getElementByIdChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support 7Safari Full support 1WebView Android Full support YesChrome Android Full support 18Firefox Android Full support YesOpera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Vedi anche

  • Document riferimento 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)

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: mdnwebdocs-bot, IsibisiDev, teoli, giuscri, Federico
Ultima modifica di: mdnwebdocs-bot,