{"id":5700,"date":"2024-08-29T03:04:22","date_gmt":"2024-08-29T03:04:22","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/fonctions-interessantes-pour-le-dom-en-javascript\/"},"modified":"2024-08-29T03:04:26","modified_gmt":"2024-08-29T03:04:26","slug":"fonctions-interessantes-pour-le-dom-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/fonctions-interessantes-pour-le-dom-en-javascript\/","title":{"rendered":"13.3 Fonctions Int\u00e9ressantes pour le DOM en JavaScript"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p>Les fonctions DOM JavaScript sont une interface de programmation essentielle pour manipuler et interagir avec les contenus HTML et XML dans un environnement web. En JavaScript, plusieurs fonctions du DOM permettent d&rsquo;acc\u00e9der, de modifier et de g\u00e9rer les \u00e9l\u00e9ments de la page. D\u00e9couvrons ensemble 13.3 fonctions int\u00e9ressantes du DOM en JavaScript, avec des exemples concrets et instructifs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux Fonctions du 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\/658891536?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>Les fonctions du DOM en JavaScript sont des outils puissants qui offrent une multitude de possibilit\u00e9s pour interagir avec les pages web. Elles vous permettent de s\u00e9lectionner, ajouter, supprimer, et modifier des \u00e9l\u00e9ments HTML, ainsi que d&rsquo;\u00e9couter et de r\u00e9pondre aux \u00e9v\u00e9nements utilisateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. getElementById<\/h3>\n\n\n\n<p>La m\u00e9thode <code>getElementById<\/code> est l&rsquo;un des moyens les plus rapides pour acc\u00e9der \u00e0 un \u00e9l\u00e9ment sp\u00e9cifique de la page en utilisant son attribut <code>id<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const element = document.getElementById('myElement');\nconsole.log(element); \/\/ Affiche l'\u00e9l\u00e9ment avec l'id 'myElement'<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. querySelector<\/h3>\n\n\n\n<p>La m\u00e9thode <code>querySelector<\/code> permet de s\u00e9lectionner le premier \u00e9l\u00e9ment correspondant \u00e0 un s\u00e9lecteur CSS sp\u00e9cifi\u00e9. Pour plus d&rsquo;informations sur la s\u00e9lection d&rsquo;\u00e9l\u00e9ments, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\">comment acc\u00e9der aux \u00e9l\u00e9ments du DOM en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const firstParagraph = document.querySelector('p');\nconsole.log(firstParagraph); \/\/ Affiche le premier \u00e9l\u00e9ment paragraphe trouv\u00e9 dans le document<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. querySelectorAll<\/h3>\n\n\n\n<p><code>querySelectorAll<\/code> renvoie une NodeList de tous les \u00e9l\u00e9ments correspondant \u00e0 un s\u00e9lecteur donn\u00e9, ce qui peut \u00eatre particuli\u00e8rement utile lors de la manipulation de multiples \u00e9l\u00e9ments similaires sur une page web.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const listItems = document.querySelectorAll('li');\nconsole.log(listItems); \/\/ Affiche une NodeList de tous les \u00e9l\u00e9ments <li><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">4. createElement<\/h3>\n\n\n\n<p><code>createElement<\/code> est utilis\u00e9 pour cr\u00e9er un nouvel \u00e9l\u00e9ment HTML programmatique. Cette m\u00e9thode est essentielle pour ajouter dynamiquement des \u00e9l\u00e9ments \u00e0 votre page web.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const newDiv = document.createElement('div');\nnewDiv.textContent = 'Hello, World!';\ndocument.body.appendChild(newDiv); \/\/ Ajoute le nouvel \u00e9l\u00e9ment <div> au body<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">5. appendChild<\/h3>\n\n\n\n<p>La m\u00e9thode <code>appendChild<\/code> permet d&rsquo;ajouter un n\u0153ud en tant que dernier enfant d&rsquo;un n\u0153ud parent sp\u00e9cifi\u00e9. Pour un guide complet, visitez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\">comment ajouter des \u00e9l\u00e9ments au DOM<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const parent = document.getElementById('parentElement');\nconst child = document.createElement('p');\nchild.textContent = 'Nouveau Paragraphe';\nparent.appendChild(child); \/\/ Ajoute l'\u00e9l\u00e9ment <p> comme dernier enfant de l'\u00e9l\u00e9ment <div id=\"parentElement\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">6. removeChild<\/h3>\n\n\n\n<p><code>removeChild<\/code> est utilis\u00e9 pour supprimer un n\u0153ud enfant d&rsquo;un n\u0153ud parent. Cela peut \u00eatre utile pour nettoyer dynamiquement votre DOM.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const parent = document.getElementById('parentElement');\nconst child = document.getElementById('childElement');\nparent.removeChild(child); \/\/ Supprime l'enfant 'childElement' de 'parentElement'<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">7. replaceChild<\/h3>\n\n\n\n<p>Utilisez <code>replaceChild<\/code> pour remplacer un n\u0153ud enfant par un autre n\u0153ud dans le DOM. Pour des explications d\u00e9taill\u00e9es et des exemples, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\">comment modifier les \u00e9l\u00e9ments du DOM en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const parent = document.getElementById('parentElement');\nconst newChild = document.createElement('p');\nnewChild.textContent = 'Paragraphe Rempla\u00e7ant';\nconst oldChild = document.getElementById('childElement');\nparent.replaceChild(newChild, oldChild); \/\/ Remplace 'childElement' par 'newChild'<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">8. classList<\/h3>\n\n\n\n<p><code>classList<\/code> est une propri\u00e9t\u00e9 utile qui renvoie l&rsquo;objet DOMTokenList des classes d&rsquo;un \u00e9l\u00e9ment. Cette m\u00e9thode est tr\u00e8s efficace pour manipuler les classes CSS dans un script.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const element = document.getElementById('myElement');\nelement.classList.add('newClass'); \/\/ Ajoute la classe 'newClass' \u00e0 l'\u00e9l\u00e9ment\nelement.classList.remove('oldClass'); \/\/ Supprime la classe 'oldClass' de l'\u00e9l\u00e9ment<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">9. addEventListener<\/h3>\n\n\n\n<p><code>addEventListener<\/code> attache une fonction de gestion d&rsquo;\u00e9v\u00e9nements \u00e0 l&rsquo;\u00e9l\u00e9ment sp\u00e9cifi\u00e9. Pour plus d&rsquo;informations sur les \u00e9v\u00e9nements en JavaScript, lisez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\">comment utiliser les \u00e9couteurs d&rsquo;\u00e9v\u00e9nements en JavaScript<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const button = document.getElementById('myButton');\nbutton.addEventListener('click', () => {\n    alert('Bouton cliqu\u00e9!');\n}); \/\/ Affiche une alerte lorsque le bouton est cliqu\u00e9<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">10. removeEventListener<\/h3>\n\n\n\n<p>Pour d\u00e9tacher une fonction de gestion d&rsquo;\u00e9v\u00e9nements, utilisez <code>removeEventListener<\/code>. Cela peut \u00eatre utile lorsque vous souhaitez g\u00e9rer dynamiquement les \u00e9v\u00e9nements dans votre application.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const button = document.getElementById('myButton');\nfunction handleClick() {\n    alert('Bouton cliqu\u00e9!');\n}\nbutton.addEventListener('click', handleClick);\n\/\/ D\u00e9tacher plus tard\nbutton.removeEventListener('click', handleClick);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">11. innerHTML<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>innerHTML<\/code> permet de d\u00e9finir ou de retourner le contenu HTML de l&rsquo;\u00e9l\u00e9ment. Cette propri\u00e9t\u00e9 est souvent utilis\u00e9e pour mettre \u00e0 jour rapidement le contenu d&rsquo;un \u00e9l\u00e9ment.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const element = document.getElementById('content');\nelement.innerHTML = '<strong>Nouveau Contenu<\/strong>'; \/\/ D\u00e9finit le contenu HTML de l'\u00e9l\u00e9ment<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">12. textContent<\/h3>\n\n\n\n<p>Contrairement \u00e0 <code>innerHTML<\/code>, <code>textContent<\/code> d\u00e9finit ou retourne le contenu textuel de l&rsquo;\u00e9l\u00e9ment en le nettoyant de tout HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const element = document.getElementById('content');\nelement.textContent = 'Nouveau Texte'; \/\/ D\u00e9finit le contenu texte de l'\u00e9l\u00e9ment<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">13. getAttribute et setAttribute<\/h3>\n\n\n\n<p>Utilisez <code>getAttribute<\/code> et <code>setAttribute<\/code> pour obtenir ou d\u00e9finir les valeurs des attributs d&rsquo;un \u00e9l\u00e9ment. Ces m\u00e9thodes sont essentielles pour manipuler les attributs HTML dans vos scripts.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const link = document.querySelector('a');\nconsole.log(link.getAttribute('href')); \/\/ Affiche l'attribut href du lien\nlink.setAttribute('href', 'https:\/\/www.example.com'); \/\/ D\u00e9finit l'attribut href du lien<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">.3 Scroll Into View<\/h3>\n\n\n\n<p><code>scrollIntoView<\/code> fait d\u00e9filer la page pour afficher l&rsquo;\u00e9l\u00e9ment dans la zone de visualisation. Cette m\u00e9thode est particuli\u00e8rement utile pour guider l&rsquo;utilisateur vers des sections sp\u00e9cifiques d&rsquo;une page web.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const element = document.getElementById('myElement');\nelement.scrollIntoView({ behavior: 'smooth' }); \/\/ Fait d\u00e9filer en douceur pour afficher l'\u00e9l\u00e9ment dans la zone de visualisation<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les fonctions DOM JavaScript offrent un vaste champ d&rsquo;outils pour interagir avec vos pages web de mani\u00e8re dynamique. En ma\u00eetrisant ces fonctions, vous pouvez cr\u00e9er des applications web r\u00e9actives et enrichissantes pour l&rsquo;utilisateur. Continuez \u00e0 explorer et \u00e0 exp\u00e9rimenter avec ces fonctions pour d\u00e9couvrir leur plein potentiel. Pour plus de tutoriels en","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les fonctions DOM JavaScript sont une interface de programmation essentielle pour manipuler et interagir avec les contenus HTML et XML dans un environnement web&#8230;.<\/p>\n","protected":false},"author":3,"featured_media":2884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5700","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\/5700","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=5700"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5700\/revisions"}],"predecessor-version":[{"id":5701,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5700\/revisions\/5701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2884"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}