introduction
Dans les deux précédents volets de la série Comprendre le DOM, nous avons appris https://www.digitalocean.com / community / tutorials / comment-accéder-aux-éléments-dans-le-dom [Comment accéder aux éléments dans les DOM] et à https://www.digitalocean.com/community/tutorials/how-to-traverse-the- dom [Comment traverser le DOM]. Grâce à ces connaissances, un développeur peut utiliser des classes, des balises, des identifiants et des sélecteurs pour rechercher un nœud quelconque dans le DOM et utiliser les propriétés parent, enfant et frère pour rechercher des nœuds relatifs.
La prochaine étape pour mieux maîtriser le DOM consiste à apprendre à ajouter, modifier, remplacer et supprimer des nœuds. Une application de liste de tâches est un exemple pratique de programme JavaScript dans lequel vous devez pouvoir créer, modifier et supprimer des éléments dans le DOM.
Dans ce tutoriel, nous verrons comment créer de nouveaux nœuds et les insérer dans le DOM, remplacer les nœuds existants et supprimer des nœuds.
Création de nouveaux nœuds
Dans un site Web statique, des éléments sont ajoutés à la page en écrivant directement du HTML dans un fichier + .html +. Dans une application Web dynamique, des éléments et du texte sont souvent ajoutés avec JavaScript. Les méthodes + createElement () + et + createTextNode () + sont utilisées pour créer de nouveaux nœuds dans le DOM.
| Property/Method | Description |
|---|---|
Create a new element node |
|
Create a new text node |
|
Get or set the text content of an element node |
|
Get or set the HTML content of an element |
Commençons par créer un fichier + index.html et enregistrez-le dans un nouveau répertoire de projet.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>Faites un clic droit n’importe où sur la page et sélectionnez «Inspecter» pour ouvrir les outils de développement, puis accédez au * https: //www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console [ Console]*.
Nous allons utiliser + createElement () + sur l’objet + document pour créer un nouvel élément` + p + `.
const paragraph = document.createElement('p');Nous avons créé un nouvel élément + p +, que nous pouvons tester dans le Console.
console.log(paragraph)Output<p></p>La variable + paragraphe + génère un élément + p + vide, ce qui n’est pas très utile sans texte. Pour ajouter du texte à l’élément, nous allons définir la propriété + textContent +.
paragraph.textContent = "I'm a brand new paragraph.";
console.log(paragraph)Output<p>I'm a brand new paragraph.</p>Une combinaison de + createElement () + et + textContent + crée un nœud d’élément complet.
Une autre méthode de définition du contenu de l’élément consiste à utiliser la propriété + innerHTML +, qui vous permet d’ajouter du code HTML ainsi que du texte à un élément.
paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";Il est également possible de créer un nœud de texte avec la méthode + createTextNode () +.
const text = document.createTextNode("I'm a new text node.");
console.log(text)Output"I'm a new text node."Avec ces méthodes, nous avons créé de nouveaux éléments et de nouveaux nœuds de texte, mais ils ne sont pas visibles au début d’un site Web tant qu’ils n’ont pas été insérés dans le document.
Insertion de nœuds dans le DOM
Afin de voir les nouveaux nœuds de texte et les éléments que nous créons sur le front-end, nous devrons les insérer dans le + document +. Les méthodes + appendChild () + et + insertBefore () + sont utilisées pour ajouter des éléments au début, au milieu ou à la fin d’un élément parent, et + replaceChild () + est utilisé pour remplacer un ancien nœud avec un nouveau noeud.
| Property/Method | Description |
|---|---|
Add a node as the last child of a parent element |
|
Insert a node into the parent element before a specified sibling node |
|
Replace an existing node with a new node |
Pour mettre en pratique ces méthodes, créons une liste de tâches en HTML:
todo.html
<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
</ul>Lorsque vous chargez votre page dans le navigateur, cela ressemble à ceci:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-1.png [Capture d’écran du DOM 1]
Afin d’ajouter un nouvel élément à la fin de la liste des tâches à faire, nous devons d’abord créer l’élément et y ajouter du texte, comme nous l’avons fait dans la section «Création de nouveaux nœuds» ci-dessus.
// To-do list ul element
const todoList = document.querySelector('ul');
// Create new to-do
const newTodo = document.createElement('li');
newTodo.textContent = 'Do homework';Maintenant que nous avons un élément complet pour notre nouvelle tâche, nous pouvons l’ajouter à la fin de la liste avec + appendChild () +.
// Add new todo to the end of the list
todoList.appendChild(newTodo);Vous pouvez voir que le nouvel élément + li + a été ajouté à la fin du + ul +.
todo.html
<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>image: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-2.png [Capture d’écran DOM 2]
Nous avons peut-être une tâche plus prioritaire à faire et nous voulons l’ajouter au début de la liste. Nous devrons créer un autre élément, car + createElement () + ne crée qu’un seul élément et ne peut pas être réutilisé.
// Create new to-do
const anotherTodo = document.createElement('li');
anotherTodo.textContent = 'Pay bills';Nous pouvons l’ajouter au début de la liste en utilisant + insertBefore () +. Cette méthode prend deux arguments - le premier est le nouveau nœud enfant à ajouter et le second est le nœud frère qui suivra immédiatement le nouveau nœud. En d’autres termes, vous insérez le nouveau nœud avant le nœud frère suivant. Cela ressemblera au pseudocode suivant:
parentNode.insertBefore(newNode, nextSibling);Pour notre exemple de liste de tâches, nous allons ajouter le nouvel élément + anotherTodo + avant le premier élément enfant de la liste, qui est actuellement l’élément de liste + Buy épicerie +.
// Add new to-do to the beginning of the list
todoList.insertBefore(anotherTodo, todoList.firstElementChild);todo.html
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>image: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-3.png [Capture d’écran DOM 3]
Le nouveau nœud a été ajouté au début de la liste. Nous savons maintenant comment ajouter un nœud à un élément parent. La prochaine chose à faire est de remplacer un nœud existant par un nouveau.
Nous allons modifier une tâche existante pour montrer comment remplacer un nœud. La première étape de la création d’un nouvel élément reste la même.
const modifiedTodo = document.createElement('li');
modifiedTodo.textContent = 'Feed the dog';Comme + insertBefore () +, + replaceChild () + prend deux arguments - le nouveau nœud et le nœud à remplacer, comme indiqué dans le pseudocode ci-dessous.
parentNode.replaceChild(newNode, oldNode);Nous allons remplacer le troisième élément enfant de la liste par la tâche à faire modifiée.
// Replace existing to-do with modified to-do
todoList.replaceChild(modifiedTodo, todoList.children[2]);todo.html
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>image: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-4.png [Capture d’écran DOM 4]
Avec une combinaison de + appendChild () +, + insertBefore () + et + replaceChild () +, vous pouvez insérer des nœuds et des éléments n’importe où dans le DOM.
Supprimer des nœuds du DOM
Nous savons maintenant comment créer des éléments, les ajouter au DOM et modifier les éléments existants. La dernière étape consiste à apprendre à supprimer les nœuds existants du DOM. Les nœuds enfants peuvent être supprimés d’un parent avec + removeChild () +, et un nœud lui-même peut être supprimé avec + remove () +.
| Method | Description |
|---|---|
Remove child node |
|
Remove node |
À l’aide de l’exemple de tâche ci-dessus, nous souhaitons supprimer des éléments une fois qu’ils sont terminés. Si vous avez terminé vos devoirs, vous pouvez supprimer l’élément + Do devoirs +, qui est le dernier enfant de la liste, avec + removeChild () +.
todoList.removeChild(todoList.lastElementChild);todo.html
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>image: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-5.png [Capture d’écran DOM 5]
Une autre méthode pourrait consister à supprimer le nœud lui-même, en utilisant la méthode + remove () + directement sur le nœud.
// Remove second element child from todoList
todoList.children[1].remove();todo.html
<ul>
<li>Pay bills</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>image: https: //assets.digitalocean.com/articles/eng_javascript/dom/to-do-6.png [Capture d’écran DOM 6]
Entre + removeChild () + et + remove () +, vous pouvez supprimer n’importe quel noeud du DOM. Une autre méthode que vous pouvez utiliser pour supprimer des éléments enfants du DOM consiste à définir la propriété + innerHTML + d’un élément parent sur une chaîne vide (" "). Cette méthode n’est pas recommandée car elle est moins explicite, mais vous la verrez peut-être dans du code existant.
Conclusion
Dans ce didacticiel, nous avons appris à utiliser JavaScript pour créer de nouveaux nœuds et éléments et les insérer dans le DOM, ainsi que pour remplacer et supprimer des nœuds et des éléments existants.
À ce stade de la Comprendre la série DOM, vous savez comment accéder à n’importe quel élément du DOM noeud dans le DOM et modifier le DOM lui-même. Vous pouvez maintenant avoir confiance dans la création d’applications Web frontales de base avec JavaScript.