Les éléments HTML sont accessibles à l'aide des méthodes JavaScript. Les méthodes JavaScript accèdent aux éléments HTML de DOM (structure logique en forme d'arbre des documents Web). JavaScript prend en charge cinq méthodes qui utilisent le nom, l'id, le nom de classe, le nom de tagNon ou le sélecteur CSS pour accéder aux objets. En accédant aux éléments HTML à l'aide de JavaScript, vous pouvez manipuler des éléments HTML. Cet article fournit une démonstration de façons possibles d'accéder aux éléments HTML à l'aide de méthodes JavaScript.

Comment accéder aux éléments HTML à l'aide de méthodes JavaScript

Les cinq méthodes JavaScript aident à accéder aux éléments HTML et ces méthodes sont décrites ci-dessous.

Comment accéder aux éléments HTML par ID

L'attribut ID identifie de manière unique l'élément HTML, et la méthode JavaScript suivante aiderait à obtenir les éléments HTML par ID.

L'ID fait référence à l'élément HTML et est utilisé par JavaScript pour accéder à cet élément HTML. L'objet (dans DOM) qui correspond à l'ID serait retourné.

Exemple:

Le code fourni ci-dessous exerce le getElementByid () Méthode de JavaScript.

Le code ci-dessus accède à l'élément qui a id = un1 puis la valeur de cet élément est manipulée à «Hello World!".

Sortir

À partir de la sortie, il est observé que le contenu original de

a été changé en «Hello World!".

Comment accéder aux éléments HTML par nom

L'attribut de nom des éléments peut également être utilisé par JavaScript pour accéder aux éléments HTML. Cependant, un seul nom peut être associé à plusieurs éléments HTML. Le code fourni utilise le getElementsByName () méthode.

Deux paragraphes ont les mêmes noms; Ainsi, nous devons définir le numéro d'index de chaque paragraphe (au moment de l'utilisation de la méthode). Le numéro d'index du premier paragraphe est appelé [0] et le deuxième paragraphe [1].

Sortir

Il est observé à partir de la sortie que le contenu du paragraphe (à l'index [1]) a été modifié.

Comment accéder aux éléments HTML par tagname

La méthode javascript getElementsByTagName () est utilisé ici pour accéder aux éléments par leurs noms de balises.

Le code ci-dessus accède au paragraphe (à index [0]) et modifie sa valeur à «le paragraphe est accessible».

Note: Un document HTML comprend diverses balises et si vous allez y accéder en utilisant JavaScript getElementsByTagName () Méthode, vous devez mentionner le numéro d'index de l'élément.

Sortir

La sortie montre que le contenu du paragraphe à l'index 0 a été modifié.

Comment accéder aux éléments HTML par ClassName

Le getElementsByClassName () La méthode de JavaScript est utilisée ici pour accéder aux éléments HTML.

Le code ci-dessus accède à la classe nommée «deux»Et modifie son contenu. Un document peut contenir plusieurs classes des mêmes noms; Ainsi, un numéro d'index est également obligatoire dans ce cas.

Sortir

La sortie montre que le contenu du nom de la classe (nommé deux) a été modifié.

Comment accéder aux éléments HTML par QuerySelector

Un élément HTML peut avoir des cours et des identifiants, qui peuvent être utilisés pour modifier les styles des éléments. Le QuerySelector () La méthode de JavaScript vous permet d'obtenir les éléments qui correspondent au sélecteur CSS spécifique. Le querysecteur est en outre divisé en deux méthodes;

• Le QuerySelector () La méthode renvoie le premier élément (qui correspond à l'expression)
• Le queySelectorall () La méthode renvoie tous les éléments correspondants

Note: Pour accéder aux cours, vous devez mettre le point (.) Avant le nom de la classe et pour l'ID, vous devez utiliser le (#) signe avant le nom d'identification.

Exemple 1: Utilisation de la méthode QueySelector ()

Le code écrit ci-dessous utilise le QuerySelector () Méthode pour obtenir le premier élément qui correspond à la condition.

Dans le code ci-dessus, le QuerySelector () la méthode est appliquée aux éléments ayant classe = ”lh”.

Sortir

La sortie montre que le premier paragraphe (qui correspond au nom et à l'ID de la classe) a été accessible et que son contenu est mis à jour.

Exemple 2: Utilisation de la méthode QuerySelectorall ()

Comme discuté précédemment le QuerySelector () La méthode accède uniquement à la première correspondance. Vous pouvez utiliser le queySelectorall () Méthode pour accéder à l'élément de votre choix comme nous l'avons fait dans l'exemple suivant.

Le code ci-dessus pratique le queySelectorall () Méthode pour accéder aux éléments qui ont id = "ONU". Le numéro d'index est obligatoire à mettre et nous avons utilisé [1] ici.

Sortir

Il est conclu de la sortie que les sélecteurs CSS tels que la classe et l'ID ont été utilisés par le queySelectorall () Méthode pour accéder / modifier le contenu du paragraphe à l'index 1.

Conclusion

Le javascript peut accéder aux éléments HTML en utilisant le Nom, ID, ClassName, TagName et QuerySelector des éléments HTML. Ces méthodes peuvent également être utilisées pour manipuler le contenu d'un élément HTML. Cet article démontre les cinq méthodes JavaScript qui accèdent aux éléments HTML par divers moyens. Le id, nom de classe et tagname Les méthodes ont tendance à accéder directement aux éléments HTML. Cependant, le queySelector () / Queryselectorall () La méthode utilise les sélecteurs CSS pour accéder et modifier les éléments HTML.