Labo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DOM 1</title>
  <script type="text/javascript">
	
  </script>
  <style type="text/css">
    .td{
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>Bonjour Groupe.</h1>

  <ul id="maliste" style="background-color:#d5f4e6;">
    <li>un</li>
    <li id="monitem">deux</li>
    <li>trois</li>
  </ul>

  <table border="1">
    <tr><td id="1"></td><td id="2"></td><td id="3"></td></tr>
    <tr><td class="td"></td><td class="td"></td><td class="td"></td></tr>
    <tr><td></td><td></td><td></td></tr>
  </table>

  <br>

  <input type="checkbox" checked>
</body>
</html>

Exercice 1

En utilisant le code ci-dessus, sélectionnez le <ul> et affichez le dans la console.

See the Pen 701-12-ex1 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 2

Sélectionnez tous les <li>, vous les aurez sous la forme d’un tableau, affichez le contenu de chacun de li dans la console.

See the Pen 701-12-ex1 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 3

Affichez un texte différent dans chacune des cases de la première ligne du tableau.

Affichez “Cours 701” dans les cases de la deuxième ligne du tableau.

Affichez un ‘X’ dans les cases de la dernière ligne.

See the Pen 701-12-ex3 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 4

Affichez le contenu de la balise h1 dans la console puis modifiez ce contenu pour obtenir “Bonjour groupe du cours 701”.

Affichez le code source de la page. Que contient-il? Où voyez-vous ce que vous avez modifié?

See the Pen 701-12-ex1 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 5

Ajoutez une image dans chaque case de la dernière ligne du tableau.

See the Pen 701-12-6 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

-->

Exercice 6

Supprimez le style des cases de la deuxième ligne du tableau.

See the Pen 701-12-7 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 7

Ajoutez un style en-ligne pour mettre un cadre à chacune des images.

See the Pen 701-12-8 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 8

Supprimez la première ligne du tableau.

See the Pen 701-12-9 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 9

Lisez l’attribut checked du champs input et affichez le dans la console.

Supprimez le.

See the Pen 701-12-10 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 10

À l’aide de getElementsByTagName, récupérez tous les li. Parcourez le tableau à l’aide d’une boucle while et affichez leur contenu dans la console.

See the Pen 701-12-11 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

Exercice 11

À l’aide d’une boucle while, créez un tableau contenant deux valeurs aléatoires uniques comprises entre 0 et 2.

Affichez un ‘x’ rouge dans les cases dont l’id correspond dans le tableau HTML.

See the Pen 701-12-12 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.