Section courante

A propos

Section administrative du site

document.getElementById

 Demande l'élément par Id du document
JavaScript IE5+, Netscape 6+, Mozilla 1+, FireFox 1+, Opera 5+, Chrome, Safari

Syntaxe

function getElementById(id)

Paramètres

Paramètre Description
id Ce paramètre permet d'indiquer l'attribut de la balise, soit son «ID=».

Retour

Propriété de l'objet Description
contentDocument Cette propriété permet de retourner un objet de équivalent à «document» mais pour la balise seulement. Utilisé surtout pour les éditeurs WYSIWYG sous FireFox.
contentWindow Cette propriété permet de retourner un objet de équivalent à «window» mais pour la balise seulement. Utilisé surtout pour les éditeurs WYSIWYG sous FireFox.
disabled Cette propriété permet de fixer ou d'indiquer la désactivation de l'objet. Il est plutôt préférable d'utiliser l'instruction suivant si possible «document.getElementById('balise').setAttribute('readonly', 'readonly');».
id Cette propriété permet de fixer ou d'indiquer l'identificateur de l'objet.
innerHTML Cette propriété permet de fixer ou d'indiquer le contenu brute HTML de l'objet.
innerText Cette propriété permet de fixer ou d'indiquer le contenu texte de l'objet.
offsetTop Cette propriété permet de fixer ou d'indiquer la coordonnées vertical du haut de l'objet.
onmousedown Cette propriété permet de fixer ou d'indiquer la méthode exécuté lors de l'enfoncement du bouton de souris de l'objet.
onmousemove Cette propriété permet de fixer ou d'indiquer la méthode exécuté lors du déplacement du pointeur de souris de l'objet.
onmouseup Cette propriété permet de fixer ou d'indiquer la méthode exécuté lors du relâchement du bouton de souris de l'objet.
onsubmit Cette propriété permet de fixer ou d'indiquer la méthode exécuté lors de la soumission de l'objet.
parentNode Cette propriété permet de retourner le noeud parent de l'objet.
style Cette propriété permet de fixer ou d'indiquer le style CSS de l'objet.
value Cette propriété permet de fixer d'indiquer la valeur de l'objet.

Méthode

Méthode de l'objet Description
function addEventListener(nom,fonction,useCapture) Cette méthode permet d'ajouter un événement à l'objet.
function appendChild(nouveau) Cette méthode permet d'ajouter un noeud enfant.
function focus() Cette méthode permet d'amener le contrôle du clavier sur l'objet de fenêtre.
function getAttribute(attributeName) Cette méthode permet de demander la valeur d'un attribut de l'objet. Les attributs varient en fonctions des balises: «ALIGN», «TITLE»,...
function removeEventListener(nom,fonction,useCapture) Cette méthode permet de supprimer un événement de l'objet.
function removeEventListener(nom,fonction,useCapture) Cette méthode permet de supprimer un événement de l'objet.
function setAttribute(attributename, value, [iecaseflag]) Cette méthode permet de fixer la valeur d'un attribut de l'objet. Les attributs varient en fonctions des balises: «ALIGN», «TITLE»,...

Description

Cette méthode permet de demander l'objet associé à une balise à partir de l'identificateur spécifié (soit l'attribut «ID=» dans la balise).

Exemples

Voici un exemple permettant de rechercher dans le deuxième élément de même nom avec son ID (soit l'équivalent jQuery «value = $("input[id^='listfirstname[]']").eq(I-1).val();»)  :

  1. <form name="currEdit" method="post">
  2. <input type="hidden" id="listfirstname[]" name="listfirstname[]" value="prenom1" />
  3. <input type="hidden" id="listfirstname[]" name="listfirstname[]" value="prenom2" />
  4. <div id="firstname">ABC</div>
  5. </form>
  6. <script language="JavaScript" type="text/javascript">
  7. function getArrayElementById(strname,arraypos) {
  8.      var J = 1;
  9.      if(document.forms[0] != null) {
  10.           for (var i = 0; i < document.forms[0].elements.length; i++) {
  11.                if(document.forms[0].elements[i].id == strname) {
  12.                     if(J == arraypos) return document.forms[0].elements[i].value;
  13.                     J++;
  14.                }
  15.           }
  16.      }
  17.      return "undefined";
  18. }
  19.  
  20. document.getElementById("firstname").innerHTML = getArrayElementById('listfirstname[]',2);
  21. </script>

on obtiendra le résultat suivant :

prenom2

Cet autre exemple permet d'exploiter cette méthode afin d'afficher uniquement les provinces ou états associés avec le pays :

  1. <table>
  2.      <tr>
  3.            <td><label for="country_id">Pays&nbsp;:</label></td>
  4.            <td>
  5.                <select name="country_id" class="inputText" id="country_id" style="width:300px;" onchange="updateThisProvince('country_id','province_id');">
  6.                     <option value="0">&lt;Faire un choix&gt;</option>
  7.                     <option value="8">Canada</option>
  8.                     <option value="11">États-Unis</option>
  9.                </select>
  10.           </td>
  11.      </tr>
  12.      <tr>
  13.              <td><label for="province_id">Province&nbsp;:</label></td>
  14.             <td>
  15.                     <select name="province_id" class="inputText" id="province_id" style="width:300px;">
  16.                          <option value="0">&lt;Faire un choix&gt;</option>
  17.                     </select>
  18.                </td>
  19.          </tr>
  20. </table>
  21. <script language="javascript">
  22.      function AddTagOption(list,valeur,texte) {
  23.           var option = document.createElement("OPTION");
  24.              option.value = valeur;
  25.              option.text  = texte;
  26.              list.options.add(option);
  27.      }
  28.      
  29.      function updateThisProvince(country_id,province_id) {
  30.           var country_id = document.getElementById(country_id).value; 
  31.           var list = document.getElementById(province_id);
  32.           for(var i = list.options.length - 1; i > 0; i--) list.remove(i);
  33.           if(country_id == '11') AddTagOption(list,16,'Alabama');
  34.           if(country_id == '11') AddTagOption(list,17,'Alaska');
  35.           if(country_id == '8') AddTagOption(list,1,'Alberta');
  36.           if(country_id == '11') AddTagOption(list,18,'Arizona');
  37.           if(country_id == '11') AddTagOption(list,19,'Arkansas');
  38.           if(country_id == '106') AddTagOption(list,80,'Bangkok');
  39.           if(country_id == '11') AddTagOption(list,20,'Californie');
  40.           if(country_id == '11') AddTagOption(list,21,'Caroline du Nord');
  41.           if(country_id == '11') AddTagOption(list,22,'Caroline du Sud');
  42.           if(country_id == '8') AddTagOption(list,2,'Colombie Britannique');
  43.           if(country_id == '11') AddTagOption(list,23,'Colorado');
  44.           if(country_id == '11') AddTagOption(list,24,'Connecticut');
  45.           if(country_id == '11') AddTagOption(list,25,'Dakota du Nord');
  46.           if(country_id == '11') AddTagOption(list,26,'Dakota du Sud');
  47.           if(country_id == '11') AddTagOption(list,27,'Delaware');
  48.           if(country_id == '155') AddTagOption(list,76,'Derby');
  49.           if(country_id == '11') AddTagOption(list,81,'Distric of Colombia');
  50.           if(country_id == '175') AddTagOption(list,73,'Distrito Especial');
  51.           if(country_id == '11') AddTagOption(list,28,'Floride');
  52.           if(country_id == '11') AddTagOption(list,29,'Georgie');
  53.           if(country_id == '11') AddTagOption(list,30,'Hawaii');
  54.           if(country_id == '11') AddTagOption(list,31,'Idaho');
  55.           if(country_id == '8') AddTagOption(list,3,'Ile-du-Prince-Édouard');
  56.           if(country_id == '11') AddTagOption(list,32,'Illinois');
  57.           if(country_id == '11') AddTagOption(list,33,'Indiana');
  58.           if(country_id == '11') AddTagOption(list,34,'Iowa');
  59.           if(country_id == '11') AddTagOption(list,35,'Kansas');
  60.           if(country_id == '11') AddTagOption(list,36,'Kentucky');
  61.           if(country_id == '11') AddTagOption(list,37,'Louisiane');
  62.           if(country_id == '150') AddTagOption(list,72,'Madrid');
  63.           if(country_id == '11') AddTagOption(list,38,'Maine');
  64.           if(country_id == '8') AddTagOption(list,4,'Manitoba');
  65.           if(country_id == '11') AddTagOption(list,39,'Maryland');
  66.           if(country_id == '11') AddTagOption(list,40,'Massachusetts');
  67.           if(country_id == '11') AddTagOption(list,41,'Michigan');
  68.           if(country_id == '11') AddTagOption(list,42,'Minnesota');
  69.           if(country_id == '11') AddTagOption(list,43,'Mississippi');
  70.           if(country_id == '11') AddTagOption(list,44,'Missouri');
  71.           if(country_id == '11') AddTagOption(list,45,'Montana');
  72.           if(country_id == '11') AddTagOption(list,46,'Nebraska');
  73.           if(country_id == '11') AddTagOption(list,47,'Nevada');
  74.           if(country_id == '11') AddTagOption(list,48,'New Hampshire');
  75.           if(country_id == '11') AddTagOption(list,49,'New Jersey');
  76.           if(country_id == '11') AddTagOption(list,51,'New York');
  77.           if(country_id == '11') AddTagOption(list,77,'North Las Vegas');
  78.           if(country_id == '11') AddTagOption(list,50,'Nouveau Mexique');
  79.           if(country_id == '8') AddTagOption(list,5,'Nouveau-Brunswick');
  80.           if(country_id == '8') AddTagOption(list,6,'Nouvelle-Écosse');
  81.           if(country_id == '157') AddTagOption(list,150,'NSW');
  82.           if(country_id == '8') AddTagOption(list,7,'Nunavut');
  83.           if(country_id == '11') AddTagOption(list,52,'Ohio');
  84.           if(country_id == '11') AddTagOption(list,53,'Oklahoma');
  85.           if(country_id == '8') AddTagOption(list,8,'Ontario');
  86.           if(country_id == '11') AddTagOption(list,54,'Oregon');
  87.           if(country_id == '11') AddTagOption(list,55,'Pennsylvanie');
  88.           if(country_id == '8') AddTagOption(list,9,'Québec');
  89.           if(country_id == '11') AddTagOption(list,56,'Rhode Island');
  90.           if(country_id == '10') AddTagOption(list,232,'Riviera Nayarit');
  91.           if(country_id == '125') AddTagOption(list,78,'Rungis Cedex');
  92.           if(country_id == '8') AddTagOption(list,10,'Saskatchewan');
  93.           if(country_id == '73') AddTagOption(list,79,'Shenzen');
  94.           if(country_id == '11') AddTagOption(list,57,'Tennessee');
  95.           if(country_id == '8') AddTagOption(list,11,'Terre-Neuve');
  96.           if(country_id == '8') AddTagOption(list,12,'Territoires du Nord Ouest');
  97.           if(country_id == '11') AddTagOption(list,58,'Texas');
  98.           if(country_id == '11') AddTagOption(list,59,'Utah');
  99.           if(country_id == '11') AddTagOption(list,60,'Vermont');
  100.           if(country_id == '11') AddTagOption(list,61,'Virginie');
  101.           if(country_id == '11') AddTagOption(list,63,'Virginie Occidentale');
  102.           if(country_id == '11') AddTagOption(list,62,'Washington');
  103.           if(country_id == '11') AddTagOption(list,64,'Wisconsin');
  104.           if(country_id == '11') AddTagOption(list,65,'Wyoming');
  105.           if(country_id == '8') AddTagOption(list,13,'Yukon');
  106.      }
  107. </script>

on obtiendra le résultat suivant :

Voir également

Référence des classes de balises (objets de balises)

Dernière mise à jour : Vendredi, le 8 août 2014