Script sibling : Manipulation des éléments frères et parent avec nextElementS

Edition 2 | Chapitre 12 : Manipuler le document / Page 183

Edition 3 | Chapitre 12 : Manipuler le document / Page 183

<html>
<head><title>Manipulation des éléments frères et parent</title> 
</head>
<body><h1>Manipulation des éléments frères et parent avec <code>nextElementSibling</code>, <code>previousElementSibling</code> et <code>parentElement</code></h1><div id="container"><div class="enfant">Enfant 1</div><div class="enfant">Enfant 2</div><div class="enfant">Enfant 3</div><div class="enfant">Enfant 4</div><div class="enfant">Enfant 5</div><div class="enfant">Enfant 6</div></div><p>Passez votre souris sur un enfant pour modifier l'apparence des voisins, si ils existent.</p><script type="text/javascript">var enfants=document.querySelectorAll("div#container > div");for (var i=0; i<enfants.length; i++) {enfants[i].addEventListener("mouseover", voisin);}function voisin(evenement) {/* Supprimer la mise en forme de tous les éléments enfants */document.querySelectorAll("div#container > div").forEach(function(element) {element.className="";});/* Ajout de la classe sur les éléments suivant et précédent */if (evenement.target.nextElementSibling) {/* Vérifier que l'élément suivant existe */evenement.target.nextElementSibling.className="surligne";}if (evenement.target.previousElementSibling) {/* Vérifier que l'élément précédent existe */evenement.target.previousElementSibling.className="surligne";}/* Changer la classe de l'élément parent */evenement.target.parentElement.className="containerOver";} </script><style type="text/css">body {font-family: verdana;}h1 {font-size:15px;}div#container {display: flex;padding:8px;border:3px solid #999;justify-content: space-evenly;}div#container > div {margin:3px;padding:3px;padding-top:15px;padding-bottom:15px;background:#ccc;flex-grow: 1;text-align: center;border:2px solid #ccc;cursor: pointer;}.surligne { background-color: #666 !important;color:#fff;border-radius:6px;border:2px solid #000 !important;}.containerOver {border:3px dotted #000 !important; }</style>
</body>
</html>

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Manipulation des éléments frères et parent</title>    </head><body>    <h1>Manipulation des éléments frères et parent avec <code>nextElementSibling</code>, <code>previousElementSibling</code> et <code>parentElement</code></h1>    <div id="container">        <div class="enfant">Enfant 1</div>        <div class="enfant">Enfant 2</div>        <div class="enfant">Enfant 3</div>        <div class="enfant">Enfant 4</div>        <div class="enfant">Enfant 5</div>        <div class="enfant">Enfant 6</div>    </div>    <p>Passez votre souris sur un enfant pour modifier l'apparence des voisins, si ils existent.</p>        <script type="text/javascript">        var enfants=document.querySelectorAll("div#container > div");        for (var i=0; i<enfants.length; i++) {             enfants[i].addEventListener("mouseover", voisin);        }        function voisin(evenement) {            /* Supprimer la mise en forme de tous les éléments enfants */            document.querySelectorAll("div#container > div").forEach(function(element) {element.className="";});            /* Ajout de la classe sur les éléments suivant et précédent */            if (evenement.target.nextElementSibling) {                /* Vérifier que l'élément suivant existe */                evenement.target.nextElementSibling.className="surligne";            }            if (evenement.target.previousElementSibling) {                /* Vérifier que l'élément précédent existe */                evenement.target.previousElementSibling.className="surligne";            }            /* Changer la classe de l'élément parent */            evenement.target.parentElement.className="containerOver";        }            </script>    <style type="text/css">        body {            font-family: verdana;        }        h1 {            font-size:15px;        }        div#container {            display: flex;            padding:8px;            border:3px solid #999;            justify-content: space-evenly;        }         div#container > div {            margin:3px;            padding:3px;            padding-top:15px;            padding-bottom:15px;            background:#ccc;            flex-grow: 1;            text-align: center;            border:2px solid #ccc;            cursor: pointer;        }        .surligne {             background-color: #666 !important;            color:#fff;            border-radius:6px;            border:2px solid #000 !important;        }        .containerOver {            border:3px dotted #000 !important;                    }    </style></body></html>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...