aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/element/outerhtml
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/api/element/outerhtml
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/api/element/outerhtml')
-rw-r--r--files/es/web/api/element/outerhtml/index.html143
1 files changed, 143 insertions, 0 deletions
diff --git a/files/es/web/api/element/outerhtml/index.html b/files/es/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..7e9647f0db
--- /dev/null
+++ b/files/es/web/api/element/outerhtml/index.html
@@ -0,0 +1,143 @@
+---
+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:
+// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// La cadena '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
+// 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:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;This is a div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // logs "DIV"
+
+d.outerHTML = "&lt;p&gt;This paragraph replaced the original div.&lt;/p&gt;";
+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 = "&lt;div&gt;This div replaced a paragraph.&lt;/div&gt;";
+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>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Prestación</th>
+ <th>Firefox (Gecko)</th>
+ <th>Chrome</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Soporte 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>Prestiación</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Mobile</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Soporte básico</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatGeckoMobile("11") }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ <td>{{ CompatVersionUnknown() }}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<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>