Document.getElementById()

Il metodo Document getElementById() restituisce un oggetto Element che rappresenta l'elemento la cui proprietà id (en-US) 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() (en-US) 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

BCD tables only load in the browser

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)