L’accès aux éléments HTML en Javascript

L’accès aux éléments HTML en Javascript

  1. Objectif

    • Etre capable d’utiliser les éléments d’accès aux HTML en Javascript
  2. Introduction

    • L’accès aux éléments HTML en Javascript
    • Une page HTML est ensemble d’éléments ou d’objets. Ces éléments peuvent être par exemple une balise de titre, un paragraphe ou un champ de formulaires.
    • Cet ensemble d’élément constitue ce qu’on l’appelle le DOM de la page, qui est le Document Object



  3. Accès aux éléments à partir de l’ensemble du document

    • L’objet document est un objet important, qui représente l’ensemble de l’arborescence du document analysé.
    • Il possède de nombreuses propriétés et méthodes. Cinq de ces dernières permettent de « pointer » directement un ou plusieurs éléments dans le document.
      1. La méthode getElementById
        • Fonction: permet de sélectionner un élément d’identifiant donné dans une page.
        • Exemple, si on a dans la page
          <p id="intro">(...)</p>, document.getElementById("intro")

          permettra de sélectionner précisément l’élément p en question.

      2. La méthode getElementsByName
        • Fonction: permet de sélectionner les éléments portant un nom donné dans une page ; mais cette méthode, survivance de Netscape, n’est pas supportée par Internet Explorer ;
        • Exemple
        • <form name="repas">
             <input type="checkbox" name="dessert" value="Fraise"> Fraise <BR>
             <input type="checkbox" name="dessert" value="Banane"> Banane <BR>
             <input type="checkbox" name="dessert" value="Pomme"> Pomme <BR>
          </form>
          <script type="text/javascript">
             console.log(typeof document.getElementsByName("dessert"));
             document.getElementsByName("dessert")[0].checked = true;
             document.getElementsByName("dessert")[1].checked = true;
             document.getElementsByName("dessert")[2].checked = true;
          </script>
      3. La méthode getElementsByTagName
        • Fonction: permet de sélectionner les éléments portant un nom de balise donné dans une page.
        • Exemple
        • <script type="text/javascript">    
             var divs=document.getElementsByTagName("div");
             document.write("Il y a "+divs.length+" éléments div HTML dans cette page");
          </script>
      4. La méthode querySelector
        • Fonction: permet de cibler directement le premier élément d’un ensemble de nœuds.
        • prend en argument une expression CSS
        • Exemple
          document.querySelector("#truc");

          Permet de sélectionner l’élément d’identifiant truc, mais document.querySelector(“.machin”); ne sélectionne que le premier élément de classe machin.

      5. La méthode querySelectorAll
        • Fonction: permet de cibler tous les éléments d’un ensemble de nœuds.
        • prend en argument une expression CSS,
        • Exemple ,
          document.querySelectorAll("#truc");

          Renvoie un tableau d’un item contenant l’élément d’identifiant truc, et document.querySelectorAll(“.machin”); renvoie un tableau contenant tous les éléments de classe machin.

      Source:http://www.gchagnon.fr/cours/dhtml/introdom.html

  4. Accès aux nœuds à partir d’un élément quelconque d’un document

    • La méthode getAttribute(nom_d_attribut) permet de sélectionner un attribut particulier d’un élément déterminé.
    • La méthode getAttribute(nom_d_attribut) retourne la valeur de l’attribut nomAttribut de l’objet HTML objet.
    • Il est possible de vérifier l’existence de l’attribut avec hasAttribute().
  5. Exemple

    • l’exemple suivant montre comment colorer un div en cliquant sur un bouton
    • <!doctype>
      <html>
      <head>
      <title> JavaScript</title>
      <meta charset="UTF-8">
      <style>
      div{width:200px; height:20px;
          border: 1px solid black;
          margin-bottom:10px;
      }
      </style>
      </head>
      <body>
      <div></div>
      <div id="couleur"></div>
      <div></div>
      <button type="button" onclick="colorier()"> Colorier</button>
      <script>
      function colorier(){
      document.getElementById("couleur").style.backgroundColor="rgb(195,215,235)";
      }
      </script>
      </body>
      </html>
      

      L’accès aux éléments HTML en Javascript



Abonnez vous à notre chaîne YouTube gratuitement