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

L'erreur que j'ai est "Demande d'accès à la méthode ou aux propriétés inattendue" pour la ligne :

Code :

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

1
2
 
elements[0].appendChild(node);

et la ligne

Code :

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

1
2
 
elements[0].appendChild(text);

Qui saurait me dire pourquoi.
Merci

**SpaceFrog** · 02/10/2008, 16h21

est tu sur du node que tu attaques avec firstChild ???

fais un alert du nodeName et si tu n'as pas le resultat escompté, rendez vous par là http://javascript.developpez.com/faq...M#DOMIEFirefox

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

Merci pour ta réponse Grenouille de l'Espace, mais dans la méthode doit(), la ligne suivante le fait déjà :

alert(elements[0].nodeType + " " + elements[0].nodeValue + " " + elements[0].nodeName);

et j'obtiens la réponse suivante dans tous les navigateurs (même IE) :
1 null MY:NAME

Je tape bien le bon noeud, mais par contre la structure du noeud en question ne semble pas être compris par IE, parce que si j'applique firstChild dessus, il me répond "null".
Tous les autres navigateurs voient bien que le noeud "MY:NAME" contient un noeud texte (auquel j'applique le replace pour injecter la donnée).

Une autre suggestion stp ?
Sinon je vais potasser ta page, mais de loin ça parle de DOM standard.

**SpaceFrog** · 02/10/2008, 17h01

essaye avec un parser xml ?

**javapalatete** · 02/10/2008, 17h25

Utiliser un parser XML.
Je suppose que tu me suggère d'utiliser un truc comme :

Code :

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

1
2
3
4
 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text); // ou xmlDoc.load(file)

Mais comment faire un parser xml qui accepte non pas un texte xml ni un fichier xml externe, mais une hiérachie DOM issue du document lui même. Je sèche...
Merci pour ton interêt sur la question.

**SpaceFrog** · 02/10/2008, 18h40

si tu as un string mest le en innerHTML d'un div ?

**bigboomshakala** · 03/10/2008, 07h55

Envoyé par javapalatete

Je tape bien le bon noeud, mais par contre la structure du noeud en question ne semble pas être compris par IE, parce que si j'applique firstChild dessus, il me répond "null".
Tous les autres navigateurs voient bien que le noeud "MY:NAME" contient un noeud texte (auquel j'applique le replace pour injecter la donnée).

la gestion des noeuds #text et #comment est différente sur IE

pour qu'un parcours du DOM se fasse de la même façon sur tous les nav, perso j'ignore ces noeuds en redéfinissant des fonctions de parcours du DOM firstChild, lastChild, childNodes... (c'est con

, mais j'ai pas trouvé mieux)

sinon pour ton soucis j'ai pas regardé (désolé), suis encore en pyjama ^^

**javapalatete** · 06/10/2008, 10h52

j'ai fini par trouver.
Il suffisait de mettre

Code :

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

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:my="http://www.example.com/2008/my">

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

JavaScript

Discussions similaires

Partager

Partager