Javascript getElementByid

Pour accéder à DOM (Document Object Model est une API de programmation), vous pouvez appliquer diverses techniques. L'une des méthodes les plus utiles et les plus populaires est d'utiliser la méthode JavaScript GetElementById (). Tous les navigateurs prennent en charge JavaScript GetElementById (), y compris Firefox, Internet Explorer, Chrome, etc.

Cet article discutera de la méthode GetElementById () en JavaScript.

Qu'est-ce que GetElementById () dans JavaScript?

Pour récupérer un objet d'un élément HTML à l'aide de son «identifiant", Utilisez le "document.getElementByid ()" méthode.C'est la technique la plus rapide et la plus efficace pour accéder à un élément DOM. Il est principalement utilisé pour manipuler ou obtenir des informations à partir d'un élément de votre document.

Note: L'identification d'un élément doit être unique dans un document HTML. S'il y a de nombreux éléments avec le même ID dans le document HTML, la méthode donne le premier élément qu'il détecte. Il sort null s'il ne peut pas localiser un élément dans le DOM avec l'ID spécifié.

Comment utiliser getElementById () dans JavaScript?

Suivez la syntaxe ci-dessous pour l'utilisation de la méthode GetElementById ():

document.getElementById (id);

Il accepte un «identifiant«De l'élément sur lequel vous devez effectuer une opération. Cet identifiant ajouté doit être unique dans un document et sensible à la casse.

Exemple 1: Modifiez la couleur du texte

Dans cet exemple, cliquer sur un bouton fera changer la couleur de l'en-tête. Pour ce faire, nous créerons une rubrique en utilisant

Tag et définir "accueillir«Comme son identifiant qui aidera à obtenir cet élément:

Bienvenue à Linuxhint

Ensuite, créez un bouton où l'événement OnClick () est attaché qui invoquera la fonction définie par l'utilisateur JavaScript appelé «changer de couleur()», Déclencher lorsque le bouton est cliqué:

Cliquez ici

Dans le fichier JavaScript, définissez une fonction nommée «changer de couleur()"Cela obtiendra d'abord le titre supplémentaire en utilisant le"getElementByid ()«Méthode, puis appelez l'attribut de style pour définir la couleur égale à«magenta»:

fonction changEColor ()
document.GetElementByid ("Bienvenue").style.color = "magenta";

Il peut être vu à partir de la sortie lorsque le bouton est cliqué, la couleur de l'en-tête ajouté est modifiée:

Exemple 2: Modifier le texte

Ici, nous modifierons l'ensemble du texte de l'en-tête sur le bouton cliquer. Tout d'abord, nous créerons une tête en utilisant

Tag en définissant l'ID comme "chngtxt»:

Bienvenue dans le Linuxhint

Ensuite, joignez un événement onClick () avec le bouton qui appellera le «ChangeText ()”Fonction pour modifier le texte ajouté:

Cliquez ici

Définir la "ChangeText ()”Fonction de telle manière qu'il va récupérer le cap en tête à l'aide du document.Méthode GetElementById () et modifiez son texte lorsque le bouton est cliqué:

fonction changeText ()
démo var = document.getElementByid ("chngtxt").innerhtml = "Le meilleur site Web pour les compétences d'apprentissage";

Comme vous pouvez le voir dans la sortie, lorsque nous cliquons sur le bouton, le texte est modifié:

Nous avons couvert tous les détails sur la méthode GetElementById () en JavaScript.

Conclusion

Le getElementById () est la méthode JavaScript utilisée pour récupérer l'élément HTML DOM. C'est la technique la plus efficace pour accéder à un élément DOM. Il recherche l'élément à l'aide de l'ID qui lui est attribué. Si l'ID spécifié n'est pas situé dans le DOM, il retournera null. Ce manuel a discuté de la méthode javascript getElementById () avec des exemples détaillés.