Quelles sont les différentes façons de sélectionner les éléments DOM en JavaScript
Ce tutoriel démontrera les différentes méthodes de sélection des éléments DOM en JavaScript.
Quelles sont les différentes façons de sélectionner les éléments DOM en JavaScript?
Utilisez les méthodes suivantes pour sélectionner les éléments DOM en JavaScript:
- Méthode GetElementById ()
- Méthode GetElementsByClassName ()
- Méthode GetElementsByTagName ()
- Méthode QueySelector ()
- Méthode QueySelectorall ()
Méthode 1: Sélectionnez des éléments DOM à l'aide de la méthode «GetElementById ()»
Pour sélectionner les éléments DOM, utilisez le «getElementByid ()»Méthode basée sur l'ID assigné de l'élément. Cette méthode sélectionne un seul élément par son unique "identifiant" attribut. Il donne une référence à l'élément avec l'ID spécifié et les rendements "nul"Si aucun élément correspondant n'est trouvé.
Syntaxe
Utilisez la syntaxe donnée ci-dessous pour la méthode GetElementById ():
document.getElementByid («idname»)Ici le "idname«Est le nom d'un attribut d'identifiant attribué à un élément.
Exemple
Dans un fichier HTML, créez deux titres dans un élément DIV en utilisant le «H4" étiqueter. Attribuez des ID à l'élément DIV et des titres «H4» des éléments nommés «div" et "titre", respectivement. Ajoutez l'attribut de style à l'élément div pour l'aligner au centre. Affectez également une classe "section«À la deuxième tête qui change sa couleur:
Accéder aux éléments DOM en utilisant différentes méthodes
Sélectionnez les éléments DOM en JavaScript à l'aide de la méthode 'GetElementById ()'
Maintenant, nous allons obtenir le «div»Élément utilisant son identifiant attribué à l'aide du«getElementByid ()" méthode:
var getbyid = document.getElementById ("div");Imprimez l'élément contre l'ID "div"Sur la console:
console.log (getbyid);On peut voir que l'élément HTML requis a été récupéré avec succès:
Méthode 2: Sélectionnez des éléments DOM à l'aide de la méthode «GetElementsByClassName ()»
Vous pouvez également sélectionner l'élément DOM en utilisant sa classe assignée à l'aide de «getElementsByClassName ()" méthode. Il sélectionne une liste d'éléments par le nom de leur classe. Il publie un objet htmlcollection en direct, un objet de type tableau qui contient tous les éléments avec le nom de classe spécifié.
Syntaxe
La syntaxe suivante est utilisée pour la méthode «GetElementsByClassName ()»:
document.GetElementsByClassName («ClassName»)Exemple
Ici, nous obtiendrons l'élément qui contient la classe "section»Et imprimez sur la console:
var getbyClass = document.getElementsByClassName ("Section");console.Log (GetByClass);
Comme vous pouvez le voir dans la sortie, un tableau de longueur 1 est retourné qui contient un élément "H4"Qui appartient à la classe"section»:
Méthode 3: Sélectionnez des éléments DOM à l'aide de la méthode «GetElementsByTagName ()»
Dans le cas où il n'y a pas d'identification ou de classe attribuée à un élément, utilisez le "getElementsByTagName ()”Méthode pour obtenir l'élément par leur nom de balise. Il renvoie également un objet htmlcollection en direct, qui est un objet de type tableau qui contient tous les éléments qui ont le nom de balise spécifié.
Syntaxe
Suivez la syntaxe donnée pour sélectionner des éléments en fonction du nom de la balise:
GetElementsByTagName (TagName)Exemple
Invoquez la méthode "getElementsByTagName ()" en passant le nom de la balise "H4". Ensuite, imprimez la liste des éléments qui correspondent au nom de balise spécifié sur la console:
var getbytag = document.getElementsByTagName ("H4");console.log (getByTag);
Sortir
Méthode 4: Sélectionnez des éléments DOM à l'aide de la méthode «QueySelector ()»
Utilisez le "QuerySelector ()”Méthode pour obtenir l'élément DOM. Il sélectionne un seul élément qui correspond à un sélecteur CSS spécifié. Il renvoie le premier élément correspondant trouvé dans le document. Si aucun élément n'est apparié, il donne «nul".
Syntaxe
La syntaxe mentionnée ci-dessous est utilisée pour la méthode «queySelector ()»:
document.QuerySelector (attribut)Ici, l'attribut est un sélecteur CSS, comme un identifiant ou une classe comme «#ma pièce d'identité"".Ma classe".
Exemple
Appelez la méthode «queySelector ()» et transmettez l'ID »#titre«Pour obtenir les éléments qui contiennent le même ID:
var getbyquery = document.queySelector ("# Heading");console.Log (GetByQuery);
Il donne le premier élément correspondant comme une sortie:
Méthode 5: Sélectionnez des éléments DOM à l'aide de la méthode «queySelectorall ()»
Si vous souhaitez sélectionner tous les éléments contenant l'attribut spécifié (ID ou classe), utilisez le «queySelectorall ()" méthode. Il sélectionne une liste d'éléments qui correspondent à un sélecteur CSS défini particulier. Il donne un objet Nodelist qui contient tous les éléments du document qui correspondaient au sélecteur CSS particulier.
Syntaxe
Utilisez la syntaxe suivante pour obtenir la liste des éléments:
document.queySelectorall (attribut)Exemple
Pour obtenir la liste de l'élément correspondant qui contient l'ID "titre" avec le "queySelectorall ()”Méthode et imprimez sur les éléments de la console:
var getbyqueryall = document.queySelectorall ("# Heading");console.Log (GetByQueryall);
Sortir
Il s'agit de sélectionner les éléments DOM en JavaScript.
Conclusion
Pour sélectionner les éléments DOM en JavaScript, utilisez le «getElementByid ()","getElementsByClassName ()","getElementsByTagName ()","QuerySelector ()", ou la "queySelectorall ()" méthode. Ces méthodes fournissent différentes façons de sélectionner des éléments dans le DOM en fonction de leurs identifiants uniques, noms de classe, noms de balises ou sélecteurs CSS. Ce tutoriel a démontré les différentes méthodes de sélection des éléments DOM en JavaScript.