Document : méthode getElementById()

Syntaxe

getElementById(id)

Paramètres

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é.

Valeur de retour

Un objet 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.

Exemples

HTML

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

JavaScript

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());
  });
});

Résultat

Notes d'utilisation

Contrairement à d'autres méthodes de recherche d'élément comme Document.querySelector() et 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 « locales » de la fonction.

Exemple

<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 « M » et « m » 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 Node.insertBefore() ou une méthode similaire avant de pouvoir y accéder avec getElementById() :

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 « id » 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 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.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'interface 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 Document.querySelector() pour les sélecteurs via des requêtes comme 'div.myclass'
• La méthode Document.evaluate() — dispose d'une méthode utilitaire pour sélectionner par xml:id dans les documents XML