--- title: Document.getElementById() slug: Web/API/Document/getElementById tags: - API - DOM - Document - Elementi - Referenza - Web - getElementById - id - metodo translation_of: Web/API/Document/getElementById ---
{{ ApiRef("DOM") }}

Il metodo {{domxref("Document")}} getElementById() 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.

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")}}.

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 {{domxref("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

{{ EmbedLiveSample('Esempio', 250, 100) }}

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 {{domxref("Document.querySelector()")}} e {{domxref("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 {{domxref("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
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}} {{Spec2('DOM1')}} Definizione iniziale per l'interfaccia
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}} {{Spec2('DOM2 Core')}} Sostituisce DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}} {{Spec2('DOM3 Core')}} Sostituisce DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}} {{Spec2('DOM WHATWG')}} Intende rimpiazzare DOM 3

Compatibilità con i browser

{{Compat("api.Document.getElementById")}}

Vedi anche