[DOM] nodeValue et firstChild pour initialisation de contenu texte

**Hibou57** · 20/06/2007, 22h55

Bonsoir

Encore un topic/truc pour débutant(e) :

Context : Soit un paragraphe, que nous appelerons messageArea, dans un document HTML, pour lequel le contenu texte est déterminé à l'execution, et fixé par une procedure JavaScript.

Ce qui viens d'abord à l'esprit est

Code html :

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

1
2
 
   <p id="messageArea"></p>

pour l'HTML, puis

Code javascript :

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

1
2
3
4
 
   text = xxxx; // compute anything you want here
   messageArea = document.getElementById('messageArea');
   messageArea.firstChild.nodeValue = text; // <- Erreur d'execution

pour le code JavaScript.

Ca a l'air beau, mais ça ne marche pas

Zut, pourquoi ?

Raison : Dans le code HTML, aucun texte n'est donné pour l'élément P : normal, puisque notre texte est determiné à l'execution. Ors, pour donner une valeur à un noeud texte, il faut un noeud texte (ça va de soi). Ce noeud texte n'existe pas, puisque l'élément P ne contient rien, et donc l'invocation de firstChild produit une erreur, car le navigateur ne cré pas toujours de noeud texte par défaut vide (Internet Explorer ne le fait pas, par raison d'économie).

Solution : Le noeud texte ne peut pas être implicite, il faudra donc rendre sont existence explicite. Même si le contenu effectif n'est déterminé qu'à l'execution, il faut donner une valeur à l'élément P, dans le document HTML, pour que le DOM contienne un noeud texte à cet endroit là. On pourra utiliser simplement trois petit point par exemple ("..."). Ces trois petits points conviennent parfaitement à quelque choses qui ne connaitra qu'un bref instant d'affichage, avant d'être initialisé.

Il faut alors simplement remplacer le code HTML par

Code html :

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

1
2
 
   <p id="messageArea">...</p>

Le code JavaScript n'est pas en cause dans cette erreur, et il n'y a pas besoin de le modifier.

Moralité : dans vos documents HTML, destinés à êtres utilisés pour du DHTML, initialisez toujours vos noeuds texte, même si leurs valeurs effectives ne sont determinés qu'à l'execution du programme JavaScript.

Détail subsidiaire : nous employons messageArea.firstChild.nodeValue, et non pas simplement messageArea.nodeValue, parce que le contenu texte est en fait un noeud enfant... anonyme... mais un noeud enfant quand-même.

**javatwister** · 21/06/2007, 08h03

mais pour initialiser la zone dès le chargement, autant créer le paragraphe et son textNode dans la foulée...;

**SpaceFrog** · 21/06/2007, 09h02

Code :

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

1
2
3
4
5
6
7
8
9
function popul(){
var text = ' xxxx '; // compute anything you want here
var    messageArea = document.getElementById('messageArea');
messageArea.firstChild.nodeValue = text; // <- Erreur d'execution
 }
</script>
</head>
 
<body onload='popul()'>

ceci fonctionne sans aucun souci chez moi sous IE et FFX

aussi avec firstChild.data...

à une condition
mettre au minimum un contenu au départ dans la balise
sinon il n'a pas de firstChild ...

Code :

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

<p id="messageArea">.</p>

ou alors le créer dynamiquement et l'appender à la balise
ce qui se fait en général en une seul étape comme le suggère JT:

Code :

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

 messageArea.appendChild(document.createTextNode(text))}

et du coup la balise peut être vide

**Hibou57** · 21/06/2007, 13h51

Envoyé par SpaceFrog

à une condition
mettre au minimum un contenu au départ dans la balise
sinon il n'a pas de firstChild ...

SpaceFrog.... c'est exactement ce que disait le post justement

(c'était un post pour aider les débutant-e-s en DHTML... come moi

... quand je fais une erreure, je la résoud, et j'en parle ici)

La deuxième solution que tu propose, basée sur appendChild, ne convient pas au cas où l'espace messageArea est modifié plusieurs fois au cours de la vie de la page. Ou alors il faut tester la présence ou non du noeud anonyme. Ne pas avoir à le faire est une petit allégement, et en sus de cela, plus loin, nous verrons pourquoi il est important d'avoir un contenu initial, pour des raisons même autre encore que celle de seulement permettre par là d'avoir un noeud initial.

Envoyé par JavaTwister

mais pour initialiser la zone dès le chargement, autant créer le paragraphe et son textNode dans la foulée...;

Pardon JavaTwister, tu fais erreur, mais au moins ton intervention at-elle le mérite de montrer le mauvais exemple à ne pas suivre (je te taquine ).

Pourquoi : parce que le design JavaScript doit être conçu à la manière du design CSS, c'est-à-dire en séparant la structure et le comportement, de même que CSS sépare le contenu et la présentation.

Ainsi, pour cette raison, aucun code JavaScript ne doit être inclus dans les pages (dans l'idéal), peut-être à l'exception notable des code AdSense et autres régie de diffusion publicitaire.

Séparer le contenu et le comportement.
Pour utiliser JavaScript, et faire du DHTML propre, en séparant proprement la structure du document et son comportement (document behaviour), il faut seulement donner des attributs id au élément concerné par un comportement quelquonque, puis dans la procédure d'initialisation, attaché les comportement à chaque élément de l'id correspondant (par exemple associer la procédure newDocument à l'élément qui a l'id newDocumentButton)

Mais me direz-vous, il faut bien pourtant un petit bout de code, ne serait-ce que pour attacher un handler d'événement onload à l'élément body, pour que cette initialisation puisse se faire.

Hé bien non, même pas

Il ne suffit que d'une balise script dans l'entête HTML, avec l'URL du fichier JavaScript. Ce fichier JavaScript contient cette ligne

Pour mapage.html :

Code html :

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

1
2
3
4
5
6
 
<head>
   <!-- ... -->
   <script type="text/javascript" src="monprograme.js"></script>
   <!-- ... -->
</head>

Attention à la balise SCRIPT fermante qui est obligatoire, même si nous n'avons pas de contenu, et seulement des attributs (du moins en HTML, car en XHTML, on peut faire <script ... />, mais je conseil toujours le HTML 4 strict avec éventuellement iframe - en guise d'entorse - plutôt que le XHTML... ceci étant une autre affaire, je ne m'en justifierai pas dans ce fil)

Pour monprograme.js :

Code javascript :

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

1
2
3
4
 
/* ... */
window.onload = init; /* init, ou tout autre nom */
/* ... */

Attention à la casse de onload : n'écrivez surtout pas onLoad

Mauvais exemple :

Code html :

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

1
2
 
   <body onload="init"> <!-- pas bien -->

Code html :

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

1
2
 
   <body onload="if (truc) chose (); machin (); ..."> <!-- encore pire -->

Si vous suivez le mauvais exemple, vous n'aurez pas de sucette. Nah!

Le code qui figure dans le fichier *.js, en dehors de tout corp de fonction, est considéré un peu comme le code contenu entre le BEGIN ... END. d'un programe Pascal ou dans le main d'un programme C

Il n'y a plus nécéssité d'inclure le moindre bout de code dans le HTML, et il ne reste plus qu'un lien vers le ou les fichiers JavaScript (il peut y en avoir plusieurs, si l'application est complexe, il est plus aisé de répartire les fonctionnalités sur divers fichiers)

Note : ceci m'a été inspiré par un article sur le site Pompage (mais j'ai perdu l'URL de la page, sorry, I'm so sorry )

Quel contenu initial ?
Comme dit dans le topic, et comme rappelé par SpaceFrog, il faut un contenu initial, sinon firstChild n'existe pas. Mais alors quel contenu initial choisir ? Si le contenu initial n'est pas important (il ne s'affiche que transitoirement), il peut être les simples trois petits points dont je parlais. Mais on pourra aussi préférer, surtout si la page doit être référencer par les moteurs de recherche, initialisé avec une petite phrase décrivant le contenu variable (une sorte de de phrase décrivant l'aspect du contenu générique), car les robots d'exploration n'execute que trés rarement le JavaScript.

Il va de soit, que non seulement cette solution a le mérite de la séparation du contenu et du comportement, mais en plus, elle offre donc un contenu directement utilisable par les robots, ce que ne fait pas la solution d'intégré un code JavaScript d'initialisation du contenu directement dans le code HTML. Car pour les robots, le contenu initial est alors vide, et n'est absolument pas interprétable.

Il n'y a que du bon à appliquer cette règle de la séparation

Pourquoi séparer le contenu et le comportement ?
Réponse : parce que c'est plus crawler-friendly, et même aussi plus user-friendly dans certaines conditions (mais la première raison domine largement). De plus, le code ainsi séparé est plus lisible et plus facile à maintenir (car plus clair, moins brouillon et moins embrouillé), et si vous travailler en équipe, avec répartition des tâche, la personne en charge du HTML n'aura pas à bricoler avec le JavaScript, mais seulement avec des attributs id. Il sera possible, aprés s'être entendu sur les élément et leurs id (on l'aura fait en phase de design ou de spécification), de travailler alors chacun sur sa tâche, sans se marcher sur les pieds ni se nuire mutuellement (éditer un fichier à deux en même temps, n'est pas trés recommendable).

N.b. Je ne sais pas si j'ai bien fait de répondre ça ici , j'aurais peut-être dut ouvrir un topic exprêt, ... une autre note pour débutant-e ... je laisse à la modération le choix de déplacer ce post, si elle le juge pertinant.