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, 213 insertions, 0 deletions
diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..6fbdb3c47b --- /dev/null +++ b/files/it/web/api/element/innerhtml/index.html @@ -0,0 +1,213 @@ +--- +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> |