Cet article explique la propriété 'previousElementSibling' de l'élément HTML DOM à l'aide de JavaScript.
Qu'est-ce que la propriété 'previousElementSibling' de l'élément HTML DOM ?
L'élément DOM (Document Object Model) ' previousElementSibling ” est une propriété en lecture seule qui aide à récupérer le frère précédent d'un élément dans le même arbre. Cette propriété renvoie le contenu du frère précédent.
Syntaxe
élément. previousElementSibling
Cette syntaxe renvoie le ' chaîne ' contenant le contenu HTML du frère précédent, et ' nul ' s'il n'existe pas.
Utilisons pratiquement la syntaxe définie ci-dessus pour montrer le fonctionnement de la propriété 'previousElementSibling'.
Exemple : Application de la propriété 'previousElementSibling' pour renvoyer le contenu du frère précédent
Cet exemple applique la propriété JavaScript 'previousElementSibling' pour obtenir le contenu HTML du frère précédent.
Code HTML
Tout d'abord, un aperçu du code HTML suivant :
< ul >< ce identifiant = 'd'abord' > HTML < / ce >
< ce identifiant = 'deuxième' > CSS < / ce >
< ce identifiant = 'troisième' > Javascript < / ce >
< / ul >
< p identifiant = 'pour' >< / p >
Dans les lignes de code ci-dessus :
- Le '
- Dans la liste non ordonnée, plusieurs éléments sont intégrés à l'aide du '
” tag avec leurs identifiants attribués. - Enfin, le « ” intègre un paragraphe vide avec un identifiant unique “para”.
Code Javascript
Maintenant, continuez avec le code JavaScript :
< scénario >laisser l'article = document. getElementById ( 'troisième' ) . previousElementSibling . innerHTML ;
document. getElementById ( 'pour' ) . innerHTML = ' Le frère précédent du troisième élément est : ' + article ;
scénario >
Selon l'extrait de code ci-dessus :
- La variable 'item' utilise d'abord le ' getElementById() ' pour accéder à l'élément de liste ciblé à l'aide de son identifiant 'troisième' puis appliquez le ' previousElementSibling ” propriété pour obtenir son frère précédent.
- Après cela, le « getElementById() ' La méthode accède au paragraphe vide ajouté en utilisant son identifiant 'para' pour l'ajouter avec la valeur de la variable 'item', c'est-à-dire le frère précédent.
Sortir
Comme on le voit, le résultat montre le frère précédent de l'élément ciblé, c'est-à-dire (JavaScript).
Conclusion
JavaScript fournit l'élément DOM prédéfini ' previousElementSibling ” propriété pour récupérer le frère précédent d'un élément. Il renvoie le frère précédent d'un élément du même niveau d'arborescence où se trouve l'élément cible. Cet article a expliqué en détail la propriété 'previousElementSibling' de l'élément HTML DOM en JavaScript.