{"id":476958,"date":"2023-08-09T09:05:36","date_gmt":"2023-08-09T09:05:36","guid":{"rendered":""},"modified":"2023-09-05T11:13:45","modified_gmt":"2023-09-05T11:13:45","slug":"document-object-model-dom","status":"publish","type":"wiki","link":"https:\/\/oneproxy.pro\/fr\/wiki\/document-object-model-dom\/","title":{"rendered":"Mod\u00e8le objet de document (DOM)"},"content":{"rendered":"<p>Le Document Object Model (DOM) est une interface essentielle qui permet aux d\u00e9veloppeurs d&#039;interagir avec des documents Web \u00e0 l&#039;aide de langages de script tels que JavaScript. Il repr\u00e9sente une vue structur\u00e9e, hi\u00e9rarchique et logique du contenu d&#039;un document Web, tel que HTML ou XML, sous la forme d&#039;une structure arborescente.<\/p>\n<h2>La gen\u00e8se du mod\u00e8le objet de document (DOM)<\/h2>\n<p>Le concept de DOM est apparu pour la premi\u00e8re fois entre le milieu et la fin des ann\u00e9es 1990 en raison de la n\u00e9cessit\u00e9 de permettre un contenu Web plus interactif. Avec l\u2019av\u00e8nement des sites Web dynamiques et l\u2019utilisation g\u00e9n\u00e9ralis\u00e9e de JavaScript, il \u00e9tait n\u00e9cessaire de disposer d\u2019un mod\u00e8le permettant aux scripts de modifier la structure, le style et le contenu du document. Le World Wide Web Consortium (W3C) s&#039;est charg\u00e9 de cr\u00e9er une API standardis\u00e9e \u00e0 cet effet, ce qui a abouti au d\u00e9veloppement du DOM.<\/p>\n<p>Le premier niveau DOM standard, DOM niveau 1, a \u00e9t\u00e9 introduit par le W3C en 1998. Il fournissait un mod\u00e8le complet pour l&#039;int\u00e9gralit\u00e9 d&#039;un document HTML ou XML, comprenant les moyens de modifier n&#039;importe quelle partie du document.<\/p>\n<h2>Extension du mod\u00e8le objet de document (DOM)<\/h2>\n<p>Le DOM est essentiellement une plate-forme et une interface neutre en termes de langage qui permet aux programmes et aux scripts d&#039;acc\u00e9der et de mettre \u00e0 jour dynamiquement le contenu, la structure et le style d&#039;un document.<\/p>\n<p>Le DOM est organis\u00e9 en une hi\u00e9rarchie de n\u0153uds, chacun repr\u00e9sentant une partie du document, telle que des \u00e9l\u00e9ments, des attributs et du texte. Cette arborescence logique facilite la navigation et la manipulation du contenu du document.<\/p>\n<p>Un document Web est mod\u00e9lis\u00e9 comme une arborescence d&#039;objets qui ont tous des propri\u00e9t\u00e9s et des m\u00e9thodes et peuvent contenir d&#039;autres objets. Par exemple, un document HTML est transform\u00e9 en objets repr\u00e9sentant des \u00e9l\u00e9ments tels que \u00ab body \u00bb, \u00ab div \u00bb, \u00ab span \u00bb et \u00ab p \u00bb, ainsi que leurs attributs et leur contenu textuel.<\/p>\n<h2>Comment fonctionne le mod\u00e8le objet de document (DOM)<\/h2>\n<p>La structure interne du DOM est organis\u00e9e comme une arborescence de n\u0153uds. Le n\u0153ud le plus \u00e9lev\u00e9 est le <code data-no-translation=\"\">Document<\/code> n\u0153ud, qui repr\u00e9sente l\u2019int\u00e9gralit\u00e9 du document. En dessous, le <code data-no-translation=\"\">Element<\/code> les n\u0153uds correspondent aux \u00e9l\u00e9ments HTML de la page, <code data-no-translation=\"\">Attribute<\/code> les n\u0153uds contiennent les attributs des \u00e9l\u00e9ments, et <code data-no-translation=\"\">Text<\/code> les n\u0153uds contiennent le contenu textuel des \u00e9l\u00e9ments.<\/p>\n<p>Cette structure hi\u00e9rarchique permet aux d\u00e9veloppeurs de parcourir l&#039;arborescence du document et d&#039;utiliser les m\u00e9thodes API pour s\u00e9lectionner, cr\u00e9er, modifier ou supprimer des n\u0153uds.<\/p>\n<p>Voici un exemple de l&#039;apparence d&#039;un document HTML sous forme d&#039;arborescence DOM\u00a0:<\/p>\n<pre><div class=\"bg-black rounded-md mb-4\"><div class=\"flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md\"><span>math\u00e9matique<\/span><button class=\"flex ml-auto gap-2\"><svg stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" viewbox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"h-4 w-4\" height=\"1em\" width=\"1em\" ><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"><\/path><rect x=\"8\" y=\"2\" width=\"8\" height=\"4\" rx=\"1\" ry=\"1\"><\/rect><\/svg>Copier le code<\/button><\/div><div class=\"p-4 overflow-y-auto\"><code class=\"!whitespace-pre hljs language-mathematica\" data-no-translation=\"\"><span class=\"hljs-variable\">Document<\/span>\n    \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">html<\/span>\n        \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">head<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">title<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"Title of the Document\"<\/span>\n        \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">body<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">h1<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"Hello, world!\"<\/span>\n            \u21b3 <span class=\"hljs-built_in\">Element<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-variable\">p<\/span>\n                \u21b3 <span class=\"hljs-built_in\">Text<\/span><span class=\"hljs-operator\">:<\/span> <span class=\"hljs-string\">\"This is a paragraph.\"<\/span>\n<\/code><\/div><\/div><\/pre>\n<h2>Principales fonctionnalit\u00e9s du mod\u00e8le objet de document (DOM)<\/h2>\n<ol>\n<li>\n<p><strong>Structure arborescente<\/strong>: Le DOM repr\u00e9sente un document dans une structure arborescente logique, ce qui rend la navigation, la s\u00e9lection et la manipulation simples et intuitives.<\/p>\n<\/li>\n<li>\n<p><strong>Langue neutre<\/strong>: Le DOM n&#039;est li\u00e9 \u00e0 aucun langage de programmation particulier. Il s&#039;agit d&#039;une convention pour repr\u00e9senter et interagir avec des objets au format HTML, XML et d&#039;autres types de documents.<\/p>\n<\/li>\n<li>\n<p><strong>Acc\u00e8s dynamique et mise \u00e0 jour<\/strong>: Le DOM permet aux programmes d&#039;acc\u00e9der et de mettre \u00e0 jour dynamiquement le contenu, la structure et le style d&#039;un document.<\/p>\n<\/li>\n<li>\n<p><strong>Standardis\u00e9<\/strong>: Le DOM est une norme du W3C, garantissant son acceptation g\u00e9n\u00e9ralis\u00e9e et sa compatibilit\u00e9 sur diff\u00e9rents navigateurs et plates-formes.<\/p>\n<\/li>\n<\/ol>\n<h2>Types de mod\u00e8le objet de document (DOM)<\/h2>\n<p>La sp\u00e9cification DOM est divis\u00e9e en plusieurs \u00ab niveaux \u00bb et \u00ab modules \u00bb, chacun ajoutant des caract\u00e9ristiques et des fonctionnalit\u00e9s au pr\u00e9c\u00e9dent. Les types de cl\u00e9s incluent\u00a0:<\/p>\n<table>\n<thead>\n<tr>\n<th>Niveau\/Type DOM<\/th>\n<th>Br\u00e8ve description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM niveau 1<\/strong><\/td>\n<td>Fourni un mod\u00e8le de base pour des documents HTML ou XML entiers, y compris des m\u00e9thodes pour manipuler les \u00e9l\u00e9ments et leurs attributs.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM niveau 2<\/strong><\/td>\n<td>Introduction de fonctionnalit\u00e9s telles que la gestion des espaces de noms, un module de style prenant en charge CSS et plusieurs nouvelles interfaces pour g\u00e9rer les tables, les \u00e9v\u00e9nements, etc.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM niveau 3<\/strong><\/td>\n<td>Ajout de la prise en charge de XPath et de la gestion des \u00e9v\u00e9nements clavier, introduction d&#039;interfaces pour le chargement et l&#039;enregistrement de documents.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM niveau 4<\/strong><\/td>\n<td>Simplification du DOM de base en r\u00e9duisant les d\u00e9pendances, introduction de promesses pour les op\u00e9rations asynchrones et ajout de fonctionnalit\u00e9s suppl\u00e9mentaires telles que des fonctionnalit\u00e9s parentales pour une manipulation plus facile des n\u0153uds.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Utilisation du mod\u00e8le objet de document (DOM)<\/h2>\n<p>Le DOM est utilis\u00e9 chaque fois qu&#039;une page Web est manipul\u00e9e \u00e0 l&#039;aide de JavaScript. Il s&#039;agit de l&#039;API fondamentale pour de nombreuses technologies Web.<\/p>\n<p>Les d\u00e9veloppeurs utilisent le DOM pour modifier dynamiquement l&#039;apparence, la convivialit\u00e9 et le contenu d&#039;une page Web sans n\u00e9cessiter un rechargement complet de la page, permettant ainsi des interfaces utilisateur interactives et r\u00e9actives.<\/p>\n<p>Malgr\u00e9 sa puissance, le DOM n\u2019est pas sans probl\u00e8mes. Il peut devenir lent s&#039;il n&#039;est pas utilis\u00e9 avec pr\u00e9caution, en particulier avec des documents Web volumineux ou complexes. Une manipulation DOM mal optimis\u00e9e peut entra\u00eener un rendu lent des pages et des interfaces qui ne r\u00e9pondent pas. Pour r\u00e9soudre ce probl\u00e8me, les d\u00e9veloppeurs utilisent souvent des biblioth\u00e8ques ou des frameworks comme jQuery, React ou Vue.js, qui offrent des API de niveau sup\u00e9rieur pour une manipulation efficace du DOM.<\/p>\n<h2>Caract\u00e9ristiques du DOM et comparaison avec des termes similaires<\/h2>\n<table>\n<thead>\n<tr>\n<th>Terme<\/th>\n<th>Description<\/th>\n<th>Comparaison<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOMAINE<\/strong><\/td>\n<td>Une API pour les documents HTML et XML, fournissant une repr\u00e9sentation structurelle du document et permettant aux d\u00e9veloppeurs de manipuler son contenu et sa pr\u00e9sentation visuelle.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>Le mod\u00e8le d&#039;objet CSS (CSSOM) est une carte de styles CSS, similaire au DOM mais sp\u00e9cifiquement pour CSS. Il permet la manipulation des feuilles de style et des styles appliqu\u00e9s au DOM.<\/td>\n<td>Alors que DOM se concentre sur la structure du document, CSSOM se concentre sur la couche de pr\u00e9sentation.<\/td>\n<\/tr>\n<tr>\n<td><strong>Ombre DOM<\/strong><\/td>\n<td>Un m\u00e9canisme pour encapsuler des parties d&#039;une arborescence DOM pour l&#039;impl\u00e9mentation de composants Web. Il isole des parties du DOM pour les \u00ab cacher \u00bb de l\u2019arborescence principale des documents.<\/td>\n<td>Contrairement au DOM classique, Shadow DOM fournit une encapsulation de style et de comportement.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Perspectives futures li\u00e9es au mod\u00e8le objet de document (DOM)<\/h2>\n<p>\u00c0 mesure que les technologies Web continuent d&#039;\u00e9voluer, l&#039;API DOM est \u00e9galement susceptible de se d\u00e9velopper et de s&#039;am\u00e9liorer. Les d\u00e9veloppements futurs potentiels incluent des m\u00e9thodes plus efficaces de manipulation du DOM, une int\u00e9gration am\u00e9lior\u00e9e avec les normes Web \u00e9mergentes et l&#039;\u00e9volution continue de la sp\u00e9cification HTML elle-m\u00eame.<\/p>\n<p>Un d\u00e9veloppement int\u00e9ressant en cours est l\u2019adoption progressive des composants Web, qui permettent la cr\u00e9ation de balises HTML encapsul\u00e9es et r\u00e9utilisables. Ceci est \u00e9troitement li\u00e9 au Shadow DOM, qui fournit une m\u00e9thode d&#039;encapsulation des \u00e9l\u00e9ments DOM.<\/p>\n<h2>Mod\u00e8le objet de document (DOM) et serveurs proxy<\/h2>\n<p>Un serveur proxy est un interm\u00e9diaire qui transmet les requ\u00eates et les r\u00e9ponses entre un client et un serveur. Alors que le DOM s&#039;occupe principalement de la structure et de la manipulation des documents Web c\u00f4t\u00e9 client, les serveurs proxy fonctionnent au niveau du r\u00e9seau.<\/p>\n<p>Cependant, l&#039;intersection des deux peut \u00eatre trouv\u00e9e dans des sc\u00e9narios dans lesquels un serveur proxy peut modifier le contenu d&#039;un document Web. Par exemple, un serveur proxy peut ajouter, supprimer ou modifier des \u00e9l\u00e9ments DOM dans une page Web avant qu&#039;elle n&#039;atteigne le client. Cela peut \u00eatre utilis\u00e9 pour diverses raisons, telles que l&#039;injection de scripts, la suppression d&#039;\u00e9l\u00e9ments ind\u00e9sirables ou la modification de contenu \u00e0 des fins de localisation ou de personnalisation.<\/p>\n<h2>Liens connexes<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_new\" rel=\"noopener nofollow\">MDN Web Docs\u00a0: Mod\u00e8le d&#039;objet de document (DOM)<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_new\" rel=\"noopener nofollow\">Norme DOM W3C<\/a><\/li>\n<li><a href=\"https:\/\/javascript.info\/dom\" target=\"_new\" rel=\"noopener nofollow\">Informations JavaScript\u00a0: le DOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Principes de base de Google\u00a0Web\u00a0: comment fonctionnent les navigateurs<\/a><\/li>\n<\/ul>\n<p>Cet aper\u00e7u doit fournir une compr\u00e9hension compl\u00e8te du mod\u00e8le objet de document (DOM), de son origine, de son fonctionnement, de ses caract\u00e9ristiques et de la fa\u00e7on dont il est susceptible d&#039;\u00e9voluer. Le DOM reste la pierre angulaire du d\u00e9veloppement Web interactif et continuera \u00e0 jouer un r\u00f4le essentiel \u00e0 mesure que les technologies Web progressent.<\/p>","protected":false},"featured_media":468251,"menu_order":0,"template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-476958","wiki","type-wiki","status-publish","has-post-thumbnail","hentry"],"acf":{"faq_title":"Frequently Asked Questions about <mark>Document Object Model (DOM): A Comprehensive Overview<\/mark>","faq_items":[{"question":"What is the Document Object Model (DOM)?","answer":"<p>The Document Object Model (DOM) is an interface that allows developers to interact with web documents using scripting languages like JavaScript. It represents the contents of a web document, such as HTML or XML, in a structured, hierarchical, and logical tree-like structure.<\/p>"},{"question":"When was the Document Object Model (DOM) first introduced?","answer":"<p>The concept of the DOM came into existence in the mid-to-late 1990s, with the World Wide Web Consortium (W3C) introducing the first standard DOM level, DOM Level 1, in 1998.<\/p>"},{"question":"How does the Document Object Model (DOM) work?","answer":"<p>The DOM works by representing a web document in a tree-like structure, with the topmost node being the <code>Document<\/code> node, representing the entire document. Below this, there are <code>Element<\/code> nodes, <code>Attribute<\/code> nodes, and <code>Text<\/code> nodes, each representing elements, attributes, and text within the document. This structure allows developers to navigate the document tree and use API methods to select, create, modify, or delete nodes.<\/p>"},{"question":"What are the key features of the Document Object Model (DOM)?","answer":"<p>The key features of the DOM include its tree-like structure, making it easy to navigate and manipulate; its language-neutrality, making it compatible with any programming language; its dynamic access and update capabilities; and its status as a W3C standard, ensuring widespread acceptance and compatibility.<\/p>"},{"question":"Are there different types of Document Object Model (DOM)?","answer":"<p>Yes, the DOM specification is divided into several \"levels\" and \"modules\", each adding features and functionality to the previous ones. These include DOM Level 1, DOM Level 2, DOM Level 3, and DOM Level 4.<\/p>"},{"question":"How is the Document Object Model (DOM) used?","answer":"<p>The DOM is used to dynamically change the look, feel, and content of a web page without requiring a full page reload. This makes for interactive and responsive user interfaces. However, the DOM can become slow if not used carefully, especially with large or complex web documents.<\/p>"},{"question":"How does the Document Object Model (DOM) relate to proxy servers?","answer":"<p>While the DOM is primarily concerned with the structure and manipulation of web documents on the client-side, proxy servers operate at the network level. However, they intersect when a proxy server modifies the contents of a web document before it reaches the client, such as injecting scripts, removing unwanted elements, or modifying content for localization or customization purposes.<\/p>"},{"question":"What are the future perspectives related to the Document Object Model (DOM)?","answer":"<p>The DOM API is likely to expand and improve as web technologies continue to evolve. Potential future developments include more efficient methods of manipulating the DOM, improved integration with emerging web standards, and the ongoing evolution of the HTML specification itself.<\/p>"}]},"_links":{"self":[{"href":"https:\/\/oneproxy.pro\/fr\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/fr\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/fr\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/fr\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/fr\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/fr\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}