JavaScript est utilisé pour ajouter de l'interactivité à une page HTML statique; Mais pour ajouter l'interactivité, il doit accéder aux éléments HTML présents dans le DOM. JavaScript propose un certain nombre de méthodes pour accéder aux éléments HTML présents dans DOM. Ici, nous en discuterons de la plupart d'entre eux en détail:

Comment accéder à un élément DOM par son identifiant en utilisant JavaScript

L'une des méthodes les plus courantes pour accéder à un élément dans HTML DOM est getElementByid () qui accède à un élément basé sur la valeur de son attribut ID. La valeur des attributs d'ID est censée être unique et aucun éléments sur une seule page HTML ne devrait avoir des ID similaires. Même s'il y a plusieurs éléments qui ont le même ID, le getElementByid () La méthode renvoie un seul élément (le premier élément avec cet ID dans le fichier HTML).

Maintenant, nous allons jeter un œil à un exemple pour mieux comprendre comment le getElementByid () Méthode fonctionne.

Note: La console du navigateur est utilisée pour la démonstration d'exemples dans cet article.

Le fichier HTML suivant sera utilisé pour cet exemple; Le javascript sera ajouté dans le des balises spécifiquement utilisées pour intégrer le code JavaScript directement dans un fichier html.

Comment obtenir des éléments en javascript du dom?

Comment accéder à un élément DOM par son identifiant?

getElementByid ()

Dans le fichier html ci-dessus, nous avons un paragraphe avec un ID unique I.e. exemple-id. Si nous voulons accéder à cet élément de paragraphe, nous pouvons utiliser le getElementByid () méthode:

Nous pouvons maintenant utiliser la variable de paragraphe nouvellement créée pour manipuler le exemple-id élément directement à partir de javascript e.G Si nous voulons modifier l'arrière-plan et la couleur texte du paragraphe, alors:

Comment accéder aux éléments DOM par leur classe

Le getElementsByClassName () La méthode peut être utilisée pour obtenir plusieurs éléments qui ont la même valeur d'attribut de classe. Pour montrer comment le getElementsByClassName () Méthode fonctionne, nous modifierons notre fichier html de la manière suivante:

Comment obtenir des éléments en javascript du dom?

Comment accéder aux éléments DOM par leur classe?

getElementsByClassName ()

Le getElementsByClassName () La méthode renvoie tous les éléments qui ont une classe spécifique sous la forme d'un tableau. Donc, si nous voulons modifier un seul des éléments présents à l'intérieur du tableau retourné, nous devrons y accéder avec son numéro d'index:

Nous pouvons utiliser une boucle pour une boucle si nous voulons appliquer les mêmes modifications à tous les éléments du tableau:

Comment accéder aux éléments DOM par leur balise

JavaScript fournit également le getElementsByTagName () Méthode qui peut être utilisée pour accéder à tous les éléments qui ont la même balise HTML:

Comment obtenir des éléments en javascript du dom?

• Méthode GetElementById ()


• Méthode GetElementsByClassName ()


• Méthode GetElementsByName ()


• Méthode GetElementsByTagName ()


• Méthode QueySelector ()


• Méthode QueySelectorall ()

Nous pouvons à nouveau utiliser une boucle pour appliquer les mêmes modifications à tous les éléments présents dans le nouveau tableau:

Comment accéder aux éléments DOM en utilisant les méthodes de sélecteurs de requête

JavaScript a également le QuerySelector () et le queySelectorall () Méthodes qui peuvent être utilisées pour accéder aux éléments HTML DOM. Pour accéder à un seul élément, nous pouvons utiliser le QuerySelector () méthode; S'il y a plusieurs éléments avec le même ID ou la même classe, le même QuerySelector () La méthode renvoie le premier élément:

Comment obtenir des éléments en javascript du dom?

Méthode GetElementById ()

Méthode GetElementsByClassName ()

Méthode GetElementsByName ()

Méthode GetElementsByTagName ()

Méthode QueySelector ()

Méthode QueySelectorall ()

Le # Le signe est le sélecteur de l'attribut ID tandis que le . Le signe est le sélecteur de l'attribut de classe.

Le queySelectorall () La méthode renvoie un tableau contenant tous les éléments DOM avec un nom de classe spécifique ou un ID:

Comment obtenir des éléments en javascript du dom?

Méthode GetElementById ()

Méthode GetElementsByClassName ()

Méthode GetElementsByName ()

Méthode GetElementsByTagName ()

Méthode QueySelector ()

Méthode QueySelectorall ()

Nous pouvons effectuer différentes méthodes telles que .pour chaque() Méthode sur les tableaux renvoyés par le queySelectorall (). Ces méthodes ne fonctionnent pas avec les tableaux renvoyés par aisance méthodes.

Conclusion

Accéder aux éléments HTML DOM et les rendre interactifs via JavaScript est le partie la plus fondamentale mais essentielle de tout travail frontal develoepr. Ici, nous avons répertorié les cinq méthodes les plus courantes utilisées dans JavaScript pour accéder aux éléments DOM.