diff options
Diffstat (limited to 'files/pt-br/web/api/element/innerhtml/index.html')
| -rw-r--r-- | files/pt-br/web/api/element/innerhtml/index.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/files/pt-br/web/api/element/innerhtml/index.html b/files/pt-br/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..f9ba30f9cf --- /dev/null +++ b/files/pt-br/web/api/element/innerhtml/index.html @@ -0,0 +1,148 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - Gecko + - NeedsBrowserCompatibility + - Propriedade + - Referência(2) +translation_of: Web/API/Element/innerHTML +--- +<p>{{APIRef("DOM")}}</p> + +<p>A propriedade <strong><code>Element.innerHTML</code></strong> define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.</p> + +<div class="note"><strong>Nota: </strong>Se um nó {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} tem um nó filho que inclui os caracteres (&), (<), ou (>), o innerHTML retornará esses caracteres como &amp, &lt e &gt respectivamente. Utilize {{domxref("Node.textContent")}} para recuperar uma cópia correta do conteúdo desses nós de texto.</div> + +<h2 id="Syntax" name="Syntax">Sintaxe</h2> + +<pre class="syntaxbox notranslate"><em>var content</em> = <em>element</em>.innerHTML;</pre> + +<p>No retorno, <code>content</code> contém o código HTML serializado descrevendo todos os descendentes dos elementos.</p> + +<pre class="syntaxbox notranslate"><em> element</em>.innerHTML = content;</pre> + +<p>Remove todos os elementos filhos, analisa o conteúdo da string e atribui os nós resultantes como filhos do elemento.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><strong><code>SyntaxError</code></strong></dt> + <dd>Foi feita uma tentativa de definir o valor de um <code>innerHTML</code> usando uma string que não é HTML.</dd> + <dt><code>NoModificationAllowedError</code></dt> + <dd>Foi feita uma tentativa de inserir HTML dentro de um nó no qual o pai é um {{domxref("Document")}}.</dd> +</dl> + +<h2 id="Example" name="Example">Exemplo</h2> + +<pre class="brush: html notranslate"><html> +<head></head> +<body> + +<div id="txt"> + <script id="txt0"> x=0 </script> + <noembed id="txt1"> 1 </noembed> + <noframes id="txt2"> 2 </noframes> + <noscript id="txt3"> 3 </noscript> + <div id="txt4"> 4 </div> + <div> + <noscript id="txt5"> 5 </noscript> + </div> + <span id="txt6"> 6 </span> + </div> + + <div id="innerHTMLtxt"></div> +<div id="textContenttxt"><div> + +<script> +for (i = 0; i < 7; i++) { + x = "txt" + i; + document.getElementById(x).firstChild.nodeValue = '&<>'; +} + +document.getElementById("innerHTMLtxt").textContent = document.getElementById("txt").innerHTML +document.getElementById("textContenttxt").textContent = document.getElementById("txt").textContent +</script> + +<body> +</html></pre> + +<pre class="brush: js notranslate">// HTML: +// <div id="d"><p>Content</p> +// <p>Further Elaborated</p> +// </div> + +const d = document.getElementById("d"); +dump(d.innerHTML); + +// a string "<p>Content</p><p>Further Elaborated</p>" +// é exibida na janela do console +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>Essa propriedade fornece uma forma simples de trocar completamente o conteúdo de um elemento. Por exemplo, o conteúdo inteiro do elemento body pode ser excluído ao fazer:</p> + +<pre class="brush: js notranslate">// Troca o conteúdo de body por uma string vazia. +document.body.innerHTML = ""; </pre> + +<p>A propriedade <code>innerHTML</code> de vários tipos de elementos — incluindo {{HTMLElement("body")}} ou {{HTMLElement("html")}} — pode ser retornada ou trocada. Essa também pode ser usada para ver o código fonte de uma página que foi modificada dinamicamente:</p> + +<pre class="brush: js notranslate">// Copie e cole este código, em uma única linha, na barra de endereços +javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>"; +</pre> + +<p>Essa propriedade foi implementada inicialmente pelos navegadores web, e então especificada pela WHATWG e W3C no HTML5. Implementações antigas talvez não tenham implementado-a exatamente da mesma forma. Por exemplo, quando um texto é inserido em uma caixa de texto, o Internet Explorer muda o valor do atributo innerHTML dessa entrada, mas os navegadores Gecko não.</p> + +<h3 id="Considerações_de_segurança">Considerações de segurança</h3> + +<p>Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.</p> + +<pre class="brush: js notranslate">var name = "John"; + +// presumindo que el é um elemento DOM HTML +el.innerHTML = name; // inofensivo, nesse caso + +// ... + +name = "<script>alert('I am John in an annoying alert!')</script>"; +el.innerHTML = name; // inofensivo, nesse caso</pre> + +<p>Embora isso talvez se pareça como um ataque {{interwiki("wikipedia", "cross-site scripting")}}, o resultado é inofensivo. O HTML5 especifica que uma tag {{HTMLElement("script")}}, inserida via <code>innerHTML</code>, <a href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">não deve ser executada</a>.</p> + +<p>No entanto, há formas de se executar JavaScript sem usar elementos {{HTMLElement("script")}}, por isso ainda há um risco de segurança sempre que você usa <code>innerHTML</code> para definir uma string sobre a qual você não tem controle. Por exemplo:</p> + +<pre class="brush: js notranslate" style="font-size: 14px;">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // exibe uma caixa de alerta</pre> + +<p>Por essa razão, recomenda-se que você não use o <code>innerHTML</code> quando estiver inserindo texto puro; como alternativa, utilize {{domxref("node.textContent")}}. Isso não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro.</p> + +<h2 id="Specification" name="Specification">Especificação</h2> + +<table class="standard-table"> + <thead> + <tr style="background-color: rgb(255, 204, 255);"> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td>Definição inicial</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Para aqueles que desejam aderir aos padrões, aqui oferece um conjunto de funções JavaScript para serializar ou analisar XML, de modo a configurar o conteúdo do elemento definido como uma string(s) através do DOM ou recuperando o conteúdo do elemento obtido a partir do DOM como uma string.</li> + <li><a href="/en-US/docs/DOM/Element.insertAdjacentHTML" title="/en-US/docs/DOM/Element.insertAdjacentHTML">insertAdjacentHTML</a> - Uma alternativa para o innerHTML, permitindo você anexar um novo HTML, ao invés de trocá-la.</li> + <li><a class="external" href="http://code.google.com/p/jssaxparser/" title="http://code.google.com/p/jssaxparser/">jssaxparser</a> - Uma solução mais robusta (embora mais pesada) do innerDOM (suporta análise com namespaces, atributos com aspas simples, seções CDATA, etc.), esse é o analisador SAX2 quando usado com seu manipulador de conteúdo DOM. (Oferece String para DOM; DOM para String é <a class="external" href="http://code.assembla.com/brettz9/subversion/nodes/DOMToString" title="http://code.assembla.com/brettz9/subversion/nodes/DOMToString">significantemente mais fácil</a>)</li> + <li>Considerações de eficiência: Em <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html" title="http://www.quirksmode.org/dom/innerhtml.html">quirksmode</a></li> +</ul> |