{"id":5682,"date":"2024-08-29T02:28:28","date_gmt":"2024-08-29T02:28:28","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/objet-document-dans-le-bom-en-javascript-utilisation\/"},"modified":"2024-08-29T02:28:32","modified_gmt":"2024-08-29T02:28:32","slug":"objet-document-dans-le-bom-en-javascript-utilisation","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/objet-document-dans-le-bom-en-javascript-utilisation\/","title":{"rendered":"11.8 Objet Document dans le BOM en JavaScript : Utilisation"},"content":{"rendered":"\n<p><strong>JavaScript: Manipulation du DOM avec l&rsquo;Objet Document<\/strong> est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs web. Ma\u00eetriser l&rsquo;Objet Document dans le BOM (Browser Object Model) permet de manipuler dynamiquement le contenu et la structure des pages web. Apprenons comment utiliser cet objet fondamental, illustr\u00e9 par des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Objet Document dans le BOM<\/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\/658889838?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\/javascript-les-fondamentaux\/142')\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 BOM (Browser Object Model) en JavaScript permet d&rsquo;acc\u00e9der et de manipuler divers \u00e9l\u00e9ments du navigateur web. L&rsquo;Objet Document en fait partie, et il est essentiel pour acc\u00e9der et modifier le contenu des pages web de mani\u00e8re dynamique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Pour interagir avec les \u00e9l\u00e9ments de la page web, vous pouvez utiliser des m\u00e9thodes telles que <code>getElementById<\/code>, <code>getElementsByClassName<\/code>, et <code>querySelector<\/code> fournies par l&rsquo;Objet Document. Ces m\u00e9thodes sont expliqu\u00e9es plus en d\u00e9tail dans notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\" target=\"_blank\" rel=\"noopener\">comment acc\u00e9der aux \u00e9l\u00e9ments du DOM en JavaScript<\/a>. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Acc\u00e9der \u00e0 un \u00e9l\u00e9ment par son ID\nvar element = document.getElementById(\"myElement\");\n\n\/\/ Acc\u00e9der \u00e0 des \u00e9l\u00e9ments par leur classe\nvar elements = document.getElementsByClassName(\"myClass\");\n\n\/\/ Utiliser querySelector pour s\u00e9lectionner le premier \u00e9l\u00e9ment correspondant\nvar firstElement = document.querySelector(\".myClass\");\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Modifier le Contenu des \u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Une fois que vous avez acc\u00e8s aux \u00e9l\u00e9ments, vous pouvez modifier leur contenu en utilisant des propri\u00e9t\u00e9s comme <code>innerHTML<\/code> ou <code>textContent<\/code>. Voici un exemple montrant comment changer le texte d&rsquo;un \u00e9l\u00e9ment, technique \u00e9galement abord\u00e9e dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-elements-dom-js-textcontent-innerhtml\" target=\"_blank\" rel=\"noopener\">guide complet sur la modification des \u00e9l\u00e9ments du DOM en JavaScript<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Modifier le contenu texte d'un \u00e9l\u00e9ment\nvar element = document.getElementById(\"myElement\");\nelement.textContent = \"Nouveau contenu\";\n\n\/\/ Modifier le contenu HTML d'un \u00e9l\u00e9ment\nelement.innerHTML = \"<strong>Nouveau contenu HTML<\/strong>\";\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter et Supprimer des \u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Le DOM permet \u00e9galement de cr\u00e9er et de supprimer des \u00e9l\u00e9ments \u00e0 partir de z\u00e9ro. Utilisez les m\u00e9thodes <code>createElement<\/code>, <code>appendChild<\/code>, et <code>removeChild<\/code> pour ajouter ou retirer des \u00e9l\u00e9ments. Pour en savoir plus sur ces techniques, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\" target=\"_blank\" rel=\"noopener\">tutoriel sur l&rsquo;ajout d&rsquo;\u00e9l\u00e9ments au DOM en JavaScript<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un nouvel \u00e9l\u00e9ment\nvar newElement = document.createElement(\"div\");\nnewElement.textContent = \"Je suis un nouveau div\";\n\n\/\/ Ajouter le nouvel \u00e9l\u00e9ment \u00e0 la page\ndocument.body.appendChild(newElement);\n\n\/\/ Supprimer un \u00e9l\u00e9ment existant\nvar elementToRemove = document.getElementById(\"elementToRemove\");\nelementToRemove.parentNode.removeChild(elementToRemove);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Manipuler les Styles CSS<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement manipuler les styles CSS des \u00e9l\u00e9ments via l&rsquo;Objet Document. Utilisez la propri\u00e9t\u00e9 <code>style<\/code> pour changer les styles en ligne. Apprenez plus en d\u00e9tails dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-style-des-elements-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel sur la modification de style en JavaScript<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Modifier les styles CSS d'un \u00e9l\u00e9ment\nvar element = document.getElementById(\"myElement\");\nelement.style.color = \"red\"; \/\/ Changer la couleur du texte\nelement.style.fontSize = \"20px\"; \/\/ Changer la taille de la police\nelement.style.display = \"none\"; \/\/ Cacher l'\u00e9l\u00e9ment\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des \u00c9v\u00e9nements<\/h3>\n\n\n\n<p>La gestion des \u00e9v\u00e9nements est essentielle pour rendre vos pages interactives. Vous pouvez utiliser la m\u00e9thode <code>addEventListener<\/code> pour attacher des gestionnaires d&rsquo;\u00e9v\u00e9nements aux \u00e9l\u00e9ments. Cette technique est illustr\u00e9e dans notre article sur la <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\" target=\"_blank\" rel=\"noopener\">gestion des \u00e9v\u00e9nements en JavaScript<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Ajouter un gestionnaire d'\u00e9v\u00e9nements\nvar button = document.getElementById(\"myButton\");\nbutton.addEventListener(\"click\", function() {\n    alert(\"Le bouton a \u00e9t\u00e9 cliqu\u00e9 !\");\n});\n\n\/\/ Retirer un gestionnaire d'\u00e9v\u00e9nements\nbutton.removeEventListener(\"click\", handleClick);\n\nfunction handleClick() {\n    alert(\"Le bouton a \u00e9t\u00e9 cliqu\u00e9 !\");\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les S\u00e9lecteurs Avanc\u00e9s<\/h3>\n\n\n\n<p>Avec <code>querySelectorAll<\/code>, vous pouvez s\u00e9lectionner plusieurs \u00e9l\u00e9ments en utilisant des s\u00e9lecteurs avanc\u00e9s tels que des combinaisons de classes et d&rsquo;attributs, et ensuite it\u00e9rer sur ces \u00e9l\u00e9ments. En savoir plus sur les s\u00e9lecteurs avanc\u00e9s dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/acceder-aux-elements-du-dom-en-javascript\" target=\"_blank\" rel=\"noopener\"> article d\u00e9di\u00e9<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner plusieurs \u00e9l\u00e9ments\nvar elements = document.querySelectorAll(\".myClass\");\n\n\/\/ It\u00e9rer sur les \u00e9l\u00e9ments s\u00e9lectionn\u00e9s\nelements.forEach(function(element) {\n    element.style.backgroundColor = \"yellow\";\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 approfondir notre compr\u00e9hension de la manipulation du DOM, voici quelques exemples avanc\u00e9s qui illustrent son potentiel. N&rsquo;oubliez pas de consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-le-bom-en-javascript-definition\" target=\"_blank\" rel=\"noopener\">guide sur le BOM en JavaScript<\/a> pour une vue d&rsquo;ensemble.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation Dynamique d&rsquo;Une Liste<\/h4>\n\n\n\n<p>Imaginons que vous souhaitiez cr\u00e9er une liste d&rsquo;\u00e9l\u00e9ments de mani\u00e8re dynamique en utilisant JavaScript, une technique pratique pour g\u00e9n\u00e9rer du contenu. Vous trouverez d&rsquo;autres exemples d\u00e9taill\u00e9s dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-elements-au-dom-js-append-prepend\" target=\"_blank\" rel=\"noopener\">tutoriel sur l&rsquo;ajout d&rsquo;\u00e9l\u00e9ments au DOM<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er une liste de mani\u00e8re dynamique\nvar list = document.createElement(\"ul\");\n\nfor (var i = 1; i <= 5; i++) {\n    var listItem = document.createElement(\"li\");\n    listItem.textContent = \"\u00c9l\u00e9ment \" + i;\n    list.appendChild(listItem);\n}\n\ndocument.body.appendChild(list);\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Formulaire Dynamique<\/h4>\n\n\n\n<p>Il est \u00e9galement possible de cr\u00e9er des formulaires dynamiques o\u00f9 les champs sont ajout\u00e9s ou supprim\u00e9s \u00e0 la vol\u00e9e. Pour plus d'inspirations sur la gestion dynamique, visitez notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\" target=\"_blank\" rel=\"noopener\">guide sur l'utilisation des \u00e9couteurs d'\u00e9v\u00e9nements en JavaScript<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un formulaire dynamique\nvar form = document.createElement(\"form\");\n\nvar input = document.createElement(\"input\");\ninput.type = \"text\";\ninput.placeholder = \"Nom\";\n\nvar button = document.createElement(\"button\");\nbutton.textContent = \"Soumettre\";\n\nform.appendChild(input);\nform.appendChild(button);\n\ndocument.body.appendChild(form);\n\n\/\/ Ajouter un gestionnaire d'\u00e9v\u00e9nements\nbutton.addEventListener(\"click\", function(event) {\n    event.preventDefault();\n    alert(\"Formulaire soumis: \" + input.value);\n});\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Projets R\u00e9els et Applications Pratiques<\/h4>\n\n\n\n<p>Prenons un exemple plus complet o\u00f9 l'Objet Document est utilis\u00e9 dans un contexte de projet r\u00e9el. Imaginons une application de To-Do List o\u00f9 chaque t\u00e2che peut \u00eatre ajout\u00e9e ou supprim\u00e9e dynamiquement. Vous pouvez consulter davantage d'applications pratiques sur notre <a href=\"https:\/\/wikiform.fr\/codespace\/tutoriel-manipulation-du-dom-en-javascript\" target=\"_blank\" rel=\"noopener\">tutoriel d\u00e9taill\u00e9 sur la manipulation du DOM<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Application de liste de t\u00e2ches\nvar taskList = document.createElement(\"ul\");\ndocument.body.appendChild(taskList);\n\nvar input = document.createElement(\"input\");\ninput.type = \"text\";\ninput.placeholder = \"Nouvelle t\u00e2che\";\n\nvar addButton = document.createElement(\"button\");\naddButton.textContent = \"Ajouter\";\n\ndocument.body.appendChild(input);\ndocument.body.appendChild(addButton);\n\naddButton.addEventListener(\"click\", function() {\n    if (input.value.trim()) {\n        var taskItem = document.createElement(\"li\");\n        taskItem.textContent = input.value;\n\n        var deleteButton = document.createElement(\"button\");\n        deleteButton.textContent = \"Supprimer\";\n        deleteButton.addEventListener(\"click\", function() {\n            taskList.removeChild(taskItem);\n        });\n\n        taskItem.appendChild(deleteButton);\n        taskList.appendChild(taskItem);\n\n        input.value = \"\";\n    }\n});\n<\/code><\/pre>\n\n\n\n<p>En explorant davantage l'Objet Document et ses capacit\u00e9s, vous pouvez consulter des ressources externes pour \u00e9largir votre compr\u00e9hension. Le site <a href=\"https:\/\/developer.mozilla.org\/fr\/\" target=\"_blank","protected":false},"excerpt":{"rendered":"<p>JavaScript: Manipulation du DOM avec l&rsquo;Objet Document est une comp\u00e9tence essentielle pour les d\u00e9veloppeurs web. Ma\u00eetriser l&rsquo;Objet Document dans le BOM (Browser Object Model) permet&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2891,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5682","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\/5682","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=5682"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5682\/revisions"}],"predecessor-version":[{"id":5683,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5682\/revisions\/5683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2891"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}