Accès aux balises DIV en JavaScript

shiftcode · Message par **shiftcode** » 10 déc. 2004, 11:13

Bonjour, je viens de mettre à jour ce qui pour moi est un bug, mais qui a peut-être une explication. Voici mon code:

<body>
<script language="JavaScript">
document.write('<div id="id_js">id javascript</div>');
document.getElementById("id_js").innerHTML   = "Javascript div modified";
document.getElementById("id_html").innerHTML = "HTML div modified";
</script>
<div id="id_html">id html</div>
</body>

Dans ce code, la balise DIV créée par le script (id_js) voit son contenu changer, mais rien ne se passe pour le contenu de la balise DIV codée en HTML (id_html). La console JavaScript fournit le message suivant :

Erreur : document.getElementById("id_html") has no properties
Fichier Source : file:///C:/tmp/BugFireFox.html
Ligne : 5

Ce code fonctionne sous Netscape 6, Opera 7, ie 5, 5.5 et 6. Quelqu'un a-t-il une idée?

bobo · Message par **bobo** » 10 déc. 2004, 11:19

La raison est simple, au moment de l'exécution du script, ta div "id_html" n'existe pas encore.
Si tu la places avant l'élément <script>, tu constateras que le script fonctionne.
Sinon, il faut placer ton code dans une fonction appelée par l'événement onload.

olab · Message par **olab** » 10 déc. 2004, 11:23

Je pense que lorsque ton script est exécuté, le div id_html n'a pas encore été chargé dans l'arbre dom. D'ailleurs tu ne dois pas utiliser ton javascript comme ça, mais plutôt :

Code : Tout sélectionner

<script type="text/javascript">
var divid = new document.createElement("div");
divid.setAttribute("id", "id_js");
divid.setAttribute("innerHTML", "id javascript");
// et après tu l'ajoute à un élément parent : genre body.appendElement(divid)
document.getElementById("id_js").innerHTML   = "Javascript div modified";
document.getElementById("id_html").innerHTML = "HTML div modified";
</script>

Bon il y a peut être des erreurs dans le code, j'ai tapé ça à l'arrache, mais l'idée est là.

shiftcode · Message par **shiftcode** » 10 déc. 2004, 18:54

Oh my god! Il serait donc possible d'écrire proprement en JavaScript?

Je ne connaissais pas cette façon d'écrire du code dynamique, mais je l'avais un peu préssenti en zyeutant l'explorateur DOM de Monsieur FireFox. C'est un peu plus structuré, et çà ressemble étrangement à une approche Java du langage.

Bon, passons là dessus. En effet, çà marche beaucoup mieux après avoir déplacé le code JavaScript. Ce qui me faisait enrager, c'est que je voyais bien les objets dans l'explorateur JavaScript, mais une fois la page chargée! J'ai eu cette idée de déplacer le code peu de temps après avoir posté cette requète, par un vieux relent de souvenir de codage JavaScript au temps de Netscape 4.5 (beurk!)

Maintenant, tout fonctionne correctement. Merci à vous. Mon site n'a pas nécessité beaucoup de modifications pour marcher sous FireFox (merci DOM!) cf ici: http://mdelamare.free.fr/index.php?page ... le#firefox

C'est cool. Moi, je l'aime bien, comme navigateur. Mais j'ai encore de vielles habitudes avec Crazy Browser (moteur Internet Explorer + support des onglets + filtre popup + failles de sécurité d'ie

).

Bobe · Message par **Bobe** » 10 déc. 2004, 21:07

Attention, la propriété innerHTML n'est pas normalisée, il ne faut pas l'utiliser.

Les outils normalisés pour modifier dynamiquement un document:
http://www.yoyodesign.org/doc/w3c/dom2/ ... rview.html

PsyDk · Message par **PsyDk** » 10 déc. 2004, 23:29

Vi, on en fait des choses avec le DOM. Adieu document.write, adieu innerHTML. Voici un script qui crée un paragraphe avec du texte dedans :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Title</title>

<script type="text/javascript">
function OnDocumentLoaded()
{
	var p = document.createElement("p");
	var text = document.createTextNode("zouli texte");
	p.appendChild(text);

	var aBodies = document.getElementsByTagName("body");
	aBodies[0].appendChild(p);
}
</script>
</head>

<body onload="OnDocumentLoaded()">
</body>

</html>

Et voici mon site de référence en la matière : http://www.mozilla.org/docs/dom/domref/

Invité · Message par **Invité** » 11 déc. 2004, 10:23

C'est cool tout çà. Ce qui me gène toujours, c'est que le document auquel tu fais allusion, PsyDk, s'appelle Gecko DOM Reference. Je suis face à un dileme, celui de lire une doc bien construite mais pour un navigateur particulier, ou celui de lire une doc pour tous les navigateurs prétendus "DOM compliant", mais émanant du W3C, c'est à dire imbitable pour le commun des programmeurs, et qui en plus n'est pas très bien structuré

Bon, c'est promis, je ferai de mon mieux pour coder plus proprement, ce qui nous facilitera les choses par la suite. En ce moment, on se pose une grosse question au boulot. Faut-il rendre nos applications web extranet compatibles avec FireFox, sachant qu'on ne sait pas évaluer une telle charge de travail, et qu'on ne sait pas encore pour quelle portion de la population on travaille.
Tiens, je vais lancer un troll sur ce sujet

PsyDk · Message par **PsyDk** » 11 déc. 2004, 11:40

Yep, c'est le Gecko Dom, donc il faut faire attention. Mais comme Gecko est très proche des standards Web, tu n'as pas trop à te faire de soucis. Ce document est tellement agréable à lire que je prends quand même ce petit risque

shiftcode · Message par **shiftcode** » 13 déc. 2004, 08:43

Oui, risque très limité si tu testes ton code sur les autres navigateurs pas la suite.

Message par **Benoit** » 14 déc. 2004, 11:33

Anonymous a écrit :C'est cool tout çà. Ce qui me gène toujours, c'est que le document auquel tu fais allusion, PsyDk, s'appelle Gecko DOM Reference. Je suis face à un dileme, celui de lire une doc bien construite mais pour un navigateur particulier, ou celui de lire une doc pour tous les navigateurs prétendus "DOM compliant", mais émanant du W3C, c'est à dire imbitable pour le commun des programmeurs, et qui en plus n'est pas très bien structuré

Si je puis me permettre, bien que ça s'appelle "Gecko DOM Reference", il y a un lien en bas de chaque page vers la spécification correspondante. Donc oui tu peux faire relativement confiance à ce guide et vérifier si tu as un doute.

Exemple pour innerHTML qui n'a pas de spécification pour le moment (je pense une est en cours dans le cadre de la spécification webapps du WHATwg) : http://www.mozilla.org/docs/dom/domref/ ... ml#1027694

Geckozone

Accès aux balises DIV en JavaScript

Accès aux balises DIV en JavaScript

Qui est en ligne ?