[le saviez vous ?] existence des objets après un remove

Version imprimable

Je viens de découvrir une chose que je soupçonnais sur la persistance des objets.

J'avais déja expérimenté le déplacement d'un objet en l'appendant simplement ailleurs dans la page, mais je n'avais jamais tenté de réanimer un objet supprimé !
Voici qui est fait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script type="text/javascript"> var myobj=document.createElement('div'); myobj.style.width='100px'; myobj.style.height='100px'; myobj.style.backgroundColor='red'; function addobject(){ document.body.appendChild(myobj); } function removeobj(){ document.body.removeChild(myobj); } </script> </head> <body> <input type="button" onclick="addobject()" value="ajouter" /> <input type="button" onclick="removeobj()" value="supprimer" /> </body> </html>
je pense en particulier à des applications pour eviter de bidouiller avec le display:none / block

Salut, ce n'est qu'à moitié étonnant, ton objet est dans une variable globale du contexte JavaScript, son insertion ou son retrait du DOM ne modifient pas cette variable ;)
Sinon, la même en une seule fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<script type="text/javascript">
			var myobj=document.createElement('div');
			myobj.style.width='100px';
			myobj.style.height='100px';
			myobj.style.backgroundColor='red';
			function swapobject(){
				try{
					document.body.removeChild(myobj);
				}
				catch(e){
					document.body.appendChild(myobj);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" onclick="swapobject()" value="Alterner" />
	</body>
</html>

chose intéressante, il conserve ses propriétés :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 
<script type="text/javascript">
var myobj=document.createElement('div');
myobj.style.width='100px';
myobj.style.height='100px';
myobj.style.backgroundColor='red';
 
function addobject(){
document.body.appendChild(myobj);
}
function removeobj(){
document.body.removeChild(myobj);
}
function fillobject(){
myobj.innerHTML=new Date().toLocaleString();
}
</script>
</head>
 
<body>
<input type="button" onclick="addobject()" value="afficher" />
<input type="button" onclick="fillobject()" value='remplir' />
<input type="button" onclick="removeobj()" value="supprimer" />

ça peut être utile pour un constructeur d'objets ...

31/07/2009, 09h38
DoubleU

Comme le disait Bovino, la fonction appendChild/removeChild ajoute/retire l'objet de l'affichage de la page, mais ne supprime pas la référence en mémoire que tu as déclarée globale, donc forcément tu peux y accéder de nouveau par la suite...
31/07/2009, 09h55
Bovino

C'est d'ailleurs la (mauvaise) gestion des deux contextes JavaScript / DOM qui provoque les fuites de mémoire sous IE.
IE gérant différemment les deux contextes, son garbage collector est incapable de libérer la mémoire si une référence circulaire implique un objet JavaScript et un élément du DOM ;)