diff options
Diffstat (limited to 'files/it/web/api/element/innerhtml/index.html')
| -rw-r--r-- | files/it/web/api/element/innerhtml/index.html | 213 |
1 files changed, 0 insertions, 213 deletions
diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html deleted file mode 100644 index 6fbdb3c47b..0000000000 --- a/files/it/web/api/element/innerhtml/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Element.innerHTML -slug: Web/API/Element/innerHTML -tags: - - API - - DOM - - DOM Parsing - - Element - - Parsing HTML - - Proprietà - - Referenza - - innerHTML -translation_of: Web/API/Element/innerHTML ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary">La proprietà {{domxref("Element")}} <strong><code>innerHTML</code></strong> ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.</span></p> - -<div class="note"><strong>Note: </strong>Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri <code>(&)</code>, <code>(<)</code>, o <code>(>)</code>, <code>innerHTML</code> restituisce questi caratteri come entità HTML <code>"&amp;"</code>, <code>"&lt;"</code> e <code>"&gt;"</code> rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.</div> - -<p>Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p> - -<h2 id="Sintassi">Sintassi</h2> - -<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML; - -<var>element</var>.innerHTML = <var>htmlString</var>; -</pre> - -<h3 id="Valore">Valore</h3> - -<p>Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di <code>innerHTML</code> rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa <var>htmlString</var>.</p> - -<h3 id="Eccezioni">Eccezioni</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>È stato effettuato un tentativo di impostare il valore di <code>innerHTML</code> utilizzando una stringa che non è HTML correttamente formato.</dd> - <dt><code>NoModificationAllowedError</code></dt> - <dd>È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.</dd> -</dl> - -<h2 id="Note_di_utilizzo">Note di utilizzo</h2> - -<p>La proprietà <code>innerHTML</code> può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.</p> - -<h3 id="Leggere_i_contenuti_HTML_di_un_elemento">Leggere i contenuti HTML di un elemento</h3> - -<p>La lettura di <code>innerHTML</code> fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.</p> - -<pre class="brush: js">let contents = myElement.innerHTML;</pre> - -<p>Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.</p> - -<div class="note"> -<p><strong>Note:</strong> Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.</p> -</div> - -<h3 id="Sostituzione_del_contenuto_di_un_elemento">Sostituzione del contenuto di un elemento</h3> - -<p>L'impostazione del valore di <code>innerHTML</code> consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.</p> - -<p>Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:</p> - -<pre class="brush: js">document.body.innerHTML = "";</pre> - -<p>Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri <code>"<"</code> con l'entità HTML <code>"&lt;"</code>, convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di <code>innerHTML</code> viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.</p> - -<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + - document.documentElement.innerHTML.replace(/</g,"&lt;") + - "</pre>";</pre> - -<h4 id="Dettagli_operativi">Dettagli operativi</h4> - -<p>Cosa succede esattamente quando imposti il valore di <code>innerHTML</code>? In questo modo, l'user agent deve seguire questi passaggi:</p> - -<ol> - <li>Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.</li> - <li>Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <code><template></code> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo <code>DocumentFragment</code> creato nel passaggio 1.</li> - <li>Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo <code>DocumentFragment</code>.</li> -</ol> - -<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3> - -<p>Non è raro vedere <code>innerHTML</code> utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.</p> - -<pre class="brush: js">const name = "John"; -// supponiamo che 'el' sia un elemento DOM HTML -el.innerHTML = name; // innocuo in questo caso - -// ... - -name = "<script>alert('Sono John in una noiosa allerta!')</script>"; -el.innerHTML = name; // innocuo in questo caso</pre> - -<p>Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">non deve essere eseguito</a>.</p> - -<p>Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi <code>innerHTML</code> per impostare le stringhe su cui non si ha il controllo. Per esempio:</p> - -<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; -el.innerHTML = name; // mostra l'alert</pre> - -<p>Per questo motivo, si consiglia di non utilizzare <code>innerHTML</code> quando si inserisce testo normale; invece, usa {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.</p> - -<div class="warning"> -<p><strong>Warning:</strong> Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando <code>innerHTML</code> molto probabilmente il tuo codice verrà rifiutato. Ad esempio, <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">se utilizzi <code>innerHTML</code></a> in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">un'estensione del browser</a> e si invia l'estensione a <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, non verrà passato il processo di revisione automatica.</p> -</div> - -<h2 id="Esempio">Esempio</h2> - -<p>In questo esempio viene utilizzato <code>innerHTML</code> per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.</p> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">function log(msg) { - var logElem = document.querySelector(".log"); - - var time = new Date(); - var timeStr = time.toLocaleTimeString(); - logElem.innerHTML += timeStr + ": " + msg + "<br/>"; -} - -log("Registrazione degli eventi del mouse in questo contenitore..."); -</pre> - -<p>La funzione <code>log()</code> crea l'output del log ottenendo l'ora corrente da un oggetto {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe <code>"log"</code>.</p> - -<p>Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):</p> - -<pre class="brush: js">function logEvent(event) { - var msg = "Event <strong>" + event.type + "</strong> at <em>" + - event.clientX + ", " + event.clientY + "</em>"; - log(msg); -}</pre> - -<p>Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:</p> - -<pre class="brush: js">var boxElem = document.querySelector(".box"); - -boxElem.addEventListener("mousedown", logEvent); -boxElem.addEventListener("mouseup", logEvent); -boxElem.addEventListener("click", logEvent); -boxElem.addEventListener("mouseenter", logEvent); -boxElem.addEventListener("mouseleave", logEvent);</pre> - -<h3 id="HTML">HTML</h3> - -<p>L'HTML è abbastanza semplice per il nostro esempio.</p> - -<pre class="brush: html"><div class="box"> - <div><strong>Log:</strong></div> - <div class="log"></div> -</div></pre> - -<p>Il {{HTMLElement("div")}} con la classe <code>"box"</code> è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <code><div></code> la cui classe è <code>"log"</code> è il contenitore per il testo del log stesso.</p> - -<h3 id="CSS">CSS</h3> - -<p>I seguenti stili CSS del nostro contenuto di esempio.</p> - -<pre class="brush: css">.box { - width: 600px; - height: 300px; - border: 1px solid black; - padding: 2px 4px; - overflow-y: scroll; - overflow-x: auto; -} - -.log { - margin-top: 8px; - font-family: monospace; -}</pre> - -<h3 id="Risultato">Risultato</h3> - -<p>Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.</p> - -<p>{{EmbedLiveSample("Esempio", 640, 350)}}</p> - -<h2 id="Specifiche">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td> - <td>{{Spec2('DOM Parsing')}}</td> - <td>Definizione iniziale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> - - - -<p>{{Compat("api.Element.innerHTML")}}</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>{{domxref("Node.textContent")}} e {{domxref("Node.innerText")}}</li> - <li>{{domxref("Element.insertAdjacentHTML()")}}</li> - <li>Parsificare HTML in un albero del DOM: {{domxref("DOMParser")}}</li> - <li>Serializzare di XML o HTML in un albero del DOM: {{domxref("XMLSerializer")}}</li> -</ul> |