[DOM] Injection de données dans des balises exotiques

**javapalatete** · 02/10/2008, 16h07

Bonjour,

Voici le problème : Je dois créer un système de balises exotiques (avec un namespace bidon, peu importe s'il n'y a pas de validation HTML), permettant d'injecter des données issus d'objets javascript.

J'y suis presque mais je n'arrive pas à faire fonctionner cela dans internet explorer.
Voici le code de test :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Exotic HTML</title>
		<script language="Javascript">
			
			function Thing(name) {
				this.name = name;
			}
			
			function Display() {
				
				this.init = function() {
					
					this.list = document.getElementById("list").getElementsByTagName("li");
					this.display = new Array();
					
					for (var i = 0; i < this.list.length; i++) {

						// Nouvel objet						
						this.display[i] = new Object();
						// Référencer le noeud source
						this.display[i].tags = this.list[i];
						// Cloner en profondeur la hiérarchie pour s'en servir comme modèle pour lors des mises à jour
						this.display[i].template = this.list[i].cloneNode(true);
					}	
				}
				
				this.doit = function() {
					
					for (var i = 0; i < this.list.length; i++) {
						
						// Remplacer les noeuds enfants par un clone en profondeur du modèle
						this.display[i].tags.replaceChild(this.display[i].template.firstChild.cloneNode(true), this.display[i].tags.firstChild);
						
						// Trouver le noeud à modifier
						var elements = this.display[i].tags.getElementsByTagName("my:name");
						// Pour internet explorer
						if (elements.length == 0)
							elements = this.display[i].tags.getElementsByTagName("name");
						alert(elements[0].nodeType + " " + elements[0].nodeValue +  " " + elements[0].nodeName);
						
						// Injection des données
						if (elements[0].hasChildNodes()) {
							// Pour les navigateurs standards
							elements[0].firstChild.nodeValue = elements[0].firstChild.nodeValue.replace(/name/, results[i].name);
						} else {
							// Pour internet explorer
							var node = document.createTextNode(results[i].name);
							elements[0].appendChild(node);							
						}
					}	
				}
				
				this.append = function() {
						var debug = document.getElementById("debug");
						var elements = this.display[0].tags.getElementsByTagName("my:name");
						if (elements.length == 0)
							elements = this.display[0].tags.getElementsByTagName("name");
						debug.innerHTML = elements.toString() + " " + elements.length + " " + elements[0].nodeType;
						var text = document.createTextNode(results[0].name);
						elements[0].appendChild(text);
				}
			}
			
			function init() {
				display.init();
			}
			
			var results = new Array();
			results[0] = new Thing("thing1");
			results[1] = new Thing("thing2");
			results[2] = new Thing("thing3");
			
			var display = new Display();
				
		</script>
	</head>
	<body onload="init();">
		
		<ul id="list">
			<li>
				<my:thing>
					<my:name>name</my:name>				
				</my:thing>
			</li>
			<li>
				<my:thing>
					<my:name>name</my:name>					
				</my:thing>
			</li>
			<li>
				<my:thing>
					<my:name>name</my:name>					
				</my:thing>
			</li>
		</ul>
		
		<textarea id="debug" clos="80" rows="20"></textarea>
		<button onclick="display.doit();">do it</button>
		<button onclick="display.append();">append</button>
		
	</body>
</html>