Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Vos résultats de recherche

    Exemples

    Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des patterns en JavaScript pour manipuler l'objet de document.

    Exemple 1 : height et width

    L'exemple qui suit montre l'utilisation des propriétés height et width pour dimensionner des images de diverses tailles :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">

<head>
<title>Exemple d'utilisation de width/height</title>
<script type="text/javascript">
function init()
{
  var images = new Array(3);
  images[0] = document.getElementById("image1");
  images[1] = document.getElementById("image2");
  images[2] = document.getElementById("image3");
  var sortie = document.getElementById("sortie");
  var strHtml = "<ul>";
  for (var i = 0; i < images.length; i++)
    strHtml += "<li>image" + (i+1) + 
            ": height=" + images[i].height + 
            ", width=" + images[i].width + 
            ", style.height=" + images[i].style.height + 
            ", style.width=" + images[i].style.width + 
            "<\/li>";
  strHtml += "<\/ul>";
  sortie.innerHTML = strHtml;
}
</script>
</head>
<body onload="init();">

<p>Image 1 : ni hauteur, ni largeur, ni style
    <img id="image1" src="https://www.mozilla.org/images/mozilla-banner.gif">
</p>
<p>Image 2 : height="50", width="500", mais pas de style 
    <img id="image2" src="https://www.mozilla.org/images/mozilla-banner.gif" 
         height="50" width="500">
</p>
<p>Image 3 : ni height ni width, mais style="height: 50px; width: 500px;"
    <img id="image3" src="https://www.mozilla.org/images/mozilla-banner.gif" 
         style="height: 50px; width: 500px;">
</p>

<div id="sortie"> </div>
</body>
</html>

    height et width sont également des propriétés des éléments OBJECT et APPLET.

    Exemple 2 : attributs d'image

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">

<head>
<title>Modification de la bordure d'une image</title>
<script type="text/javascript">
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = width + "px";
}
</script>
</head>

<body>
<p>
  <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
height="100" alt="test de bordure">
</p>

<form name="formulaire">
  <p><input type="button" value="Définir une bordure de 20px" 
onclick="setBorderWidth(20);"> <input type="button" value="Définir une bordure de 5px" 
onclick="setBorderWidth(5);"></p>
</form>

</body>
</html>

    Exemple 3 : manipulation de styles

    Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">

<head>
<title>Exemple de modification de couleurs et de taille de police</title>
<script type="text/javascript">
function changerTexte() {
	var p = document.getElementById("pid");
	p.style.color = "blue"
	p.style.fontSize = "18pt"
}
</script>
</head>
<body>
<p id="pid" 
onclick="window.location.href = 'https://www.lemonde.fr/';">Un lien</p>
<form>
<p><input value="rec" type="button" onclick="changerTexte();"></p>
</form>
</body>
</html>

    Exemple 4 : utilisation de feuilles de style

    La propriété styleSheets de l'objet document renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets stylesheet, style et CSSRule, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.

    ss = document.styleSheets;
for (i = 0; i < ss.length; i++) {
  for(j = 0; j < ss[0].cssRules.length; j++) {
    dump( ss[i].cssRules[j].selectorText + "\n" );
  }
}

    Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :

    BODY { background-color: darkblue; }
P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
#lumpy { display: none; }

    Ce script affiche les lignes suivantes :

    BODY
P
#LUMPY

    Exemple 5 : propagation d'évènements

    Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction stopEvent, qui modifie la valeur de la cellule inférieure du tableau.

    Cependant, stopEvent appelle également une méthode d'objet event, event.stopPropagation, qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement onclick qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode stopEvent a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.

    <html>
<head>
  <title>Propagation d'évènements</title>

  <style type="text/css">
    #t-parent { border: 1px solid red }
    #c1 { background-color: pink; }
  </style>

  <script type="text/javascript">

  function stopEvent(evt) {
    c2 = document.getElementById("c2");
    c2.innerHTML = "hello";

    // ceci empêche t-parent de recevoir le clic. 
    evt.stopPropagation(); 
    alert("Propagation de l'évènement arrêtée.");
  }

  function load() {
    elem = document.getElementById("tbl1");
    elem.addEventListener("click", stopEvent, false);
  }
  </script>
</head>

<body onload="load();">

<table id="t-parent" onclick="alert('hello');">
  <tr id="tbl1">
    <td id="c1">un</td>
  </tr>
  <tr>
    <td id="c2">deux</td>
  </tr>
</table>

</body>
</html>

    Exemple 6 : getComputedStyle

    Cet exemple montre comment la méthode window.getComputedStyle peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut style ou à l'aide de JavaScript (c'est-à-dire, elem.style.backgroundColor="rgb(173, 216, 230)"). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe elem.style, dont les propriétés sont listées dans la liste des propriétés DOM CSS.

    getComputedStyle() renvoie un objet ComputedCSSStyleDeclaration, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode getPropertyValue() comme montré dans l'exemple suivant.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">

<head>
 <title>getComputedStyle example</title>

 <script type="text/javascript">
   function cStyles() 
  {
   var RefDiv = document.getElementById("d1");

   var txtHeight = document.getElementById("t1");
   var h_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
   txtHeight.value = h_style;

   var txtWidth = document.getElementById("t2");
   var w_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
   txtWidth.value = w_style;

   var txtBackgroundColor = document.getElementById("t3");
   var b_style = 
document.defaultView.getComputedStyle(RefDiv,
null).getPropertyValue("background-color");
   txtBackgroundColor.value = b_style;
  }
 </script>

 <style type="text/css">
   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); 
height: 20px; max-width: 20px; }
 </style>

</head>

<body>

<div id="d1">&nbsp;</div>

<form action="">
<p><button type="button" onclick="cStyles();">getComputedStyle</button>
  height<input id="t1" type="text" value="1">
  max-width<input id="t2" type="text" value="2">
  bg-color<input id="t3" type="text" value="3"></p>
</form>

</body>
</html>

    Exemple 7 : affichage des propriétés d'un objet event

    Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet event window.onload et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle for..in pour parcourir les propriétés d'un objet et obtenir leurs valeurs.

    Les propriétés des objets event diffèrent sensiblement entre les différents navigateurs, la spécification W3C DOM 2 Events liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.

    Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "https://www.w3.org/TR/html4/strict.dtd">

<title>Affichage des propriétés d'un évènement</title>

<style type="text/css">
  table {border-collapse: collapse;}
  thead {font-weight: bold;}
  td {padding: 2px 10px 2px 10px;}
  .odd {background-color: #efdfef;}
  .even {background-color: #ffffff;}
</style>

<script type="text/javascript">

function showEventProperties(e)
{
  function addCell(row, text) {
    var cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  document.getElementById('eventType').innerHTML = e.type;

  var e = e || window.event;
  var table = document.createElement('table');
  var thead = table.createTHead();
  var row = thead.insertRow(-1);
  var lableList = ['#', 'Propriété', 'Valeur'];
  var len = lableList.length;

  for (var i=0; i<len; i++) { 
    addCell(row, lableList[i]);
  }

  var tbody = document.createElement('tbody');
  table.appendChild(tbody);

  for (var p in e) {
    row = tbody.insertRow(-1);
    row.className = (row.rowIndex % 2)? 'odd':'even';
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, e[p]);
  }

  document.body.appendChild(table);
}
window.onload = function(event){
  showEventProperties(event);
}
</script>

<h1>Propriétés de l'objet DOM Event <span id="eventType"></span></h1>

    Exemple 8 : utilisation de l'interface DOM Table

    L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont table.insertRow et row.insertCell.

    Pour ajouter une ligne et quelques cellules à un tableau existant :

    <table id="table0">
 <tr>
  <td>Ligne 0 Colonne 0</td>
  <td>Ligne 0 Colonne 1</td>
 </tr>
</table>

<script type="text/javascript">

var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell, text;
for (var i=0; i<2; i++) {
  cell = row.insertCell(-1);
  text = 'Ligne ' + row.rowIndex + ' Colonne ' + i;
  cell.appendChild(document.createTextNode(text));
}

</script>

    Notes

    • N'utilisez jamais la propriété innerHTML d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.
    • Si vous utilisez les méthodes DOM Core document.createElement et element.appendChild pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément tbody dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément table (les lignes seront ajoutées au dernier élément tbody).
    • Un certain nombre d'autres méthodes utilitaires faisant partie de l'interface table peuvent être utilisées pour créer et modifier des tableaux.
     

    Étiquettes et contributeurs liés au document

    Étiquettes : 
     Contributeurs à cette page : teoli, khalid32, BenoitL, Domif, Mgjbot, Fredchat
     Dernière mise à jour par : teoli,