Méthodes pour accéder / obtenir des éléments dans le dom | expliqué avec des exemples

JavaScript est le langage de script le plus utilisé pour modifier les éléments d'une page Web, à vrai dire, aucun langage de script ne peut interagir directement avec les éléments HTML. La langue de script interagit avec le Dom (Document Object Model) et le DOM interagit avec les éléments HTML car Dom est une interface d'application neutre de la langue (API).

Dans cet article, nous allons découvrir différentes méthodes que nous pouvons utiliser en JavaScript qui nous aideront à modifier les éléments HTML à l'aide de l'interface DOM.

Access \ Get Méthodes

JavaScript nous fournit 5 méthodes différentes à travers lesquelles nous pouvons interagir avec DOM pour accéder à un élément sur la page Web. Ces méthodes sont à savoir:

• getElementByid (id)
• getElementsByClassName (className)
• GetElementsByTagName (TagName)
• queySelector (CSS_Selector)
• queySelectorall (CSS_Selector)

Utilisation des méthodes d'accès \ GET

Pour démontrer l'utilisation de ces méthodes Get \ Access, nous devons d'abord configurer un fichier HTML et lier un fichier JavaScript en utilisant la ligne suivante:

Maintenant, nous devons configurer des éléments à l'intérieur de notre fichier HTML, nous pouvons le faire en utilisant les lignes suivantes:

J'ai l'identifiant "démoïde"


J'ai le "test" de classe
J'ai aussi le "test" de classe


J'ai le tag "Article"
J'ai aussi le tag "Article"


J'ai la requête comme "QuerySelect"


J'ai la question comme "QuerySelectall"

J'ai aussi la requête comme "QuerySelectall"

Comme vous pouvez le voir, nous en avons avec identifiant, certains avec Des classes Et nous avons utilisé un étiqueter aussi. L'exécution de ce fichier HTML nous donnera la sortie suivante:

Accéder à un élément en utilisant son identifiant

La première méthode que nous allons tester est le getElementByid (), Nous allons accéder à l'élément avec l'ID «Demoïde» Et nous allons modifier son style en utilisant les lignes de code suivantes dans notre fichier JavaScript:

var démoïde = document.getElementById ("Demoid");
démêler.style.BackgroundColor = "Yellow";

Après avoir exécuté le fichier, nous obtenons la sortie suivante sur notre navigateur:

Comme vous pouvez le voir, nous avons pu accéder à l'élément en utilisant son IDENTIFIANT puis modifiez le style de l'élément en utilisant JavaScript.

Accéder aux éléments en utilisant leur nom de classe

La méthode GetElementByClassName () renvoie plusieurs éléments ayant le même nom de classe. Nous pouvons accéder aux éléments en utilisant leur nom de classe avec la ligne de code suivante:

var testclass = document.getElementsByClassName ("test");

Puisque nous avons 2 éléments avec le nom de classe «test» c'est pourquoi notre variable «TestClass» est du tableau de type et si nous voulons modifier les attributs des éléments à l'intérieur du tableau, nous devons nous y référer en utilisant leurs index de tableau comme

TestClass [0].style.Border = "2px Green solide";
TestClass [1].style.Border = "2px Solid Brown";

Lors de l'exécution, nous obtenons la sortie suivante:

Accéder aux éléments en utilisant leur nom de balise

Pour sélectionner des éléments en utilisant leur nom de balise, nous utilisons la méthode getElementByTagName (), Dans notre exemple, pour sélectionner les éléments avec le nom de la balise "article" Nous utilisons la ligne suivante:

var tagselect = document.GetElementsByTagName ("article");

Encore une fois, nous avons deux éléments avec le même nom de balise "article" Par conséquent, nous allons modifier manuellement leurs attributs en utilisant leurs index de tableau:

TagSelect [0].innerhtml = 'J'ai changé mon texte';
TagSelect [1].innerhtml = 'J'ai également changé mon texte';

Si nous exécutons le fichier maintenant, nous obtenons la sortie suivante sur notre navigateur:

Comme vous pouvez le voir, nous avons changé le texte des éléments avec le Nom de la balise «Article».

Accéder à un élément à l'aide du sélecteur de requête

Nous pouvons sélectionner des éléments en utilisant un sélecteur de requête, pour ce faire, nous utilisons la méthode document.QuerySelector (), Et si nous voulons sélectionner un élément avec un spécifique identifiant, nous utilisons le "#" symbole dans le sélecteur de requête comme

var querySelect = document.queySelector ("# queySelect");

Après avoir accédé à l'élément, nous pouvons changer sa frontière avec la ligne suivante:

queryselec.style.Border = "1px Solid Red";

Vous obtiendrez le résultat suivant sur votre navigateur:

Accéder à un élément à l'aide de tous les sélecteurs de requête

Nous pouvons sélectionner tous les éléments avec la même requête en utilisant la méthode QuerySelectorall (). Ajoutez la ligne suivante dans le fichier JavaScript:

const DemoQooryall = document.queySelectorall (".queySelectall ");

Pour modifier les attributs des deux éléments accessibles par ce queySelectorall (), utilisez les lignes de code suivantes:

démocorer.foreach ((query) =>
mettre en doute.style.Border = "1px Green solide";
);

Vous obtiendrez les résultats suivants sur votre navigateur:

C'est-à-dire pour accéder aux éléments en utilisant toutes les méthodes proposées par JavaScript.

Conclusion

Il existe 5 méthodes principales fournies par JavaScript qui nous aident à accéder à \ Obtenir des éléments d'une page Web HTML à l'aide de l'interface DOM. Dans cet article, nous avons appris les 5 méthodes, implémentées toutes ces méthodes en modifiant les attributs des éléments auxquels nous avons accédé. Nous avons besoin de l'interface DOM pour effectuer toutes ces modifications car aucun langage de script ne peut accéder directement aux éléments HTML plutôt que le DOM fonctionne comme une API pour la langue de script.