{"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\/it\/wiki\/document-object-model-dom\/","title":{"rendered":"Modello oggetto documento (DOM)"},"content":{"rendered":"<p>Il Document Object Model (DOM) \u00e8 un&#039;interfaccia vitale che consente agli sviluppatori di interagire con i documenti Web utilizzando linguaggi di scripting come JavaScript. Rappresenta una visione strutturata, gerarchica e logica dei contenuti di un documento web, come HTML o XML, come una struttura ad albero.<\/p>\n<h2>La genesi del Document Object Model (DOM)<\/h2>\n<p>Il concetto di DOM \u00e8 nato per la prima volta tra la met\u00e0 e la fine degli anni &#039;90 come risultato della necessit\u00e0 di consentire contenuti web pi\u00f9 interattivi. Con l&#039;avvento dei siti Web dinamici e l&#039;uso diffuso di JavaScript, \u00e8 emersa la necessit\u00e0 di un modello che consentisse agli script di modificare la struttura, lo stile e il contenuto del documento. A questo scopo il World Wide Web Consortium (W3C) si \u00e8 assunto il compito di creare un&#039;API standardizzata, che ha portato allo sviluppo del DOM.<\/p>\n<p>Il primo livello DOM standard, DOM Level 1, \u00e8 stato introdotto dal W3C nel 1998. Forniva un modello completo per un intero documento HTML o XML, compresi i mezzi per modificare qualsiasi parte del documento.<\/p>\n<h2>Espansione del modello oggetto documento (DOM)<\/h2>\n<p>Il DOM \u00e8 essenzialmente una piattaforma e un&#039;interfaccia indipendente dal linguaggio che consente a programmi e script di accedere e aggiornare dinamicamente il contenuto, la struttura e lo stile di un documento.<\/p>\n<p>Il DOM \u00e8 organizzato in una gerarchia di nodi, ciascuno dei quali rappresenta una parte del documento, come elementi, attributi e testo. Questa struttura ad albero logico semplifica la navigazione e la manipolazione dei contenuti del documento.<\/p>\n<p>Un documento web \u00e8 modellato come un albero di oggetti che hanno tutti propriet\u00e0 e metodi e possono contenere altri oggetti. Ad esempio, un documento HTML viene trasformato in oggetti che rappresentano elementi come &quot;body&quot;, &quot;div&quot;, &quot;span&quot; e &quot;p&quot;, nonch\u00e9 i relativi attributi e contenuto testuale.<\/p>\n<h2>Come funziona il Document Object Model (DOM).<\/h2>\n<p>La struttura interna del DOM \u00e8 organizzata come un albero di nodi. Il nodo pi\u00f9 in alto \u00e8 il <code data-no-translation=\"\">Document<\/code> nodo, che rappresenta l&#039;intero documento. Al di sotto di questo, il <code data-no-translation=\"\">Element<\/code> i nodi corrispondono agli elementi HTML nella pagina, <code data-no-translation=\"\">Attribute<\/code> i nodi contengono gli attributi degli elementi e <code data-no-translation=\"\">Text<\/code> i nodi contengono il contenuto testuale degli elementi.<\/p>\n<p>Questa struttura gerarchica consente agli sviluppatori di navigare nell&#039;albero del documento e utilizzare metodi API per selezionare, creare, modificare o eliminare i nodi.<\/p>\n<p>Ecco un esempio di come apparirebbe un documento HTML come albero DOM:<\/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>matematica<\/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>Copia il codice<\/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>Caratteristiche principali del Document Object Model (DOM)<\/h2>\n<ol>\n<li>\n<p><strong>Struttura ad albero<\/strong>: Il DOM rappresenta un documento in una struttura ad albero logico, che rende la navigazione, la selezione e la manipolazione semplici e intuitive.<\/p>\n<\/li>\n<li>\n<p><strong>Neutrale rispetto alla lingua<\/strong>: Il DOM non \u00e8 legato ad alcun linguaggio di programmazione particolare. \u00c8 una convenzione per rappresentare e interagire con oggetti in HTML, XML e altri tipi di documenti.<\/p>\n<\/li>\n<li>\n<p><strong>Accesso e aggiornamento dinamici<\/strong>: Il DOM consente ai programmi di accedere e aggiornare dinamicamente il contenuto, la struttura e lo stile di un documento.<\/p>\n<\/li>\n<li>\n<p><strong>Standardizzato<\/strong>: Il DOM \u00e8 uno standard W3C, che ne garantisce l&#039;ampia accettazione e la compatibilit\u00e0 tra diversi browser e piattaforme.<\/p>\n<\/li>\n<\/ol>\n<h2>Tipi di modello oggetto documento (DOM)<\/h2>\n<p>La specifica DOM \u00e8 divisa in diversi \u201clivelli\u201d e \u201cmoduli\u201d, ciascuno dei quali aggiunge caratteristiche e funzionalit\u00e0 al precedente. I tipi chiave includono:<\/p>\n<table>\n<thead>\n<tr>\n<th>Livello\/tipo DOM<\/th>\n<th>Breve descrizione<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM Livello 1<\/strong><\/td>\n<td>Fornito un modello di base per interi documenti HTML o XML, inclusi metodi per manipolare gli elementi e i loro attributi.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Livello 2<\/strong><\/td>\n<td>Funzionalit\u00e0 introdotte come la gestione dello spazio dei nomi, un modulo di stile che supporta CSS e diverse nuove interfacce per gestire tabelle, eventi, ecc.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Livello 3<\/strong><\/td>\n<td>Aggiunto supporto per XPath e gestione eventi da tastiera, introdotte interfacce per caricare e salvare documenti.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM Livello 4<\/strong><\/td>\n<td>Semplificato il DOM principale riducendo le dipendenze, introdotto promesse per operazioni asincrone e aggiunto pi\u00f9 funzionalit\u00e0 come funzionalit\u00e0 parentali per una pi\u00f9 semplice manipolazione dei nodi.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Utilizzando il Document Object Model (DOM)<\/h2>\n<p>Il DOM viene utilizzato ogni volta che una pagina web viene manipolata utilizzando JavaScript. \u00c8 l&#039;API fondamentale per numerose tecnologie web.<\/p>\n<p>Gli sviluppatori utilizzano il DOM per modificare dinamicamente l&#039;aspetto e il contenuto di una pagina Web senza richiedere il ricaricamento completo della pagina, consentendo interfacce utente interattive e reattive.<\/p>\n<p>Nonostante la sua potenza, il DOM non \u00e8 esente da problemi. Pu\u00f2 diventare lento se non utilizzato con attenzione, soprattutto con documenti Web grandi o complessi. La manipolazione del DOM scarsamente ottimizzata pu\u00f2 portare a un rendering lento della pagina e a interfacce che non rispondono. Per risolvere questo problema, gli sviluppatori utilizzano spesso librerie o framework come jQuery, React o Vue.js, che offrono API di livello superiore per un&#039;efficiente manipolazione del DOM.<\/p>\n<h2>Caratteristiche del DOM e confronto con termini simili<\/h2>\n<table>\n<thead>\n<tr>\n<th>Termine<\/th>\n<th>Descrizione<\/th>\n<th>Confronto<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>DOM<\/strong><\/td>\n<td>Un&#039;API per documenti HTML e XML, che fornisce una rappresentazione strutturale del documento e consente agli sviluppatori di manipolarne il contenuto e la presentazione visiva.<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><strong>CSSOM<\/strong><\/td>\n<td>Il CSS Object Model (CSSOM) \u00e8 una mappa di stili CSS, simile al DOM ma specificatamente per CSS. Permette la manipolazione di fogli di stile e stili applicati al DOM.<\/td>\n<td>Mentre DOM si concentra sulla struttura del documento, CSSOM si concentra sul livello di presentazione.<\/td>\n<\/tr>\n<tr>\n<td><strong>DOM ombra<\/strong><\/td>\n<td>Un meccanismo per incapsulare parti di un albero DOM per l&#039;implementazione di componenti Web. Isola parti del DOM per &quot;nasconderle&quot; dall&#039;albero del documento principale.<\/td>\n<td>A differenza del DOM normale, Shadow DOM fornisce l&#039;incapsulamento di stile e comportamento.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Prospettive future relative al Document Object Model (DOM)<\/h2>\n<p>Poich\u00e9 le tecnologie web continuano ad evolversi, \u00e8 probabile che anche l&#039;API DOM si espanda e migliori. I potenziali sviluppi futuri includono metodi pi\u00f9 efficienti per manipolare il DOM, una migliore integrazione con gli standard web emergenti e la continua evoluzione delle stesse specifiche HTML.<\/p>\n<p>Un interessante sviluppo in corso \u00e8 l&#039;adozione incrementale dei componenti Web, che consente la creazione di tag HTML incapsulati e riutilizzabili. Questo \u00e8 strettamente legato allo Shadow DOM, che fornisce un metodo per incapsulare gli elementi DOM.<\/p>\n<h2>Document Object Model (DOM) e server proxy<\/h2>\n<p>Un server proxy \u00e8 un intermediario che inoltra richieste e risposte tra un client e un server. Mentre il DOM si occupa principalmente della struttura e della manipolazione dei documenti web sul lato client, i server proxy operano a livello di rete.<\/p>\n<p>Tuttavia, l&#039;intersezione dei due pu\u00f2 essere trovata in scenari in cui un server proxy potrebbe modificare il contenuto di un documento web. Ad esempio, un server proxy pu\u00f2 aggiungere, rimuovere o modificare elementi DOM in una pagina web prima che raggiunga il client. Questo potrebbe essere utilizzato per una serie di motivi, come l&#039;inserimento di script, la rimozione di elementi indesiderati o la modifica del contenuto per scopi di localizzazione o personalizzazione.<\/p>\n<h2>Link correlati<\/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\">Documenti Web MDN: modello oggetto documento (DOM)<\/a><\/li>\n<li><a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_new\" rel=\"noopener nofollow\">Norma DOM del W3C<\/a><\/li>\n<li><a href=\"https:\/\/javascript.info\/dom\" target=\"_new\" rel=\"noopener nofollow\">Informazioni JavaScript: il DOM<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/09\/inside-browser-part1\" target=\"_new\" rel=\"noopener nofollow\">Nozioni fondamentali di Google Web: come funzionano i browser<\/a><\/li>\n<\/ul>\n<p>Questa panoramica dovrebbe fornire una comprensione completa del Document Object Model (DOM), della sua origine, di come funziona, delle sue caratteristiche e di come \u00e8 probabile che si evolva. Il DOM rimane una pietra angolare dello sviluppo web interattivo e continuer\u00e0 a svolgere un ruolo fondamentale con l&#039;avanzare delle tecnologie web.<\/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\/it\/wp-json\/wp\/v2\/wiki\/476958","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oneproxy.pro\/it\/wp-json\/wp\/v2\/wiki"}],"about":[{"href":"https:\/\/oneproxy.pro\/it\/wp-json\/wp\/v2\/types\/wiki"}],"version-history":[{"count":0,"href":"https:\/\/oneproxy.pro\/it\/wp-json\/wp\/v2\/wiki\/476958\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oneproxy.pro\/it\/wp-json\/wp\/v2\/media\/468251"}],"wp:attachment":[{"href":"https:\/\/oneproxy.pro\/it\/wp-json\/wp\/v2\/media?parent=476958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}