blob: faafee09bb4af545ff85a464cb3c7e5c8821da0a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: Element.outerHTML
slug: Web/API/Element/outerHTML
translation_of: Web/API/Element/outerHTML
---
<p>{{APIRef("DOM")}}</p>
<h2 id="Summary" name="Summary">Sumário</h2>
<p>O atributo <code>outerHTML</code> 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.</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<p><em>var conteudo</em> = <em>elemento</em>.outerHTML;</p>
<p>Na atribuição, <em>conteudo</em> armazena o fragmento de código HTML que descreve o elemento e seus descentes.</p>
<pre class="eval"><em>elemento</em>.outerHTML = conteudo;
</pre>
<p><code>Atribui a <em>elemento</em></code> os nós obtidos pela análise da string <code>conteudo</code>, tendo nó pai de elemento como nó de contexto o para o algoritmo de análise do fragmento de código HTML.</p>
<h2 id="Examples" name="Examples">Exemplos</h2>
<p>Obtendo o valor da propriedade outerHtml de um elemento :</p>
<pre class="brush: js">// 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.
</pre>
<p>Substituindo um nó atribuindo- lhe a propriedade outerHTML</p>
<pre class="brush: js">// 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.
</pre>
<h2 id="Notas">Notas</h2>
<p>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 <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> com o código de erro <code>NO_MODIFICATION_ALLOWED_ERR</code>. Por exemplo:</p>
<pre class="brush: js">document.documentElement.outerHTML = "test"; // Irá lançar uma DOMException
</pre>
<p>inclusive, quando o elemento for substituído na estrutura do documento, a variável a qual a propriedade <code>outerHTML</code> foi atribuída ainda irá conter uma referência para o elemento original.</p>
<pre class="brush: js">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";
</pre>
<h2 id="Specification" name="Specification">Especificação</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
<td>{{ Spec2('DOM Parsing') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{ CompatGeckoDesktop("11") }}</td>
<td>0.2</td>
<td>4.0</td>
<td>7</td>
<td>1.3</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>
<p>Suporte básico</p>
</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatGeckoMobile("11") }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{domxref("HTMLElement.outerText")}}</li>
<li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">outerHTML Property</a> </li>
</ul>
|
