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

**SpaceFrog** · 31/07/2009, 09h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 31/07/2009, 09h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 31/07/2009, 09h55

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**DoubleU** · 31/07/2009, 10h38

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...

**Bovino** · 31/07/2009, 10h55

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

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

JavaScript

Discussions similaires

Partager

Partager