From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/it/web/api/document_object_model/index.html | 435 --------------------- .../document_object_model/introduction/index.html | 258 ------------ .../index.html | 46 --- 3 files changed, 739 deletions(-) delete mode 100644 files/it/web/api/document_object_model/index.html delete mode 100644 files/it/web/api/document_object_model/introduction/index.html delete mode 100644 files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html (limited to 'files/it/web/api/document_object_model') diff --git a/files/it/web/api/document_object_model/index.html b/files/it/web/api/document_object_model/index.html deleted file mode 100644 index c1877f3642..0000000000 --- a/files/it/web/api/document_object_model/index.html +++ /dev/null @@ -1,435 +0,0 @@ ---- -title: Document Object Model (DOM) -slug: Web/API/Document_Object_Model -tags: - - API - - DOM - - DOM Reference - - Intermediate - - Reference -translation_of: Web/API/Document_Object_Model ---- -
{{DefaultAPISidebar("DOM")}}
- -

Il Document Object Model (DOM) rappresenta una pagina web come un documento con un albero logico di oggetti.

- -

Ogni ramo dell'albero termina in un nodo, e ogni nodo contiene oggetti. Il modello DOM collega le pagine web agli script o ai linguaggi di programmazione. Usualmente significa usare JavaScript, anche se modellare documenti HTML, SVG o XML come oggetti non è parte del linguaggio JavaScript.

- -

I metodi del DOM permettono un accesso programmatico all'albero; tramite i metodi e le proprietà del DOM è possibile modificare la struttura del documento stesso, lo stile e/o il contenuto.

- -

I nodi possono avere degli eventi aggangiati ad essi e quando un evento viene scatenato, l'handler dell'evento viene eseguito.

- -

E' disponibile una introduzione al DOM.

- -

Interfacce DOM

- -
- -
- -

Interfacce DOM obsolete {{obsolete_inline}}

- -

The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:

- -
- -
- -

HTML interfaces

- -

A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.

- -

An HTMLDocument object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.

- -

HTML element interfaces

- -
- -
- -

Other interfaces

- -
- -
- -

Obsolete HTML interfaces {{obsolete_inline}}

- -
- -
- -

SVG interfaces

- -

SVG element interfaces

- -
- -
- -

SVG data type interfaces

- -

Here are the DOM API for data types used in the definitions of SVG properties and attributes.

- -
-

Note: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

-
- -

Static type

- -
- -
- -

Animated type

- -
- -
- - - -
- -
- -

Other SVG interfaces

- -
- -
- -

See also

- - diff --git a/files/it/web/api/document_object_model/introduction/index.html b/files/it/web/api/document_object_model/introduction/index.html deleted file mode 100644 index a3495f7665..0000000000 --- a/files/it/web/api/document_object_model/introduction/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Introduzione al DOM -slug: Web/API/Document_Object_Model/Introduction -tags: - - Beginner - - DOM - - Guida - - HTML DOM - - Introduzione - - Principianti - - Tutorial -translation_of: Web/API/Document_Object_Model/Introduction -original_slug: Web/API/Document_Object_Model/Introduzione ---- -

Il Document Object Model (DOM) è la rappresentazione degli oggetti che comprendono la struttura e il contenuto di un documento sul web. In questa guida, introdurremo brevemente il DOM. Vedremo come il DOM rappresenta un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.

- -

Che cos'è il DOM?

- -

Il Document Object Model (DOM) è una interfaccia di programmazione per documenti HTML e XML. Rappresenta la pagina in modo che i programmi possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti. In questo modo, i linguaggi di programmazione possono connettersi alla pagina.

- -

La pagina web è un documento. Questo documento può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Obkect Model (DOM) rappresenta come entrambi i documenti possono essere manipolati. Il DOM è una rappresentazione ad oggetti della pagina web, che può essere modificata con linguaggi di scripting come JavaScript.

- -

Gli standard W3C DOM e WHATWG DOM sono implementati nei più moderni browsers. Molti browsers estendono lo standard, pertanto è necessario prestare attenzione quando li si utilizza sul Web in cui è possibile accedere ai documenti da vari browser con DOM diversi.

- -

Per esempio, lo standard DOM specifica che il metodo getElementsByTagName usato qui sotto, dovrebbe ritornare una lista di tutti gli elementi <p> nel documento.

- -
const paragrafi = document.getElementsByTagName("p");
-// paragrafi[0] è il primo <p> elemento
-// paragrafi[1] è il secondo <p> elemento, etc.
-alert(paragrafi[0].nodeName);
-
- -

Tutte le proprietà, metodi ed eventi disponibili per la manipolazione e la creazione di pagine web sono organizzate in oggetti (per esempio, l'oggetto document che rappresenta il documento stesso, l'oggetto table che implementa la speciale interfaccia DOM {{domxref("HTMLTableElement")}} per accedere alle tabelle HTML, e così via). Questa documentazione fornisce una documentazione oggetto per oggetto al DOM.

- -

Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il DOM principale definisce gli oggetti che descrivono, fondamentalmente, un documento e gli oggetti al suo interno. Questo viene ampliato come richiesto da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l'HTML DOM API aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.

- -

DOM e JavaScript

- -

Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è {{glossary("JavaScript")}}. Che significa che è scrittp in JavaScript ma usa il DOM per accedere al documenti ed ai suoi elementi. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non potrebbe avere nessun modello o conoscenza sulla pagina web HTML o XML e le loro componenti (ad es. elementi). Ogni elemento nel documento - il documento nel suo insieme, la testata, le tabelle all'interno del documento, le intestazioni delle tabelle, il testo all'interno della cella della tabella - è parte del document object model per quel documento, che può essere accessibile e manipolato usanto il DOM e linguaggi di scripting come Java.

- -

Agli inizi, JavaScript e il DOM 

- -

All'inizio, JavaScript e DOM erano strettamente intrecciati, ma alla fine si sono evoluti in entità separate. Il contenuto della pagina è memorizzato nel DOM e può essere consultato e manipolato tramite JavaScript, in modo da poter scrivere questa equazione approssimativa:

- -

API = DOM + JavaScript

- -

Il DOM è stato progettato per essere indipendente da qualsiasi particolare linguaggio di programmazione, rendendo la rappresentazione strutturale del documento disponibile da un'unica API coerente. Sebbene ci concentriamo esclusivamente su JavaScript in questa documentazione di riferimento, le implementazioni del DOM possono essere costruite per qualsiasi linguaggio, come dimostra questo esempio di Python:

- -
# Esempio DOM in Python
-import xml.dom.minidom as m
-doc = m.parse(r"C:\Projects\Py\chap1.xml")
-doc.nodeName # DOM property of document object
-p_list = doc.getElementsByTagName("para")
-
- -

Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere JavaScript technologies overview.

- -

Accedere al DOM

- -

Tu non devi fare niente di speciale per avere accesso al DOM. Browser differenti hanno differenti implementazione del DOM, e le loro implementazioni variano in base alla conformazione dello standard DOM (il soggetto che tenta di 

- -

Non devi fare nulla di speciale per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni diverse del DOM e queste implementazioni presentano vari gradi di conformità allo standard DOM effettivo (un argomento che cerchiamo di evitare in questa documentazione), ma ogni browser Web utilizza alcuni modelli di oggetti per rendere accessibili le pagine Web tramite JavaScript .

- -

Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <script> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API {{domxref ("document")}} o {{domxref("Window", "window")}} per manipolare il documento stesso o per ottenere i figli di quel documento, che sono i vari elementi nella pagina web. La tua programmazione DOM potrebbe essere qualcosa di semplice come la seguente, che visualizza un messaggio di avviso utilizzando la funzione {{domxref("window.alert", "alert()")}} dalla funzione {{domxref("Window", "window")}} oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.

- -
<body onload="window.alert('Benvenuto nella mia pagina web!');">
-
- -

Un altro esempio. Questa funzione crea un nuovo elemento H1, gli aggiunge del testo (all'elemento) e, infine, aggiunge l'H1 all'albero di questo documento.

- -
<html>
-  <head>
-    <script>
-       // esegui questa funzione quando la pagina è stata caricata
-       window.onload = function() {
-
-         // crea un paio di elementi in una pagina HTML altrimenti vuota
-         const heading = document.createElement("h1");
-         const heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-
- -

Tipi di dati fondamentali

- -

Questo riferimento cerca di descrivere i vari oggetti e tipi in termini semplici. Tuttavia, ci sono diversi tipi di dati che vengono trasmessi all'API di cui dovresti essere a conoscenza.

- -
-

Nota: poiché la stragrande maggioranza del codice che utilizza il DOM ruota attorno alla manipolazione di documenti HTML, è comune fare riferimento ai nodi nel DOM come elementi anche se, a rigor di termini, non tutti i nodi sono un elemento.

-
- -

La tabella seguente descrive brevemente questi tipi di dati.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipi di dati (Interfaccia)Descrizione
{{domxref("Document")}} -

Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà ownerDocument di un elemento restituisce il document a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo DOM document Reference descrive l'oggetto del documento.

-
{{domxref("Node")}}Ogni oggetto situato all'interno di un documento è un nodo di qualche tipo. In un documento HTML, un oggetto può essere un nodo elemento ma anche un nodo testo o nodo attributo.
{{domxref("Element")}}Il tipo element è basado sul node. Si riferisce a un elemento o un nodo di tipo element restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metodo{{domxref("document.createElement()")}} restituisce un riferimento a un oggetto a un node, diciamo solo che questo metodo restituisce l'element che è stato appena creato nel DOM. Gli oggetti element implementano l'interfaccia DOM Element e anche l'interfaccia Node più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia {{domxref("HTMLElement")}} dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio {{domxref("HTMLTableElement")}} per {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}Una nodeList è un array di elementi, simili al tipo ritornanto dal metodo.{{domxref("document.getElementsByTagName()")}}. Gli elementi nel nodeList sono accessibili, da indice, tramite due opzioni: -
    -
  • list.item(1)
    • -
  • list[1]
    • -
- Questi due sono equivalenti. Nel primo, item() è un singolo metodo dell'oggetto nodeList. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.
{{domxref("Attribute")}}Quando un attribute viene restituito da un membro (ad es. con il metodo createAttribute()), si ha un riferimento a un oggetto che espone un'interfaccia speciale (sebbene piccola) per gli attributi. Gli attributi sono nodi nel DOM proprio come gli elementi, anche se raramente li puoi usare come tali.
{{domxref("NamedNodeMap")}}Un namedNodeMap è simile a un array ma è possibile accedere agli elementi in base al nome o all'indice, sebbene quest'ultimo caso sia solo una comodità per l'enumerazione, poiché non sono in un ordine particolare nell'elenco. Un namedNodeMap ha un metodo item() per questo scopo e puoi anche aggiungere e rimuovere elementi da una namedNodeMap.
- -

Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo {{domxref ("Attribute")}} semplicemente come un attribute, ad esempio, e fare riferimento a un array di nodi DOM come nodeList. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.

- -

interfaccia DOM

- -

Questa guida riguarda gli oggetti e le cose reali che puoi usare per manipolare la gerarchia DOM. Ci sono molti punti in cui capire come questi lavori possono essere fonte di confusione. Ad esempio, l'oggetto che rappresenta l'elemento del modulo HTML ottiene la sua proprietà name dall'interfaccia HTMLFormElement ma la sua proprietà className dall'interfaccia HTMLElement. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.
-
- Ma la relazione tra gli oggetti e le interfacce che implementano nel DOM può essere confusa, e quindi questa sezione tenta di dire qualcosa sulle interfacce effettive nella specifica DOM e su come sono rese disponibili.

- -

Interfacce ed oggetti

- -

Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata {{domxref("HTMLTableElement")}}, che include metodi come createCaption e insertRow. Ma poiché è anche un elemento HTML, la table implementa l'interfaccia Element descritta nel capitolo DOM {{domxref ("Element")}}. E infine, poiché un elemento HTML è anche, per quanto riguarda il DOM, un nodo nella struttura ad albero dei nodi che compongono il modello a oggetti per una pagina HTML o XML, l'oggetto table implementa anche l'interfaccia Node di base, da quale Element deriva.

- -

Quando si ottiene un riferimento a un oggetto table, come nell'esempio seguente, si utilizzano abitualmente tutte e tre queste interfacce in modo intercambiabile sull'oggetto, forse senza saperlo.

- -
const table = document.getElementById("table");
-const tableAttrs = table.attributes; // Node/Element interface
-for (let i = 0; i < tableAttrs.length; i++) {
-  // HTMLTableElement interface: border attribute
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
-}
-// HTMLTableElement interface: summary attribute
-table.summary = "note: increased border";
-
- -

Principali interfacce nel DOM

- -

Questa sezione elenca alcune delle interfacce più comunemente utilizzate nel DOM. L'idea non è di descrivere cosa fanno queste API qui, ma di darti un'idea del tipo di metodi e proprietà che vedrai molto spesso mentre usi il DOM. Queste API comuni sono usate negli esempi più lunghi nel capitolo DOM Examples alla fine di questo libro.

- -

Gli oggetti document e window sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto window rappresenta qualcosa di simile al browser e l'oggetto document è la radice del documento stesso. L'Element eredita dall'interfaccia del Node generico e insieme queste due interfacce forniscono molti dei metodi e delle proprietà che usi sui singoli elementi. Questi elementi possono anche avere interfacce specifiche per gestire il tipo di dati contenuti in tali elementi, come nell'esempio dell'oggetto tabella nella sezione precedente.

- -

Di seguito è riportato un breve elenco di API comuni negli script di pagine Web e XML che utilizzano DOM.

- - - -

Test dell'API DOM

- -

Questo documento fornisce esempi per ogni interfaccia che è possibile utilizzare nel proprio sviluppo Web. In alcuni casi, gli esempi sono pagine HTML complete, con l'accesso DOM in un elemento <script>, l'interfaccia (ad es. Pulsanti) necessaria per accendere lo script in un modulo e gli elementi HTML su cui opera il DOM elencati come bene. In questo caso, puoi tagliare e incollare l'esempio in un nuovo documento HTML, salvarlo ed eseguire l'esempio dal browser.

- -

Ci sono alcuni casi, tuttavia, quando gli esempi sono più concisi. Per eseguire esempi che dimostrano solo la relazione di base dell'interfaccia con gli elementi HTML, è possibile impostare una pagina di prova in cui è possibile accedere facilmente alle interfacce dagli script. La seguente pagina Web molto semplice fornisce un elemento <script> nell'intestazione in cui è possibile inserire funzioni che testano l'interfaccia, alcuni elementi HTML con attributi che è possibile recuperare, impostare o altrimenti manipolare e l'interfaccia utente Web necessaria per chiama quelle funzioni dal browser.

- -

Puoi utilizzare questa pagina di prova o crearne una simile per testare le interfacce DOM che ti interessano e vedere come funzionano sulla piattaforma del browser. È possibile aggiornare il contenuto della funzione test() secondo necessità, creare più pulsanti o aggiungere elementi se necessario.

- -
<html>
-<head>
-  <title>DOM Tests</title>
-  <script>
-    function setBodyAttr(attr, value) {
-      if (document.body) document.body[attr] = value;
-      else throw new Error("no support");
-    }
-  </script>
-</head>
-<body>
-  <div style="margin: .5in; height: 400px;">
-    <p><b><tt>text</tt></b></p>
-    <form>
-      <select onChange="setBodyAttr('text',
-        this.options[this.selectedIndex].value);">
-        <option value="black">black</option>
-        <option value="red">red</option>
-      </select>
-      <p><b><tt>bgColor</tt></b></p>
-      <select onChange="setBodyAttr('bgColor',
-        this.options[this.selectedIndex].value);">
-        <option value="white">white</option>
-        <option value="lightgrey">gray</option>
-      </select>
-      <p><b><tt>link</tt></b></p>
-      <select onChange="setBodyAttr('link',
-        this.options[this.selectedIndex].value);">
-        <option value="blue">blue</option>
-        <option value="green">green</option>
-      </select>
-      <small>
-        <a href="http://some.website.tld/page.html" id="sample">
-          (sample link)
-        </a>
-      </small><br />
-      <input type="button" value="version" onclick="ver()" />
-    </form>
-  </div>
-</body>
-</html>
-
- -

Per testare molte interfacce in una singola pagina —ad esempio una "suite" di proprietà che influisce sui colori di una pagina Web— è possibile creare una pagina di test simile con un'intera console di pulsanti, campi di testo e altri elementi HTML. La schermata seguente ti dà un'idea di come le interfacce possono essere raggruppate per il test.

- -
-
Figure 0.1 Esempio DOM Test Page
-Image:DOM_Ref_Introduction_to_the_DOM.gif
- -

In questo esempio, i menu drop-down, aggiornano dinamicamente tali aspetti accessibili della pagina Web come il colore di sfondo (bgColor), il colore dei collegamenti ipertestuali (aLink) e il colore del testo (text). Tuttavia, progettate le vostre pagine di test e testare le interfacce mentre le implementate è una parte importante dell'apprendimento dell'uso efficace del DOM.

- - - - - -
{{DefaultAPISidebar("DOM")}}
diff --git a/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html deleted file mode 100644 index 7e82547d5d..0000000000 --- a/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Individuazione degli elementi DOM mediante selettori -slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors -translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors ---- -

L'API dei selettori fornisce metodi che consentono di recuperare in modo rapido e semplice i nodi {{domxref("Element")}} dal DOM confrontando una serie di selettori. Questo è molto più rapido rispetto alle tecniche passate, in cui era necessario, ad esempio, utilizzare un loop nel codice JavaScript per individuare gli elementi specifici che dovevi trovare.

- -

L'interfaccia NodeSelector

- -

Questa specifica aggiunge due nuovi metodi a qualsiasi oggetto che implementa le interfacce {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}}:

- -
-
querySelector
-
Restituisce il primo nodo {{domxref("Element")}} corrispondente nella sottostruttura del nodo. Se non viene trovato alcun nodo corrispondente, viene restituito null.
-
querySelectorAll
-
Restituisce una {{domxref("NodeList")}} contenente tutti i nodi Element corrispondenti all'interno della sottostruttura del nodo o una NodeList vuota se non vengono trovate corrispondenze.
-
- -
Note: La {{domxref("NodeList")}} restituita da {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} non è dinamica, il che significa che le modifiche nel DOM non si riflettono nella collezione. Questo è diverso dagli altri metodi di DOM querying che restituiscono gli elenchi dei nodi dinamici.
- -

È possibile trovare esempi e dettagli leggendo la documentazione per i metodi {{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}, nonché nell'articolo Code snippets for querySelector.

- -

Selettori

- -

I metodi di selezione accettano uno o più selettori separati da virgola per determinare quale elemento o elementi devono essere restituiti. Ad esempio, per selezionare tutti gli elementi paragrafo (p)  in un documento la cui classe CSS è warning o note, è possibile effettuare le seguenti operazioni:

- -
var special = document.querySelectorAll("p.warning, p.note");
- -

Puoi anche effettuare una query per ID. Per esempio:

- -
var el = document.querySelector("#main, #basic, #exclamation");
- -

Dopo aver eseguito il codice sopra, el contiene il primo elemento nel documento il cui ID è uno di main, basic, o exclamation.

- -

Puoi usare qualsiasi selettore CSS con i metodi querySelector() e querySelectorAll().

- -

Vedi anche

- - -- cgit v1.2.3-54-g00ecf