Manipulations du DOM avec jQuery - 1
Manipulations du DOM avec jQuery
Manipulations du DOM avec jQuery - 1 est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 1 leçons au total.
Introduction aux méthodes
Bonjour,
Jusqu'à présent, nous avons vu à quoi sert jQuery et comment utiliser le sélecteur.
Voyons maintenant les méthodes qui nous permettent de manipuler le DOM.
méthode text
méthode text()
Nous utilisons la méthode text() pour accéder au contenu d'un élément HTML.
Utilisez $ (selector).text() pour lire le contenu d'un élément.
De plus, la méthode text permet de mettre à jour le contenu d'un élément. Il suffit de transmettre le nouveau contenu à la méthode text en tant qu'argument.
<h1 id="hello">Hello Coddy</h1>
<h2 id="target"></h2>
<script>
$(document).ready(function(){
/*
With the $ ('# hello') statement,
we selected the element with hello id
and set the element's content related
to the text method of this object to
the variable named result.
*/
var result = $('#hello').text();
/*
We find the element with the
target id in the DOM and assign the value
of the result variable to the
text method of this object.
*/
$('#target').text(result);
/*
As a result, we have assigned
the value of the h1 element
to the h2 element.
*/
});
</script>
Question
méthode html
méthode html()
Notre prochaine méthode est html().
Comme son nom l'indique, elle renvoie l'élément entier plutôt que le seul contenu de l'élément que nous avons sélectionné.
Définissons ci-dessous un élément HTML exemple.
Deux éléments HTML dont les identifiants sont base et target sont définis. Ensuite, dès que le DOM est chargé.
L'intégralité du contenu HTML de l'élément base a été copiée et ajoutée à l'élément dont l'identifiant est target
<div id="base">
<p>Hello Coddy</p>
<p>I'm p element</p>
</div>
<div id="target"></div>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the base element HTML
var baseHTML = $('#base').html();
/* update target element
by using baseHTML value
*/
$('#target').html(baseHTML);
})
</script>Sélecteur d'attribut
méthode attr()
Nous utilisons les attributs pour définir des comportements supplémentaires pour les éléments HTML.
La plupart du temps, nous pouvons vouloir accéder aux valeurs de ces attributs lorsque nous écrivons notre code JavaScript.
Dans ces cas, la méthode attr est utilisée.
Découvrons cette méthode à l'aide de l'exemple ci-dessous.
<a href="https://www.coddykit.com"
target="_blank"
title="CoddyKit Web App" class="base">
Go CoddyKit
</a>
<br/>
<span id="link-title"></span>
<script>
/*
Callback will run as son
as the DOM is loaded
*/
$(document).ready(function(){
//Read link's title attribute
var linkTitle = $('a').attr('title');
/* update target element content
by using linkTitle value
*/
$('#link-title').text(linkTitle);
})
</script>Attribut
La définition de nouveaux attributs est similaire à l'utilisation des méthodes text() et html() que nous avons vues précédemment.
En transmettant un argument à la méthode attr() utilisée lors de la lecture, nous pouvons définir un nouvel attribut pour l'élément ciblé.
/*
The target attribute of the element with
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');removeAttr
removeAttr()
Nous avons appris à ajouter un attribut ;
voyons maintenant comment supprimer un attribut existant.
Pour cela, nous utiliserons la méthode removeAttr().
Examinons notre exemple.
/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
{ tag: 'a', target: '_blank' },
{ tag: 'a', target: '_self' },
{ tag: 'p' }
];
elements.forEach(el => {
if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));méthode val
méthode val()
Les formulaires sont indispensables aux applications web modernes. Nous utiliserons la méthode val() pour lire les données saisies par les utilisateurs dans les éléments du formulaire.
<input type="text" id="name"
name="yourname"
value="CoddyKit" />
<p>
Your name: <span id="target"></span>
</p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
//copy the input elemens value
var yourName = $('#name').val();
/* update target element
text by using yourName value
*/
$('#target').text(yourName);
})
</script>Avertissement
Dans notre leçon sur la gestion des événements, nous apprendrons à écouter chaque donnée saisie et à la refléter dans notre élément span.
Informations supplémentaires
Pour mettre à jour la valeur d'un champ de saisie, nous transmettons des arguments à la méthode val, comme vous pouvez vous en douter.
const $ = (selector) => ({
val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')Félicitations
Félicitations 🎉
Nous avons commencé à apprendre les manipulations du DOM
Dans la prochaine section, nous continuerons à apprendre les manipulations du DOM avec jQuery.

Apprends JavaScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 22
- Leçons
- 48
Questions Fréquemment Posées
La leçon « Manipulations du DOM avec jQuery - 1 » est-elle gratuite ?
Oui — le texte complet de « Manipulations du DOM avec jQuery - 1 » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Manipulations du DOM avec jQuery - 1 » ?
Manipulations du DOM avec jQuery Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.
Combien de temps prend la leçon « Manipulations du DOM avec jQuery - 1 » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.