{"id":5688,"date":"2024-08-29T02:40:30","date_gmt":"2024-08-29T02:40:30","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\/"},"modified":"2025-01-09T16:22:38","modified_gmt":"2025-01-09T16:22:38","slug":"acceder-aux-elements-du-dom-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\/","title":{"rendered":"12.3 Acc\u00e9der aux \u00c9l\u00e9ments du DOM en JavaScript"},"content":{"rendered":"\n\n\n<p><strong>Acc\u00e9der aux \u00c9l\u00e9ments du DOM en JavaScript<\/strong> est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur front-end. Ma\u00eetriser cette comp\u00e9tence permet de manipuler et de dynamiser le contenu de vos pages web. Apprenons comment acc\u00e9dez et modifiez les \u00c9l\u00e9ments du DOM JavaScript efficacement \u00e0 travers divers exemples concrets de code JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Acc\u00e8s au DOM en JavaScript<\/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\/658890447?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 interface de programmation que les navigateurs web utilisent pour repr\u00e9senter et interagir avec les documents HTML. JavaScript utilise le DOM pour manipuler les \u00e9l\u00e9ments et les structures des pages web. Voici un guide pour acc\u00e9der aux \n<a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\" target=\"_blank\" rel=\"noopener\">\u00e9l\u00e9ments du DOM<\/a>, les mettre \u00e0 jour et r\u00e9agir aux \u00e9v\u00e9nements via JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments du DOM avec JavaScript<\/h3>\n\n\n\n<p>Le moyen le plus direct pour acc\u00e9dez \u00e0 un \u00e9l\u00e9ment du DOM consiste \u00e0 utiliser des s\u00e9lecteurs comme <code>getElementById<\/code>, <code>getElementsByClassName<\/code>, <code>getElementsByTagName<\/code>, et <code>querySelector<\/code>. Examinons chaque m\u00e9thode en d\u00e9tail.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>getElementById<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>getElementById<\/code> permet de s\u00e9lectionner un \u00e9l\u00e9ment unique bas\u00e9 sur son identifiant (id). Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var header = document.getElementById(\"main-header\");\n    header.textContent = \"Bienvenue au Tutoriel JavaScript!\";\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>getElementsByClassName<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>getElementsByClassName<\/code> renvoie une collection en direct des \u00e9l\u00e9ments ayant la classe sp\u00e9cifi\u00e9e. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var items = document.getElementsByClassName(\"list-item\");\n    for (var i = 0; i < items.length; i++) {\n        items[i].style.color = \"blue\";\n    }\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>getElementsByTagName<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>getElementsByTagName<\/code> s\u00e9lectionne tous les \u00e9l\u00e9ments ayant un nom de balise sp\u00e9cifique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var paragraphs = document.getElementsByTagName(\"p\");\n    for (var i = 0; i < paragraphs.length; i++) {\n        paragraphs[i].style.fontWeight = \"bold\";\n    }\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser <code>querySelector<\/code> et <code>querySelectorAll<\/code><\/h4>\n\n\n\n<p>La m\u00e9thode <code>querySelector<\/code> renvoie le premier \u00e9l\u00e9ment correspondant \u00e0 un s\u00e9lecteur CSS, tandis que <code>querySelectorAll<\/code> retourne tous les \u00e9l\u00e9ments correspondants. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var firstItem = document.querySelector(\".list-item\");\n    firstItem.style.backgroundColor = \"yellow\";\n\n    var allItems = document.querySelectorAll(\".list-item\");\n    allItems.forEach(item =&gt; item.style.fontSize = \"20px\");\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier les \u00c9l\u00e9ments du DOM<\/h3>\n\n\n\n<p>Apr\u00e8s avoir s\u00e9lectionn\u00e9 des \u00e9l\u00e9ments, vous pouvez facilement les modifier. Vous pouvez changer leur contenu, styles, ou attributs, manipuler leurs classes, ou m\u00eame ajouter\/supprimer des \u00e9l\u00e9ments.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Changer le Contenu et les Attributs<\/h4>\n\n\n\n<p>Pour changer le contenu texte ou HTML d'un \u00e9l\u00e9ment, utilisez les propri\u00e9t\u00e9s <code>textContent<\/code> ou <code>innerHTML<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var header = document.getElementById(\"main-header\");\n    header.textContent = \"Bienvenue au Tutoriel JavaScript!\";  \/\/ Change le texte\n    header.innerHTML = \"<strong>Bienvenue<\/strong> \u00e0 tous!\";     \/\/ Change le HTML\n});\n<\/code><\/pre>\n\n\n\n<p>Pour modifier les attributs :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var link = document.querySelector(\"#my-link\");\n    link.href = \"https:\/\/www.exemple.com\";\n    link.title = \"Nouvelle destination\";\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Manipuler les Classes CSS<\/h4>\n\n\n\n<p>Utilisez la propri\u00e9t\u00e9 <code>classList<\/code> pour ajouter, supprimer ou basculer des classes CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var box = document.querySelector(\".box\");\n    box.classList.add(\"highlight\");\n    box.classList.remove(\"shadow\");\n    box.classList.toggle(\"visible\");\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Ajouter et Supprimer des \u00c9l\u00e9ments<\/h4>\n\n\n\n<p>Pour ajouter ou supprimer des \u00e9l\u00e9ments du DOM, utilisez les m\u00e9thodes <code>appendChild<\/code>, <code>insertBefore<\/code>, <code>removeChild<\/code>, et <code>replaceChild<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var list = document.getElementById(\"my-list\");\n    \n    \/\/ Ajouter un nouvel \u00e9l\u00e9ment\n    var newItem = document.createElement(\"li\");\n    newItem.textContent = \"Nouvel \u00e9l\u00e9ment\";\n    list.appendChild(newItem);\n\n    \/\/ Supprimer un \u00e9l\u00e9ment existant\n    var firstItem = list.querySelector(\"li\");\n    list.removeChild(firstItem);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9agir aux \u00c9v\u00e9nements avec JavaScript<\/h3>\n\n\n\n<p>Les \u00e9v\u00e9nements en JavaScript permettent \u00e0 vos applications de r\u00e9agir aux interactions utilisateur et aux modifications. Pour ajouter des gestionnaires d'\u00e9v\u00e9nements, utilisez les m\u00e9thodes <code>addEventListener<\/code> et <code>removeEventListener<\/code>. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var button = document.getElementById(\"my-button\");\n    function onClick() {\n        alert(\"Bouton cliqu\u00e9!\");\n    }\n\n    \/\/ Ajouter un gestionnaire d'\u00e9v\u00e9nement\n    button.addEventListener(\"click\", onClick);\n\n    \/\/ Supprimer un gestionnaire d'\u00e9v\u00e9nement\n    \/\/ button.removeEventListener(\"click\", onClick);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des S\u00e9lecteurs Complexes et Techniques Avanc\u00e9es<\/h3>\n\n\n\n<p>Pour des op\u00e9rations plus complexes, vous pouvez combiner des s\u00e9lecteurs ou utiliser des techniques avanc\u00e9es comme la d\u00e9l\u00e9gation d'\u00e9v\u00e9nements. Cela peut rendre le code plus efficace et plus facile \u00e0 maintenir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Combinaison de S\u00e9lecteurs<\/h4>\n\n\n\n<p>Voici comment utiliser les s\u00e9lecteurs combin\u00e9s pour cibler des \u00e9l\u00e9ments plus sp\u00e9cifiquement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var specialItems = document.querySelectorAll(\".container .highlight\");\n    specialItems.forEach(item =&gt; item.style.border = \"2px solid red\");\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">D\u00e9l\u00e9gation d'\u00c9v\u00e9nements<\/h4>\n\n\n\n<p>La d\u00e9l\u00e9gation d'\u00e9v\u00e9nements vous permet de r\u00e9duire le nombre de gestionnaires d'\u00e9v\u00e9nements en les attachant \u00e0 un anc\u00eatre commun :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"DOMContentLoaded\", function() {\n    var list = document.getElementById(\"my-list\");\n\n    list.addEventListener(\"click\", function(event) {\n        if (event.target &amp;&amp; event.target.matches(\"li.list-item\")) {\n            event.target.style.backgroundColor = \"yellow\";\n        }\n    });\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Savoir acc\u00e9der et manipuler les \u00e9l\u00e9ments du DOM en JavaScript est essentiel pour le d\u00e9veloppement web interactif. En utilisant les m\u00e9thodes et techniques couvertes dans cet article, vous pourrez rendre vos pages web plus dynamiques et r\u00e9actives. Continuez \u00e0 explorer et exp\u00e9rimenter pour ma\u00eetriser pleinement la puissance de JavaScript et du DOM.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify JavaScript Fundamentals Offer 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour approfondir vos connaissances sur JavaScript, d\u00e9couvrez ces articles\u00a0:<\/p>\n<ul>\n<li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu'est-ce que JavaScript? Explications et d\u00e9finition<\/a><\/li>\n<li\n","protected":false},"excerpt":{"rendered":"<p>Acc\u00e9der aux \u00c9l\u00e9ments du DOM en JavaScript est une comp\u00e9tence fondamentale pour tout d\u00e9veloppeur front-end. Ma\u00eetriser cette comp\u00e9tence permet de manipuler et de dynamiser le&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2838,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5688","post","type-post","status-publish","format-standard","has-post-thumbnail","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\/5688","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=5688"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5688\/revisions"}],"predecessor-version":[{"id":6113,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5688\/revisions\/6113"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2838"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}