[DOM] échangeur DOM

javatwister · 23/11/2011, 11h46

Si un jour vous avez besoin - mais j'en doute - d'échanger des éléments de votre page entre eux, vous pouvez tester ce que ça donne;

http://javatwist.imingo.net/test2.htm

- seuls les éléments ayant un id sont interchangeables;
- en passant dessus, vous avez cet id et vous pouvez le saisir dans l'un des champs, en haut;
- bref, saisissez deux id valides et go!
[J'ai commencé des contrôles pour tester la pertinence de l'échange (éléments inline / block...) mais c'est assez compliqué; prudence recommandée]

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<body>
 
<p>
	<input type="text" id="one" /> 
	<input type="text" id="two" />
	<input type="button" id="go" value="échanger" /> 
</p>
 
<script type="text/javascript">
 
function b(q){
	return document.getElementById(q)
}
 
 
function exchange(un, deux){
	if(!un || !deux){
		return
	}
 
	var cl=un.cloneNode(true);
	var cl2=deux.cloneNode(true);
 
	cl2.id="clone"+Math.random();
 
	un.parentNode.insertBefore(cl,un);
	deux.parentNode.insertBefore(cl2,deux);
 
	un.parentNode.replaceChild(deux,cl)
	b(cl2.id).parentNode.replaceChild(un,b(cl2.id))
 
}
 
 
b("go").onclick=function(){
	if(!b("one").value || !b("two").value){
		return
	}
 
	exchange(b(b("one").value),b(b("two").value))
}
 
var tag=document.getElementsByTagName("*");
for(i=0;i<tag.length;i++){
	if(tag[i].id){
		tag[i].title=tag[i].id + " " + tag[i].nodeName
	}
}
 
</script>
 
 
</body>
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email