Exercices sur le DOM

Détection du support DOM niveau 1 par le navigateur

Écrire une page xHTML 5 qui.

Détecte si le navigateur est conforme au DOM niveau 1.
Dans le cas ou la compatibilité est vérifiée une alerte javascript sera émise.

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Détection du support DOM niveau 1</title>
  <script type="text/javascript">
    <!--
    if (document.getElementById && document.createElement) alert("Ce navigateur est conforme au DOM niveau 1");
    -->
  </script>
</head>
<body>
 
<h1>Détection du support DOM niveau 1</h1>
 
<p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>

Lire toutes les propriétés d'un élément

Écrire une page xHTML 5 telle que celle ci :

contienne un élément de type <div> tel que :
- cet élément contienne du texte et des sous éléments de type <strong>,
- cet élément ait un attribut id="ma_div",
- cet élément ait un attribut class="ma_classe",
affiche par un script javascript l'ensemble des attributs et des enfants de cette div dans la page HTML.

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Affichage des caractéristiques élément par le DOM niveau 2.0</title>
  <script type="text/javascript">
    window.onload = function () {
    nd = document.getElementById('ma_div');
    var res = '';
    var all_attr = nd.attributes;
    for (var i=0; i != all_attr.length; i++) {
      var at = all_attr[i];
      res += 'ATTR '+at.nodeName+' = "'+at.nodeValue+'"\n';
    }
 
    var all_nodes = nd.childNodes;
    for (var i=0; i != all_nodes.length; i++) {
      var el = all_nodes[i];
      res += el.nodeName;
      if (el.nodeType==3)
	res += ' = "'+el.nodeValue+'"\n'; 
      else
	res += " --\n"; 
    }
 
    resnode = document.createElement('div');
    body = document.getElementsByTagName('body')[0];
    body.appendChild(resnode);
 
    titlenode = document.createElement('h2');
    titlenode.appendChild(document.createTextNode('Ceci et le contenu de la div'));
    contentnode = document.createElement('pre');
    contentnode.appendChild(document.createTextNode(res));
 
    resnode.appendChild(titlenode);
    resnode.appendChild(contentnode);
  }
  </script>
</head>
<body>
 
 <h1>Affichage des caractéristiques des éléments par le DOM niveau 2.0.</h1>
 <div class="ma_classe" id="ma_div">
    Bonjour à <strong>toutes</strong> et à <strong>tous</strong>.
 </div>
 
 <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide !</a></p>
</body>
</html>

HTML 5 : Détection de la présence de la géolocalisation par le navigateur

Écrire une page xHTML 5 telle que celle ci affiche une alerte dès son ouverture si le navigateur supporte la géolocalisation.

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="fr"/>
  <title>Détection du support de la géolocalisation</title>
  <script type="text/javascript">
    function supports_geolocation() {
      return navigator.geolocation;
    }
    window.onload = function() {
      if (supports_geolocation()) alert('support de la géoloclisation présent !');
    }
  </script>
</head>
<body>
 
  <h1>Détection du support de la géolocalisation.</h1>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide !</a></p>
</body>
</html>

HTML 5 : Détection de la présence d'un type d'entrée par le navigateur

Écrire une page xHTML 5 telle que celle ci affiche une alerte dès son ouverture si le navigateur ne supporte pas le type d'entrée color.

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Détection du support des entrées de type color</title>
  <script type="text/javascript">
    function supports_input_color() {
      var i = document.createElement("input");
      i.setAttribute("type", "color");
      return i.type !== "text";
    }
    window.onload = function() {
      if (!supports_input_color()) alert('pas de support des entrées de type color !');
    }
  </script>
</head>
<body>
 <h1>Détection du support des entrées de type <samp>color</samp>.</h1>
 
 <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide !</a></p>
</body>
</html>

HTML 5 : Détection de la présence des placeholders et de l'autofocus dans les entrées par le navigateur

Écrire une page xHTML 5 telle que celle ci affiche une alerte dès son ouverture si le navigateur ne supporte ni les placeholders ni l'autofocus dans les champs d'entrée (input) des formulaires (form).

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Détection du support des placeholders dans les entrées</title>
  <script type="text/javascript">
    function supports_input_placeholder() {
      var inpt = document.createElement('input');
      return 'placeholder' in inpt;
    }
    function supports_input_autofocus() {
      var inpt = document.createElement('input');
      return 'autofocus' in inpt;
    }
    window.onload = function() {
      if (!supports_input_placeholder() || !supports_input_autofocus()) alert('pas de support de placeholders ou autofocus.!');
    }
  </script>
</head>
<body>
 
 <h1>Détection du support des placeholders dans les entrées.</h1>
 
 <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide !</a></p>
</body>
</html>

voir le résultat

HTML 5 : Détection de la présence du type microdata par le navigateur

Écrire une page xHTML 5 telle que celle ci affiche une alerte dès son ouverture si le navigateur ne supporte pas les microdatas.

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Détection du support des microdata</title>
  <script type="text/javascript">
    function supports_microdata_api() {
      return !!document.getItems;
    }
    window.onload = function() {
     if (!supports_microdata_api()) alert('pas de support des microdatas !');
    }
  </script>
</head>
<body>
  <h1>Détection du support des <samp>microdata</samp>.</h1>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide !</a></p>
</body>
</html>

voir le résultat

Test des attributs non normalisés par le DOM `innerHTML` et `outerHTML`

Écrire une page xHTML 5 telle que celle-ci :

contienne un élément de type <div> tel que :
- cet élément contienne du texte et des sous éléments,
- cet élément ait un attribut id="ma_div",
affiche le contenu innerHTML de l'élément <div>,
affiche le contenu outerHTML de l'élément <div>.

Afin de permettre le séparation du HTML et du javascript on utilisera la méthode window.onload pour déclencher l'exécution des scripts.

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Affichage des caractéristiques élément par le DOM niveau 2.0</title>
  <script type="text/javascript">
    window.onload = function () {
      nd = document.getElementById('ma_div');
 
      inhtml  = nd.innerHTML;
      outhtml = nd.outerHTML;
 
      resnode = document.createElement('div');
      body = document.getElementsByTagName('body')[0];
      body.appendChild(resnode);
 
      firstnode = document.createElement('p');
      firstnode.innerHTML = '<h2>Ceci et le contenu innerHTML de la div</h2>';
      pre = document.createElement('pre');
      pre.appendChild(document.createTextNode(inhtml));
      firstnode.appendChild(pre);
 
      lastnode = document.createElement('p');
      lastnode.innerHTML = '<h2>Ceci et le contenu outerHTML de la div</h2><pre>';
      pre = document.createElement('pre');
      pre.appendChild(document.createTextNode(outhtml));
      lastnode.appendChild(pre);
 
      resnode.appendChild(firstnode);
      resnode.appendChild(lastnode);
    }
  </script>
</head>
<body>
 
 <h1>Affichage des caractéristiques des éléments par le DOM niveau 2.0.</h1>
 <div id="ma_div">
    Bonjour tout le monde !
 </div>
 
 <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide !</a></p>
</body>
</html>

Exercices xHTML : de DOM

Détection du support DOM niveau 1 par le navigateur

Fichier à produire :

voir le résultat

Lire toutes les propriétés d'un élément

Fichier à produire :

voir le résultat

HTML 5 : Détection de la présence de la géolocalisation par le navigateur

Fichier à produire :

voir le résultat

HTML 5 : Détection de la présence d'un type d'entrée par le navigateur

Fichier à produire :

voir le résultat

HTML 5 : Détection de la présence des placeholders et de l'autofocus dans les entrées par le navigateur

Fichier à produire :

voir le résultat

HTML 5 : Détection de la présence du type microdata par le navigateur

Fichier à produire :

voir le résultat

Test des attributs non normalisés par le DOM innerHTML et outerHTML

Fichier à produire :

voir le résultat

Test des attributs non normalisés par le DOM `innerHTML` et `outerHTML`