{"id":5684,"date":"2024-08-29T02:32:40","date_gmt":"2024-08-29T02:32:40","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\/"},"modified":"2024-08-29T02:32:42","modified_gmt":"2024-08-29T02:32:42","slug":"qu-est-ce-que-le-dom-en-javascript-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-dom-en-javascript-explications\/","title":{"rendered":"12.1 Qu&rsquo;est-ce que le DOM en JavaScript ? Explications"},"content":{"rendered":"\n<p><strong>Le DOM (Document Object Model) en JavaScript<\/strong> est essentiel pour la manipulation interactive des pages web. Apprendre \u00e0 acc\u00e9der et manipuler le DOM permet de cr\u00e9er des interfaces utilisateurs dynamiques et r\u00e9actives. Comprenons ce qu&rsquo;est le DOM et comment l&rsquo;utiliser avec JavaScript gr\u00e2ce \u00e0 des explications claires et des exemples de code concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>DOM en JavaScript<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658890028?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Le Document Object Model (DOM) est une repr\u00e9sentation hi\u00e9rarchique des \u00e9l\u00e9ments pr\u00e9sents dans un document HTML. Il permet aux scripts de manipuler la structure, le style et le contenu des documents web de mani\u00e8re dynamique. Si vous souhaitez apprendre davantage sur les bases de JavaScript, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">guide complet sur JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der au DOM avec JavaScript<\/h3>\n\n\n\n<p>Pour interagir avec le DOM en JavaScript, on utilise divers m\u00e9thodes et propri\u00e9t\u00e9s. Commen\u00e7ons par acc\u00e9der aux \u00e9l\u00e9ments HTML. Voici quelques m\u00e9thodes courantes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Acc\u00e9der \u00e0 un \u00e9l\u00e9ment par son ID\nvar elementById = document.getElementById('monId');\n\n\/\/ Acc\u00e9der \u00e0 des \u00e9l\u00e9ments par leur nom de classe\nvar elementsByClassName = document.getElementsByClassName('maClasse');\n\n\/\/ Acc\u00e9der \u00e0 des \u00e9l\u00e9ments par leur balise\nvar elementsByTagName = document.getElementsByTagName('div');\n\n\/\/ Utiliser des s\u00e9lecteurs CSS\nvar elementByQuerySelector = document.querySelector('.maClasse #monId');\nvar elementsByQuerySelectorAll = document.querySelectorAll('div.maClasse');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les \u00c9l\u00e9ments du DOM<\/h3>\n\n\n\n<p>Une fois que nous avons acc\u00e8s aux \u00e9l\u00e9ments DOM, nous pouvons changer leur contenu, style, ou cr\u00e9er et supprimer des \u00e9l\u00e9ments via JavaScript. Voyons comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Modifier le texte d'un \u00e9l\u00e9ment\nvar monElement = document.getElementById('monId');\nmonElement.textContent = 'Nouveau texte';\n\n\/\/ Modifier le style d'un \u00e9l\u00e9ment\nmonElement.style.color = 'blue';\nmonElement.style.backgroundColor = 'yellow';\n\n\/\/ Cr\u00e9er un nouvel \u00e9l\u00e9ment\nvar newDiv = document.createElement('div');\nnewDiv.textContent = 'Je suis un nouveau div!';\ndocument.body.appendChild(newDiv);\n\n\/\/ Supprimer un \u00e9l\u00e9ment\nvar elementToRemove = document.getElementById('monId');\nelementToRemove.parentNode.removeChild(elementToRemove);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des \u00c9v\u00e9nements pour Rendre la Page Interactive<\/h3>\n\n\n\n<p>Les \u00e9v\u00e9nements permettent de rendre la page web interactive. Voici comment ajouter des \u00e9couteurs d&rsquo;\u00e9v\u00e9nements pour r\u00e9pondre aux interactions de l&rsquo;utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajouter un \u00e9couteur d'\u00e9v\u00e9nement\nvar bouton = document.getElementById('monBouton');\nbouton.addEventListener('click', function() {\n    alert('Bouton cliqu\u00e9!');\n});\n\n\/\/ Modifier des \u00e9l\u00e9ments en r\u00e9ponse \u00e0 un \u00e9v\u00e9nement\nvar input = document.getElementById('monInput');\ninput.addEventListener('input', function() {\n    var output = document.getElementById('output');\n    output.textContent = input.value;\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le DOM pour Valider les Formulaires en Temps R\u00e9el<\/h3>\n\n\n\n<p>Le DOM permet \u00e9galement de valider les entr\u00e9es utilisateur en temps r\u00e9el. Voici un exemple simple de validation de formulaire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Validation de formulaire\nvar form = document.getElementById('monFormulaire');\nvar emailInput = document.getElementById('email');\nvar errorMessage = document.getElementById('error-msg');\n\nemailInput.addEventListener('input', function() {\n    var email = emailInput.value;\n    if (!validateEmail(email)) {\n        errorMessage.textContent = 'Adresse email invalide';\n    } else {\n        errorMessage.textContent = '';\n    }\n});\n\nfunction validateEmail(email) {\n    var re = \/\\S+@\\S+\\.\\S+\/;\n    return re.test(email);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Manipulation du DOM<\/h3>\n\n\n\n<p>Pour comprendre en profondeur la manipulation du DOM, voici quelques exemples avanc\u00e9s :<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er une Liste Dynamique<\/h4>\n\n\n\n<p>Imaginons un sc\u00e9nario o\u00f9 nous ajoutons des \u00e9l\u00e9ments \u00e0 une liste de mani\u00e8re dynamique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajouter des \u00e9l\u00e9ments \u00e0 une liste\nvar ul = document.getElementById('maListe');\nvar ajouterBouton = document.getElementById('ajouterElement');\n\najouterBouton.addEventListener('click', function() {\n    var newItem = document.createElement('li');\n    newItem.textContent = 'Nouvel \u00e9l\u00e9ment';\n    ul.appendChild(newItem);\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Mise \u00e0 Jour d&rsquo;un Tableau Dynamique<\/h4>\n\n\n\n<p>Voici comment mettre \u00e0 jour un tableau de mani\u00e8re interactive :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Mise \u00e0 jour d'un tableau\nvar tableau = document.getElementById('monTableau');\nvar ajouterLigneBouton = document.getElementById('ajouterLigne');\n\najouterLigneBouton.addEventListener('click', function() {\n    var nouvelleLigne = tableau.insertRow();\n    var cellule1 = nouvelleLigne.insertCell(0);\n    var cellule2 = nouvelleLigne.insertCell(1);\n    cellule1.textContent = 'Nouvelle cellule 1';\n    cellule2.textContent = 'Nouvelle cellule 2';\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Synchronisation de Donn\u00e9es Entre \u00c9l\u00e9ments<\/h4>\n\n\n\n<p>Les techniques de manipulation du DOM permettent \u00e9galement de synchroniser les donn\u00e9es entre diff\u00e9rents \u00e9l\u00e9ments HTML :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Synchronisation de deux \u00e9l\u00e9ments\nvar input1 = document.getElementById('input1');\nvar input2 = document.getElementById('input2');\n\ninput1.addEventListener('input', function() {\n    input2.value = input1.value;\n});\n\ninput2.addEventListener('input', function() {\n    input1.value = input2.value;\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h4>\n\n\n\n<p>Consid\u00e9rons un projet plus complet o\u00f9 le DOM est utilis\u00e9 pour interagir avec un formulaire de contact :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Formulaire de contact dynamique\nvar contactForm = document.getElementById('contactForm');\nvar message = document.getElementById('message');\n\ncontactForm.addEventListener('submit', function(event) {\n    event.preventDefault();\n    var formData = new FormData(contactForm);\n    var name = formData.get('name');\n    var email = formData.get('email');\n    var messageContent = formData.get('message');\n\n    if (name && email && messageContent) {\n        message.textContent = 'Merci pour votre message, ' + name + '!';\n        contactForm.reset();\n    } else {\n        message.textContent = 'Veuillez remplir tous les champs.';\n    }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comment Ajouter et Supprimer des \u00c9l\u00e9ments du DOM<\/h3>\n\n\n\n<p>Comprendre comment ajouter et supprimer des \u00e9l\u00e9ments dans le DOM est une comp\u00e9tence pr\u00e9cieuse pour tout d\u00e9veloppeur JavaScript. Voici un autre exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajouter un nouvel \u00e9l\u00e9ment\nvar parentElement = document.getElementById('parent');\nvar nouveauParagraphe = document.createElement('p');\nnouveauParagraphe.textContent = 'Texte ajout\u00e9 dynamiquement';\nparentElement.appendChild(nouveauParagraphe);\n\n\/\/ Supprimer un \u00e9l\u00e9ment existant\nvar elementASupprimer = document.getElementById('aSupprimer');\nelementASupprimer.parentElement.removeChild(elementASupprimer);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier le Style des \u00c9l\u00e9ments avec JavaScript<\/h3>\n\n\n\n<p>Modifier le style des \u00e9l\u00e9ments directement via JavaScript est une fonctionnalit\u00e9 puissante du DOM. Voici quelques techniques utiles :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Modifier plusieurs styles simultan\u00e9ment\nvar monElement = document.getElementById('monId');\nmonElement.style.cssText = 'color: red; background-color: yellow; font-size: 20px;';\n\n\/\/ Ajouter et supprimer des classes CSS\nmonElement.classList.add('nouvelleClasse');\nmonElement.classList.remove('ancienneClasse');\nmonElement.classList.toggle('active');\n\n\/\/ Modifier les attributs d'un \u00e9l\u00e9ment\nvar lien = document.getElementById('monLien');\nlien.setAttribute('href', 'https:\/\/www.exemple.com');\nlien.setAttribute('target', '_blank');\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le DOM pour Cr\u00e9er des Animations et Interactions Complexes<\/h3>\n\n\n\n<p>Les comp\u00e9tences en manipulation du DOM permettent \u00e9galement de cr\u00e9er des animations sophistiqu\u00e9es. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Animer un \u00e9l\u00e9ment\nvar boite = document.getElementById('boite');\nvar angle = 0;\nsetInterval(function() {\n    angle += 2;\n    boite.style.transform = 'rotate(' + angle + 'deg)';\n}, 20);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Le <strong>DOM en JavaScript<\/strong> est une partie essentielle de la cr\u00e9ation de pages web interactives et dynamiques. En comprenant comment acc\u00e9der, manipuler et \u00e9couter les \u00e9v\u00e9nements du DOM, vous pouvez grandement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur de vos applications web. Continuez \u00e0 explorer et \u00e0 pratiquer pour ma\u00eetriser ces techniques. Pour plus de tutoriels sur JavaScript et le DOM, consulte","protected":false},"excerpt":{"rendered":"<p>Le DOM (Document Object Model) en JavaScript est essentiel pour la manipulation interactive des pages web. Apprendre \u00e0 acc\u00e9der et manipuler le DOM permet de&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5684","post","type-post","status-publish","format-standard","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5684"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5684\/revisions"}],"predecessor-version":[{"id":5685,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5684\/revisions\/5685"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}