blob: c94b4a395d5b01f725cb08488d2ec0aef1455514 (
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
|
---
title: Element.outerHTML
slug: Web/API/Element/outerHTML
translation_of: Web/API/Element/outerHTML
---
<p>{{APIRef("DOM")}}</p>
<h2 id="Summary" name="Summary">Resumen</h2>
<p>El atributo <code>outerHTML</code> del interfaz DOM {{ domxref("element") }} obtiene el fragmento HTML serializado que describe el elemento incluyendo sus descendientes. Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada.</p>
<h2 id="Syntax" name="Syntax">Sintaxis</h2>
<pre class="eval"><em>var content</em> = <em>element</em>.outerHTML;
</pre>
<p>Al retorno, <code>content</code> contendrá el fragmento de HTML serializado que describe al elemento <code>element</code> y a sus descendientes.</p>
<pre class="eval"><em>element</em>.outerHTML = content;
</pre>
<p>Reemplaza el elemento por los nodos generados del análisis de la cadena <code>content</code> con el padre de <code>element</code> como el nodo de contexto para el algoritmo de procesado del fragmento.</p>
<h2 id="Examples" name="Examples">Ejemplos</h2>
<p>Ontener el valor de la propiedas <code>outerHTML</code> de un elemento:</p>
<pre class="brush: js">// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
d = document.getElementById("d");
dump(d.outerHTML);
// La cadena '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// es volcada a la ventana de la consola.
</pre>
<p>Reemplazar un nodo mediante la asignación de la propiedad <code>outerHTML</code>:</p>
<pre class="brush: js">// HTML:
// <div id="container"><div id="d">This is a div.</div></div>
container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // logs "DIV"
d.outerHTML = "<p>This paragraph replaced the original div.</p>";
console.log(container.firstChild.nodeName); // logs "P"
// El div #d no será parte del árbol del documento,
// el nuevo párrafo lo reemplazará.
</pre>
<h2 id="Notas">Notas</h2>
<p>Si el elemento no tiene elemento padre, esto es, si es el elemento raíz del documento, la asignación de su propiedad <code>outerHTML</code> lanzará una <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> con el código de error <code>NO_MODIFICATION_ALLOWED_ERR</code>. Por ejemplo:</p>
<pre class="brush: js">document.documentElement.outerHTML = "test"; // lanza una DOMException
</pre>
<p>Además, aunque el elemento es reemplazado en el documento, la variable cuya propiedad <code>outerHTML</code> fue asignada continuará conteniendo una referencia al elemento original:</p>
<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // muestra: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // sigue mostrando: "P";
</pre>
<h2 id="Specification" name="Specification">Especificación</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Observaciones</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="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
{{Compat("api.Element.outerHTML")}}
<h2 id="Ver_también">Ver también</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">Propiedad outerHTML</a></li>
</ul>
|
