- `id`

- : L'identifiant (_ID_) de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.

Un objet {{DOMxRef("Element")}} décrivant l'objet élément du DOM correspondant à l'identifiant (_ID_) défini ou `null` si aucun n'a été trouvé dans le document.

<p id="para">Du texte par ici</p>

<button>blue</button>

<button>red</button>

function changerCouleur(nouvelleCouleur) {

const elem = document.getElementById("para");

elem.style.color = nouvelleCouleur;

}

document.querySelectorAll("button").forEach((bouton) => {

bouton.addEventListener("click", (event) => {

changerCouleur(event.target.textContent.toLowerCase());

});

});

{{EmbedLiveSample("Exemples", 250, 120)}}

Contrairement à d'autres méthodes de recherche d'élément comme {{DOMxRef("Document.querySelector()")}} et {{DOMxRef("Document.querySelectorAll()")}}, `getElementById()` n'est disponible qu'en tant que méthode de l'objet global `document`, et n'est _pas_ disponible en tant que méthode sur tous les objets élément du DOM. Comme les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'est pas nécessaire d'avoir des versions «&nbsp;locales&nbsp;» de la fonction.

<div id="parent-id">

<p>bonjour tout le monde1</p>

<p id="test1">bonjour tout le monde2</p>

<p>bonjour tout le monde3</p>

<p>bonjour tout le monde4</p>

</div>

const parentDOM = document.getElementById("parent-id");

const test1 = parentDOM.getElementById("test1");

S'il n'y a pas d'élément avec l'identifiant (`id`) fourni, cette fonction retourne `null`. À noter que le paramètre `id` est sensible à la casse, ainsi `document.getElementById("Main")` retournera `null` au lieu de l'élément `<div id="main">` étant donné que «&nbsp;M&nbsp;» et «&nbsp;m&nbsp;» sont différents pour cette méthode.

Les éléments absents du document ne sont pas cherchés par `getElementById()`. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{DOMxRef("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec `getElementById()`&nbsp;:

const element = document.createElement("div");

element.id = "test";

const el = document.getElementById("test"); // el vaudra null !

Dans des documents non-HTML, les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom «&nbsp;id&nbsp;» n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi dans la DTD du document. L'attribut `id` est défini comme étant de type ID dans les langages courants comme {{Glossary("XHTML")}}, XUL, et d'autres. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées retourner `null`.

{{Specifications}}

{{Compat}}

- L'interface {{DOMxRef("Document")}} référençant d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir des références vers des éléments dans le document.

- La méthode {{DOMxRef("Document.querySelector()")}} pour les sélecteurs via des requêtes comme `'div.myclass'`

- La méthode {{DOMxRef("Document.evaluate()")}} — dispose d'une méthode utilitaire pour sélectionner par `xml:id` dans les documents {{Glossary("XML")}}