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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
---
title: Gestion des espaces dans le DOM
slug: Web/API/Document_Object_Model/Whitespace
tags:
- DOM
translation_of: Web/API/Document_Object_Model/Whitespace
---
<h2 id="Le_probl.C3.A8me">Le problème</h2>
<p>La présence d'espaces et de blancs dans le <a href="fr/DOM">DOM</a> peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction <code>white-space: pre</code> en <a href="fr/CSS">CSS</a> fonctionne.) Cela signifie que :</p>
<ul>
<li>il y aura certains nœuds texte qui ne contiendront que du vide, et</li>
<li>certains nœuds texte commenceront ou se termineront par des blancs.</li>
</ul>
<p>En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :</p>
<pre class="eval"><!-- My document -->
<html>
<head>
<title>My Document</title>
</head>
<body>
<h1>Header</h1>
<p>
Paragraph
</p>
</body>
</html>
</pre>
<p><img alt="Arbre du DOM équivalent à l'exemple HTML ci-avant" src="dom-string.png"></p>
<p>Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.</p>
<h2 id="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2>
<p>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</p>
<pre class="brush: html"><!-- jolie impression conventionnelle
avec des espaces entre les balises:
-->
<div>
<ul>
<li>Position 1</li>
<li>Position 2</li>
<li>Position 3</li>
</ul>
</div>
<!-- jolie impression adaptée au problème :
-->
<div
><ul
><li>Position 1</li
><li>Position 2</li
><li>Position 3</li
></ul
></div></pre>
<p>Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :</p>
<pre class="brush: js">/**
* Tout au long, les espaces sont définis comme l'un des caractères
* "\t" TAB \u0009
* "\n" LF \u000A
* "\r" CR \u000D
* " " SPC \u0020
*
* Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement
* espaces (et aussi d'autres caractères).
*/
/**
* Détermine si le contenu du texte d'un nœud est entièrement blanc.
*
* @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire,
* un nœud |Text|, |Comment| ou |CDATASection|
* @return True <em>(vrai)</em> Si tout le contenu du texte du |nod| est un espace,
* sinon false <em>(faux)</em>.
*/
function is_all_ws( nod )
{
// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
return !(/[^\t\n\r ]/.test(nod.textContent));
}
/**
* Détermine si le nœud doit être ignoré par les fonctions d'itération.
*
* @param nod Un objet implémentant l'interface DOM1 |Node|.
* @return true <em>(vrai)</em> si le nœud est :
* 1) un nœud |Text| qui est tout en espace
* 2) un nœud |Comment|
* et autrement false <em>(faux)</em>.
*/
function is_ignorable( nod )
{
return ( nod.nodeType == 8) || // un nœud commentaire
( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace
}
/**
* Version de |previousSibling| qui ignore les nœuds qui sont entièrement
* espace ou commentaire. (Normalement |previousSibling| est une propriété
* de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est
* un enfant du même parent, qui se produit immédiatement avant le
* nœud référence.)
*
* @param sib Le nœud référence .
* @return soit :
* 1) le frère précédent le plus proche de |sib| qui ne peut
* être ignoré du fait de la fonction |is_ignorable|, ou
* 2) null si aucun nœud n'existe.
*/
function node_before( sib )
{
while ((sib = sib.previousSibling)) {
if (!is_ignorable(sib)) return sib;
}
return null;
}
/**
* Version de |nextSibling| qui ignore les nœuds qui sont entièrement
* espace ou commentaire.
*
* @param sib Le nœud référence .
* @return soit :
* 1) le frère précédent le plus proche de |sib| qui ne peut
* être ignoré du fait de la fonction |is_ignorable|, ou
* 2) null si aucun nœud n'existe.
*/
function node_after( sib )
{
while ((sib = sib.nextSibling)) {
if (!is_ignorable(sib)) return sib;
}
return null;
}
/**
* Version de |lastChild| qui ignore les nœuds qui sont entièrement
* espace ou commentaire. (Normalement |lastChild| est une propriété
* de tous les nœuds DOM qui donnent le dernier des nœuds contenus
* directement dans le nœud de référence.)
*
* @param sib Le nœud référence.
* @return soit :
* 1) Le dernier enfant de |sib| qui ne peut
* être ignoré du fait de la fonction |is_ignorable|, ou
* 2) null si aucun nœud n'existe.
*/
function last_child( par )
{
var res=par.lastChild;
while (res) {
if (!is_ignorable(res)) return res;
res = res.previousSibling;
}
return null;
}
/**
* Version de |firstChild| qui ignore les nœuds qui sont entièrement
* espace ou commentaire..
*
* @param sib le nœud référence.
* @return soit:
* 1) le nœud premier enfant de |sib| qui ne peut
* être ignoré du fait de la fonction |is_ignorable|, ou
* 2) null si aucun nœud n'existe.
*/
function first_child( par )
{
var res=par.firstChild;
while (res) {
if (!is_ignorable(res)) return res;
res = res.nextSibling;
}
return null;
}
/**
* Version de |data| cela n'inclut pas les espaces au début
* et termine et normalise tous les espaces dans un seul espace. (Normalement
* |data | est une propriété des nœuds de texte qui donne le texte du nœud.)
*
* @param txt Le nœud de texte dont les données doivent être renvoyées
* @return Une chaîne donnant le contenu du nœud de texte avec
* espace blanc s'est effondré.
*/
function data_of( txt )
{
var data = txt.textContent;
// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
data = data.replace(/[\t\n\r ]+/g, " ");
if (data.charAt(0) == " ")
data = data.substring(1, data.length);
if (data.charAt(data.length - 1) == " ")
data = data.substring(0, data.length - 1);
return data;
}</pre>
<h2 id="Exemple">Exemple</h2>
<p>Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est <code>"Ceci est le troisième paragraphe"</code>, et change ensuite l'attribut <code>class</code> et le contenu de ce paragraphe.</p>
<pre class="brush: js">var cur = first_child(document.getElementById("test"));
while (cur)
{
if (data_of(cur.firstChild) == "This is the third paragraph.")
{
cur.className = "magic";
cur.firstChild.textContent = "This is the magic paragraph.";
}
cur = node_after(cur);
}</pre>
|
