JavaScript Modification du document
JavaScript nous permet de manipuler dynamiquement les documents HTML, améliorant ainsi l'interactivité et les fonctionnalités. Dans cet article, nous explorons les méthodes et techniques fondamentales pour modifier le document à l'aide de JavaScript, avec des exemples de code détaillés pour vous aider à maîtriser cette compétence essentielle.
Comprendre la manipulation du DOM
Création d'éléments
L'une des opérations fondamentales de la manipulation du DOM est la création de nouveaux éléments. Cela se fait à l'aide de la méthode document.createElement(tag). Voici comment créer un nouvel élément div :
<body></body>
<script>
let div = document.createElement('div');
div.innerHTML = "Hello, world!";
document.body.appendChild(div);
</script>Ajout de texte aux éléments
Pour ajouter du texte à un élément, vous utilisez la méthode document.createTextNode(text). Cette méthode est particulièrement utile lorsque vous souhaitez ajouter du texte qui ne doit pas être interprété comme du HTML :
<body>
<div id="container"></div>
</body>
<script>
const div = document.getElementById("container");
let textNode = document.createTextNode('Here is some text');
div.appendChild(textNode);
</script>Modification des éléments
Modification des attributs
Pour modifier un attribut d'un élément, vous pouvez utiliser element.setAttribute(name, value). Cette méthode vous permet de définir la valeur d'un attribut sur l'élément spécifié.
<body>
<div id="firstID"></div>
<div>new id is: <span id="result"></span></div>
</body>
<script>
const div = document.getElementById("firstID");
const result = document.getElementById("result");
div.setAttribute("id", "newDiv");
result.innerHTML = div.id;
</script>Manipulations avancées
Clonage d'éléments
Vous pouvez créer une copie d'un élément en utilisant la méthode element.cloneNode(deep). Définir deep sur true clone l'élément ainsi que ses descendants.
<body>
<div id="mydiv">one div here, or two divs if cloned! <span>And here is a span inside the div!</span></div>
</body>
<script>
const div = document.getElementById("mydiv");
const clone = div.cloneNode(true);
document.body.appendChild(clone);
</script>Suppression d'éléments
Pour supprimer un élément du DOM, vous pouvez utiliser element.remove().
<body>
<div>It's the only thing you see, as the next div is removed!</div>
<div id="mydiv">you don't see me if I'm removed!</div>
</body>
<script>
const div = document.getElementById("mydiv");
div.remove();
</script>Exemple pratique : Création d'une liste de tâches
Appliquons ces concepts pour créer une simple liste de tâches avec JavaScript :
<body></body>
<script>
// Creating the list container
let list = document.createElement('ul');
document.body.appendChild(list);
// Adding items to the list
function addItem(text) {
let item = document.createElement('li');
item.textContent = text;
list.appendChild(item);
}
addItem('Learn JavaScript');
addItem('Build a to-do list');
</script>Conclusion
Maîtriser la modification de documents en JavaScript ouvre un monde de possibilités pour créer des applications web dynamiques et interactives. Les méthodes décrites ici ne sont que le début de ce que vous pouvez accomplir avec la manipulation du DOM. Pratiquez ces techniques, expérimentez de nouvelles idées et continuez à explorer les puissantes capacités de JavaScript.
Practice
Quelle méthode peut être utilisée en JavaScript pour modifier un attribut d'un élément ?