DOM - Exemple plus complexe (chaine HTML et styles)

react-tuto/src/markdown/2. Manipuler le HTML/04. Construire du HTML.md

@@ -0,0 +1,17 @@
+On va effectuer des manipulations plus complexes !
+
+```html
+<ul id="liste"></ul>
+<script>
+var listeElem = document.getElementById('liste');
+var personnes = ['Jack', 'Rose'];
+var listeHtml = '';
+for(var p = 0 ; p < personnes.length ; p++) {
+  listeHtml += '<li>' + personnes[p] + '</li>';
+}
+listeElem.innerHTML = listeHtml;
+</script>
+```
+
+Ici on part d'une chaîne vide, et on la remplit en bouclant sur la liste de personnes.
+On ajoute le tout à la liste `ul` récupérée via `getElementById()`.

react-tuto/src/markdown/2. Manipuler le HTML/05. Manipuler les styles.md

@@ -0,0 +1,17 @@
+On continue sur l'exemple précédent. À la fin du script, ajoute :
+```javascript
+var items = document.getElementsByTagName('li');
+for(var i = 0 ; i < items.length ; i++) {
+  items[i].style.color = 'white';
+  items[i].style.background = '#89a';
+}
+```
+
+* Remarque qu'on a bouclé sur `items` <em>exactement</em> comme on l'aurait fait
+avec un tableau. Pour autant, ce n'est <em>pas</em> un tableau, et des méthodes
+marchant sur un tableau ne marcheraient pas ici.
+* On affecte individuellement les propriétés de style. Elles doivent te rappeler
+quelque chose puisque tu connais CSS !
+* Note qu'on a utilisé deux façons de définir des couleurs :
+    * En utilisant une couleur "standard" comme `'white'`.
+    * En utilisant un code couleur hexadécimal.