Comment trouver et obtenir des éléments HTML en JavaScript
Cet article discutera des procédures de recherche et d'obtention des éléments HTML en JavaScript. De plus, les exemples liés à GetElementById (), GetElementsByTagName (), GetElementsByClassName () et QueySelectorall () seront démontrés dans cet article. Alors, commençons!
Comment trouver et obtenir des éléments HTML par ID dans JavaScript
La plupart des développeurs JavaScript ont utilisé le getElementByid () Méthode pour trouver et obtenir des éléments HTML ayant des identifiants uniques. Si vous avez passé un ID qui n'appartiens à aucun élément HTML, la méthode GetElementById () affichera la valeur nul.
Syntaxe de la méthode GetElementById ()
document.GetElementByid (EleMedId)Ici le "élémentID»Représente l'ID unique de l'élément HTML que vous souhaitez trouver et obtenir dans votre code JavaScript.
Exemple: trouver et obtenir des éléments HTML par id dans javascript
Nous ajouterons des éléments HTML tels qu'un titre avec le
tag et trois éléments de paragraphe avec le
Tag dans l'exemple suivant. Notez que nous avons également ajouté "identifiant»Avec les éléments du paragraphe:
C'est Linuxhint.com
Trouver et obtenir des éléments HTML par ID dans JavaScript
Ceci est un programme JavaScript qui utilise la méthode "GetElementsById"
Dans l'étape suivante, nous trouverons et obtiendrons l'élément ayant l'identifiant "P1"En utilisant le"document.getElementByid ()" méthode. Après Ding ainsi, nous modifierons le contenu de l'élément HTML récupéré:
Exécutez le programme donné ci-dessus dans votre éditeur de code préféré ou tout autre bac à sable codant en ligne; Cependant, nous utiliserons le JSBIN à cet effet:
L'exécution du programme JavaScript ci-dessus affichera la sortie suivante:
Comment trouver et obtenir des éléments HTML par Tagname dans JavaScript
Vous pouvez utiliser le «getElementsByTagName ()”Méthode JavaScript pour trouver et obtenir un élément HTML spécifique par son nom de balise.
Syntaxe de GetElementsByTagName ()
document.GetElementsByTagName (TagName)Ici, le nom de TagNe représente le nom de balise de l'élément HTML que vous souhaitez récupérer.
Exemple: trouver et obtenir des éléments HTML par TagName dans JavaScript
L'exemple ci-dessous trouvera et obtiendra tous les éléments HTML ayant le nom de balise "p”Utilisation de la méthode GetElementsByTagName (). Après cela, il affichera le contenu du HTML présent au premier index de la collection d'objets:
C'est Linuxhint.com
Trouver et obtenir des éléments HTML par le nom de la balise en javascript
Ceci est un programme JavaScript qui utilise la méthode "GetElementsByTagName"
Comme vous pouvez le voir, le texte du premier paragraphe de notre programme JavaScript s'affiche avec succès:
Comment trouver et obtenir des éléments HTML par ClassName en JavaScript
Le "getElementsByClassName ()«La méthode est utilisée pour trouver et obtenir des éléments HTML ayant la même classe. En utilisant le nom de classe, lorsque vous essayez d'obtenir un élément HTML, l'interprète JavaScript renverra tous les objets appartenant à la même classe. Après cela, vous pouvez effectuer des opérations spécifiques sur ces éléments HTML.
Syntaxe de GetElementsByClassName ()
document.getElementsByClassName (className)Ici le "nom du cours"Représente le nom de classe des éléments HTML que vous devez trouver et obtenir dans votre programme.
Exemple: trouver et obtenir des éléments HTML par ClassName en JavaScript
Dans l'exemple suivant, nous avons ajouté une rubrique et quelques éléments de paragraphe avec le nom de classe "C1»:
C'est Linuxhint.com
Trouver et obtenir des éléments HTML par nom de classe en javascript
Texte dans la première paragraphe
Texte dans le deuxième paragraphe
Ensuite, nous rechercherons les éléments HTML qui ont «C1«Comme classe en utilisant la méthode GetElementsByClassName () et stockera les collections des objets dans«un»:
Voici la sortie que nous avons obtenue en exécutant le programme JavaScript donné ci-dessus:
Comment trouver et obtenir des éléments HTML par le sélecteur CSS en JavaScript
En html, le queySelectorall () La méthode renvoie un objet NodeList statique qui comprend une collection d'éléments enfants d'un élément correspondant aux sélecteurs CSS spécifiés. Les numéros d'index sont utilisés pour trouver et obtenir les nœuds, à partir de 0.
Syntaxe de la méthode Queryselectorall ()
élément.QuerySelectorall (sélecteurs)La méthode QuerySelectorall () prend «sélecteurs"Comme argument, une chaîne DOM comprend un ou plusieurs sélecteurs CSS valides.
Exemple: trouver et obtenir des éléments HTML par le sélecteur CSS en javascript
Dans le programme JavaScript donné ci-dessous, nous avons utilisé la méthode QueySelectorall () pour trouver et obtenir les éléments HTML paragraphes qui ont «C1"Comme nom de classe:
C'est Linuxhint.com
Trouver et obtenir des éléments HTML par nom de classe en javascript
Texte dans la première paragraphe
Texte dans le deuxième paragraphe
Découvrez la sortie de la méthode JavaScript QuerySelectorall ():
Conclusion
GetElementById (), GetElementsByTagName (), GetElementsByClassName () et QuerySelectorall () sont les méthodes JavaScript les plus courantes utilisées pour trouver et obtenir des éléments dans un programme JavaScript. Vous pouvez utiliser l'une des méthodes mentionnées pour rechercher un élément HTML spécifique dans le code. Cet article a discuté des procédures de recherche et d'obtention d'éléments HTML en JavaScript. De plus, les exemples liés à GetElementById (), GetElementsByTagName (), GetElementsByClassName () et QueySelectorall () sont également démontrés dans cet article.