From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/element/outerhtml/index.html | 144 +++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/pt-br/web/api/element/outerhtml/index.html (limited to 'files/pt-br/web/api/element/outerhtml') diff --git a/files/pt-br/web/api/element/outerhtml/index.html b/files/pt-br/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..1cdfa0826d --- /dev/null +++ b/files/pt-br/web/api/element/outerhtml/index.html @@ -0,0 +1,144 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +translation_of: Web/API/Element/outerHTML +--- +

{{APIRef("DOM")}}

+ +

Sumário

+ +

O atributo outerHTML da estrutura DOM(Document object model) obtem  um fragmento serializado de código HTML descrevendo o elemento incluindo seus descendentes. É possível substituir o elemento em questão com nós obtidos através da análise de uma string.

+ +

Sintaxe

+ +

var conteudo = elemento.outerHTML;

+ +

Na atribuição, conteudo armazena o fragmento de código HTML que descreve o elemento e seus descentes.

+ +
elemento.outerHTML = conteudo;
+
+ +

Atribui a elemento  os nós obtidos pela análise da  string conteudo, tendo nó pai de elemento como nó de contexto o para o algoritmo de análise do fragmento de código HTML.

+ +

Exemplos

+ +

Obtendo o valor da propriedade outerHtml de um elemento :

+ +
// HTML:
+// <div id="d"><p>Conteúdo</p><p>Parágrafo</p></div>
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// A string '<div id="d"><p>Conteúdo</p><p>Parágrafo</p></div>'
+// é mostrada na janela do console.
+
+ +

Substituindo um nó atribuindo- lhe a propriedade outerHTML

+ +
// HTML:
+// <div id="container"><div id="d">Isto é uma div.</div></div>
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // mostra "DIV"
+
+d.outerHTML = "<p>Este parágrafo substitui a div original</p>";
+console.log(container.firstChild.nodeName); // mostra "P"
+
+// A div #d não faz mais parte da estrutura do documento,
+// O novo parágrafo a substituiu.
+
+ +

Notas

+ +

Se o elemento não tiver um nó pai, ou seja se o nó é a raiz do documento, tentar alterar sua propriedade outerHTML irá lançar um  DOMException com o código de erro NO_MODIFICATION_ALLOWED_ERR. Por exemplo:

+ +
document.documentElement.outerHTML = "test";  // Irá lançar uma DOMException
+
+ +

inclusive, quando o elemento for substituído na estrutura do documento, a variável a qual a propriedade outerHTML foi atribuída ainda irá conter uma referência para o elemento original.

+ +
var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // mostra: "P"
+p.outerHTML = "<div>Esta div substituiu o parágrafo.</div>";
+console.log(p.nodeName); // ainda contém "P";
+
+ +

Especificação

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilidade com os navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico{{ CompatGeckoDesktop("11") }}0.24.071.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+

Suporte básico

+ 		{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("11") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Veja também

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