Discussion :

[Doksuri]

bonjour,
developpez.net/forums/d1948570/javascript/general-javascript/utilisation-innerhtml/#post10801124

dans ce post : Watilin fait reference aux elements du DOM
bien que les "selecteurs" soient les memes, les references non

=> exist-il un moyen de recuperer ces references (uniques) en JS ?

[psychadelic]

heu, je vois pas trop, pour moi Watilin parle de "référence" dans un sens imagé, et ne s'est pas aventuré à décortiquer le mécanisme du software interne des différents moteurs d'interprétation HTML et JS

[Doksuri]

Ce n’est plus le même élément DOM, et les références sont brisées, en particulier les gestionnaires d’évènements qui y étaient attachés

le navigateur semble faire la difference en un element issue d'un selecteur (exemple document.getElementById()) et l'element du dom a proprement parler qu'il manipule

ca va etre grossier, mais voici ce que j'essaye de dire :

Code html :

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

1
2
3
<span id="span1">mon span 1</span>
<span id="span2">mon span 2</span>
<span id="span3">mon span 3</span>

pour le navigateur : le span1 aura un genre d'id interne A, le span2 B et le span3 C

si maintenant on applique :

Code javascript :

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

1
2
3
4
5
6
7
var span2 = document.getElementById('span2');
span2.parentNode.removeChild(span2);
 
var newSpan2 = document.createElement('span');
newSpan2.textContent = 'new span 2';
var span3 = document.getElementById('span3');
span3.insertBefore(newSpan2, span3.firstChild);

le resultat sera sensiblement le meme (j'ai juste mis "new span 2" en textContent qu'on voit bien que le span change)

ce que dis Watilin, c'est que de faire ca, change la reference de l'element (bien que le selecteur de notre cote soit le meme)

pour le navigateur : span2 aura un id interne D (et non B comme avant)

[psychadelic]

ça reste des élucubrations, et perso, je doute qu'il existe une table d'allocation mémoire pour chaque élément, mais plutôt une pile, plus pratique pour la gestion de bac à sable avec le passage d'un onglet à un autre, et qui devient une gestion de mémoire dynamique ou on oublie les adresse fixes qui prévalaient aux premiers temps de l'informatique.

De toutes façons c'est la cuisine interne de chaque marque de navigateur, ce qui pourrait marcher sur un Firefox à peu de chance de fonctionner sur chrome ou Edge, ou IE, ou Konqueror...

[Doksuri]

si c'est pas possible, tant pis ^^
merci de me l'avoir confirme

[NoSmoking]

Bonjour,
je dois admettre que je n'ai absolument rien compris aux propos tenus

Ce qui est dit par Watilin, si je ne m'abuse, c'est que tu « perds » l'objet initialement contenu qui est remplacé par un nouvel élément recrée lors de l'utilisation de innerHTML.

Ceci étant ton élément substitué existe toujours comme tu as une référence à celui-ci, dans ton cas var span2, tu donc peux encore l'utiliser.

Fait simplement ce test sur base de cette structure

Code html :

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

1
2
3
4
5
<div> 
  <span id="span1">mon span 1</span>
  <span id="span2">mon span 2</span>
  <span id="span3">mon span 3</span>
</div>

exécute ce script

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
var span2 = document.getElementById('span2');
var oParent = span2.parentNode;
 
oParent.removeChild(span2);
 
var newSpan2 = document.createElement('span');
newSpan2.textContent = 'new span 2 ';
 
var span3 = document.getElementById('span3');
oParent.insertBefore(newSpan2, span3);
 
oParent.appendChild(span2);  // il est toujours référencé et donc manipulable

Nota: je déplace vers JavaScript ce qui semble plus indiqué.

[Beginner.]

si maintenant on applique :

Code javascript :

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

1
2
3
4
5
6
7
var span2 = document.getElementById('span2');
span2.parentNode.removeChild(span2);
 
var newSpan2 = document.createElement('span');
newSpan2.textContent = 'new span 2';
var span3 = document.getElementById('span3');
span3.insertBefore(newSpan2, span3.firstChild);

le resultat sera sensiblement le meme (j'ai juste mis "new span 2" en textContent qu'on voit bien que le span change)

Si on veut trois span comme au début il faudrait remplacer span3.insertBefore(newSpan2, span3.firstChild); (avec cette instruction la span "newSpan2" sera à l'intérieur de span#span3) par span3.parentNode.insertBefore(newSpan2, span3); (avec cette instruction la span "newSpan2" sera placée après span#span1 et avant de span#span3 ce qui correspond à la structure de départ).

Mais même dans ce cas il me semble que la span "newSpan2" et span#span2 n'ont rien à voir l'un avec l'autre...

------
Par contre il y a une chose qui rejoint le sujet du fil Les fuites de mémoire...
EDIT : j'ai déplacé ce passage dans le fil indiqué ici : #4