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)