Comment utiliser document.getElementById(…) en JavaScript

La méthode document.getElementById(...) est un outil puissant dans le langage de programmation JavaScript qui fournit aux développeurs un moyen efficace d'accéder et de manipuler des éléments spécifiques dans le Document Object Model (DOM).

L'utilisation de document.getElementById(...) est assez simple. Tout ce dont vous avez besoin est l'ID de l'élément DOM que vous voulez manipuler.

var monElement = document.getElementById('monId');

Dans l'exemple ci-dessus, 'monId' est l'identifiant de l'élément DOM que nous voulons obtenir. La méthode getElementById(...) recherche dans le DOM et renvoie l'élément avec l'ID correspondant. Si aucun élément avec cet ID n'est trouvé, la méthode renvoie null.

Une fois que vous avez obtenu l'élément DOM, vous pouvez le manipuler de différentes manières, y compris changer son contenu, son style, ses attributs, et plus encore.

monElement.textContent = 'Nouveau texte';
monElement.style.color = 'blue';

Il est important de noter que l'ID de chaque élément DOM doit être unique. Si plusieurs éléments partagent le même ID, document.getElementById(...) renverra le premier élément rencontré avec cet ID.

Bien que document.getElementById(...) soit une méthode très pratique pour obtenir un accès direct à un élément DOM, il peut être préférable d'utiliser des sélecteurs CSS plus spécifiques dans certains cas, en particulier lorsque vous travaillez avec des éléments DOM qui n'ont pas d'ID ou lorsque vous devez sélectionner plusieurs éléments à la fois.

Par exemple, document.querySelector(...) et document.querySelectorAll(...) peuvent être utilisés pour sélectionner des éléments en fonction de leur classe, de leur attribut ou de leur position relative à d'autres éléments.