Manipulation du DOM
Vous avez vu précédemment que les frameworks JavaScript facilitent l'obtention d'éléments spécifiques à l'aide de sélecteurs et de la traversée DOM . Cependant, afin de modifier le contenu et l'apparence d'éléments spécifiques sur une page Web, vous devez manipuler le DOM et appliquer les modifications. Utiliser du JavaScript pur représenterait beaucoup de travail, mais heureusement, la plupart des frameworks JavaScript fournissent des fonctions utiles qui facilitent cette tâche.
Supposons que vous ayez une boîte avec l'ID the-box.
<div id="the-box">Le message va ici</div>
Utilisez jQuery pour changer son texte en « Le message va ici », qui peut être facilement utilisé comme ceci :
$('#the-box').html('Ceci est le nouveau message !');
En fait, vous pouvez utiliser du code HTML dans les fonctions et il sera analysé par le navigateur, par exemple :
$('#the-box').html('Ceci est le <strong>nouveau</strong> message !');
Dans cet exemple, le contenu de l'élément DIV ressemble à ceci :
<div id="the-box">Voici le <strong>nouveau</strong> message !'</div>
Bien entendu, dans l'exemple, vous devez utiliser des caractères spéciaux tels que supérieur ou inférieur à, plutôt que de spécifier des codes d'entité HTML spéciaux. Vous pouvez plutôt utiliser la fonction texte de jQuery :
$('#la-boîte').text('300 >200');
Le code après mise à jour de l'élément div est le suivant :
<div id="the-box">300 > 200</div>
Dans l'exemple ci-dessus, le contenu existant est remplacé par du nouveau contenu. Que faire si vous souhaitez simplement ajouter des informations au texte ? Heureusement, jQuery fournit la fonction append à cet effet.
$('#the-box').append(', voici le message');
Après avoir effectué les opérations ci-dessus sur le div d'origine, le contenu de l'élément div ressemble à ceci :
<div id="the-box">Le message va ici, voici le message</div>
Au lieu d’ajouter, vous pouvez ajouter du contenu au début, en l’insérant avant le contenu existant plutôt qu’après. De plus, jQuery fournit des fonctions pour insérer du contenu dans un élément donné, avant ou après. Il existe également des fonctions pour remplacer du contenu, effacer du contenu, supprimer des éléments, cloner des éléments, etc.
En plus des fonctions de manipulation DOM, les frameworks JavaScript contiennent généralement plusieurs fonctions permettant de manipuler les styles et les classes d'éléments. Par exemple, vous disposez d’un tableau qui met en surbrillance une ligne lorsque la souris la survole. Vous pouvez créer une classe spéciale nommée hover que vous pouvez ajouter dynamiquement à une ligne. À l'aide de YUI, vous pouvez utiliser le code suivant pour déterminer si la ligne a un nom de classe de survol. Si c'est le cas, elle sera ignorée. Sinon, elle sera ajoutée.
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
De même, la plupart des frameworks JavaScript disposent de fonctions intégrées pour manipuler le CSS.