DOM & javascript

Version imprimable

25/04/2016, 16h42
Denis Placé

DOM & javascript
Bonjour,

Je commence une formation sur javascript et mon enseignant me demande de recréer la page dont le code est :
Code:

1 2 3 4 5 6 7 8 <html> <head> <title> Exercice</title> </head> <body style="font-size:15px; color:green"> <p id="p1">Exercice</p> </body> </html>
en développant le DOM en javascript.

Je COMMENCE ce langage et j'avoue que cette demande m'apparaît comme nébuleuse.....
Une petite recherche sur Google ne m'ayant été que peu éclairante, pourriez-vous me mettre sur la piste, svp ?
25/04/2016, 17h35
Beginner.

Salut,

Moi aussi je ne suis pas sûr de comprendre, pour exécuter le script il faut qu'il y ait au moins un document, non ?

En tous cas on peut avec du JS ajouter des éléments à un document avec entre autres les méthodes document.createElement et element.appendChild...
25/04/2016, 17h55
Watilin
Je sais pas si c’est exactement ce que te demande ton prof, mais moi je vois ça comme ça : tu dois construire un arbre DOM équivalent à celui qui est représenté par le code HTML donné. Pour ça il faut connaître les méthodes DOM nécessaires. Les deux plus importantes sont createElement et appendChild.

Si on « décrit » l’arbre DOM en français, ça donne à peu près ça :
- un élément <html>, dans lequel il y a :
  - un élément <head>
  - un élément <body>
- dans le <head> il y a un élément <title>
  - Le <title> contient un nœud texte (tu peux utiliser la propriété .textContent ou bien appeler createTextNode)
- le <body> a un attribut de style. La méthode bourrin c’est d’utiliser setAttribute, mais tu peux aussi affecter directement la propriété .style = "…" ou encore définir les différentes règles de style une par une : .style.fontSize = "15px", etc.
- dans le <body> il y a un <p>
  - Le <p> contient également un nœud texte
  - Il a également un attribut id
Beginner a raison, on n’a jamais besoin de créer une page entière, car un script s’exécute forcément dans le contexte d’une page. Les navigateurs construisent le DOM minimal nécessaire, ce qui fait qu’on a toujours au moins un élément <html> (la racine du document).
25/04/2016, 18h18
Denis Placé

Ok, ces 2 interventions me conviennent parfaitement. Merci beaucoup.:D

Comme Watilin l'a dit : "Les navigateurs construisent le DOM minimal nécessaire..." et effectivement je viens d'essayer Chrome avec une page contenant seulement la balise <html> eh bien lorsqu'on essai d'ajouter l’élément <body> avec du code JS il signale une erreur... C'est je pense parce qu'il a déjà ajouté un élément <body> !!! Pareil pour <head>...

En fait quand on essai d'afficher une page comme ça :
Code:

1 2 <html> </html>
On se retrouve avec ça :
Code:

1 2 3 4 5 6 7 8 <html> <head> </head> <body> </body> </html>
Il faudrait donc partir de ce minimum et ajouter les autres éléments... (et je pense qu'il faudra mettre le script dans le <body>)...

Par exemple pour le titre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> </head> <body> <script> var titre = document.createElement("title"); titre.textContent = "Exercice"; document.head.appendChild(titre); </script> </body> </html>

25/04/2016, 19h13
Beginner.
Citation:

Envoyé par Beginner.

Comme Watilin l'a dit : "Les navigateurs construisent le DOM minimal nécessaire..." et effectivement je viens d'essayer Chrome avec une page contenant seulement la balise <html> eh bien lorsqu'on essai d'ajouter l’élément <body> avec du code JS il signale une erreur... C'est je pense parce qu'il a déjà ajouté un élément <body> !!!

Ah non je viens de vérifier en mettant un breakpoint, au moment d’exécuter ceci :
Code:

1 2 var corps = document.createElement("body"); document.appendChild(corps);
Il signale une erreur à la deuxième ligne alors que le <body> n'est pas encore ajouté :

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

Je ne sais pas trop ce que signifie cette erreur (peut-être qu'il refuse d'office cette instruction même si le <body> n'est pas encore ajouté au document car ce dernier ne peut de toute façon n'avoir qu'un seul <body> ???) mais bon c'est bizarre de toute façon de vouloir ajouter un <body>...
25/04/2016, 20h14
Watilin
Je pense que document.body existe déjà… Mais peut-être que c’est dépendant de l’implémentation. Il serait prudent de tester son existence et de le rajouter s’il n’est pas là.
Et sinon, l’objet document lui-même n’est pas un nœud du DOM (je sais, c’est tordu, mais c’est comme ça :P). Le premier élément auquel on peut se rattacher est document.documentElement qui n’est autre que le <html>.
Code:

1 2 3 4 5 var corps = document.body; if (!corps) { corps = document.createElement("body"); document.documentElement.appendChild(corps); }

Merci et +1 ! Oui tu as raison pour document.documentElement, j'ai essayé et l'instruction document.documentElement.appendChild(corps); ajoute bel et bien un <body>...

Mais par contre quand on affiche une page comme ça (sans <body>) :
Code:

1 2 3 4 5 6 <html> <head> <script type="text/javascript" src="Dom.js"></script> </head> </html>
Avec pour Dom.js ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 // le titre : var titre = document.createElement("title"); titre.innerHTML = "Exercice"; document.head.appendChild(titre); var corps = document.body; if (!corps) { corps = document.createElement("body"); document.documentElement.appendChild(corps); } document.body.style.fontSize = "15px"; document.body.style.color = "green" ;
Chrome "fabrique" cette page :
Code:

1 2 3 4 5 6 7 8 9 10 11 <html> <head> <script type="text/javascript" src="Dom.js"></script> <title>Exercice</title> </head> <body style="font-size: 15px; color: green;"></body> <body></body> </html>
Il y a deux <body>, j'ai vérifié (avec le débogueur) la condition if (!corps) et elle est vraie car corps === null, ce qui est normal je pense car au moment de l’exécution du script il n'y a pas encore de <body>...

Chrome ajoute donc dans tous les cas un body...

25/04/2016, 22h38
NoSmoking
Bonjour,
même en absence de balisage <body> ce code marche parfaitement

Code:

document.querySelector('body').appendChild( oElem);
- The body element
- body – document body
25/04/2016, 23h09
Beginner.

Ah oui, en regardant ta réponse ici #2 je m'était demandé pourquoi tu n'avais pas utilisé ceci : document.body.appendChild(oBtn);...

Bon ben j'ai la réponse maintenant ! Merci et +1.

EDIT : merci aussi pour les liens intéressants...
26/04/2016, 09h08
Denis Placé
Bonjour,

Devant la difficulté, je pensais laisser tomber mais ma curiosité m'incite à reprendre courage et à essayer.

Citation:

Envoyé par Beginner.

Chrome "fabrique" cette page :

Je viens d'essayer et, que ce soit avec Chrome ou IE, je ne visualise que ce code (code généré, clic droit, source):
Code:

1 2 3 4 5 6 <html> <head> <script type="text/javascript" src="code.js"></script> </head> </html>
Par contre, l'inspecteur de Firefox me donne :
Code:

1 2 3 4 5 <html> <head> </head> <body> </body> <body> </body> </html>
Ou est-ce que je fais une erreur ?
26/04/2016, 12h07
melka one

attention afficher le code source de la page ne correspond pas a la page car il ne contient pas le code généré dynamiquement
26/04/2016, 12h52
Denis Placé

Finalement, j'étais en train de penser à ça.
Merci melka one.