DOM & javascript

**Denis Placé** · 25/04/2016, 16h42

Bonjour,

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

Code html :

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

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 ?

**Beginner.** · 25/04/2016, 17h35

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

**Watilin** · 25/04/2016, 17h55

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).

**Denis Placé** · 25/04/2016, 18h18

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

**Beginner.** · 25/04/2016, 18h36

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 html :

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

1
2
<html>
</html>

On se retrouve avec ça :

Code html :

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

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 html :

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

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>

**Beginner.** · 25/04/2016, 19h13

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 javascript :

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

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

**Watilin** · 25/04/2016, 20h14

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

). Le premier élément auquel on peut se rattacher est document.documentElement qui n’est autre que le <html>.

Code :

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

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

**Beginner.** · 25/04/2016, 21h31

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 html :

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

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

Avec pour Dom.js ceci :

Code javascript :

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

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 html :

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

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

**NoSmoking** · 25/04/2016, 22h38

Bonjour,
même en absence de balisage <body> ce code marche parfaitement

Code :

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

document.querySelector('body').appendChild( oElem);

**Beginner.** · 25/04/2016, 23h09

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

**Denis Placé** · 26/04/2016, 09h08

Bonjour,

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

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 html :

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

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 html :

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

1
2
3
4
5
<html>
<head> </head>
<body> </body>
<body> </body>
</html>

Ou est-ce que je fais une erreur ?

**melka one** · 26/04/2016, 12h07

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

**Denis Placé** · 26/04/2016, 12h52

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

DOM & javascript

JavaScript

Discussions similaires

Partager

Partager