initial commit

14 files changed, 1832 insertions, 0 deletions

diff --git a/files/es/web/api/htmlelement/change_event/index.html b/files/es/web/api/htmlelement/change_event/index.html
new file mode 100644
index 0000000000..25642a5322
--- /dev/null
+++ b/files/es/web/api/htmlelement/change_event/index.html
@@ -0,0 +1,143 @@
+---
+title: 'HTMLElement: Evento change'
+slug: Web/API/HTMLElement/change_event
+tags:
+  - Change
+  - DOM
+  - Evento
+  - HTML
+  - Referencia
+  - Web
+translation_of: Web/API/HTMLElement/change_event
+---
+<div>{{APIRef}}</div>
+
+<p>El evento <code>change</code> se dispara para elementos {{HTMLElement("input")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}} cuando una alteración al valor de un elemento es confirmada por el usuario. A diferencia del evento {{event("input")}}, el evento <code>change</code> no es disparado necesariamente por cada alteración al valor <code>value</code> del elemento</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Burbujas</th>
+   <td>Sí</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propiedad del manejador del evento</th>
+   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dependiendo del tipo de elemento siendo cambiado y la forma en que el usuario interactua con el elemento, el evento <code>change</code> dispara en un momento diferente:</p>
+
+<ul>
+ <li>Cuando el elemento es <code>:checked</code> (ya sea dando click o usuando el teclado) para elementos <code>&lt;input type="radio"&gt;</code> y <code>&lt;input type="checkbox"&gt;</code>;</li>
+ <li>Cuando el usuario confirma el cambio explícitimante (por ejemplo, al seleccionar un valor de un menú desplegable {{HTMLElement("select")}} con un clic del ratón, al seleccionar una fecha de un selector de fecha de un elemento <code>&lt;input type="date"&gt;</code>, al seleccionar un archivo en un selector de archivo por un elemento <code>&lt;input type="file"&gt;</code>, etc.);</li>
+ <li>Cuando un elemento pierde el foco después de que su valor haya sido cambiado, pero no confirmado (es decir, despues de editar el valor de un elemento {{HTMLElement("textarea")}} o <code>&lt;input type="text"&gt;</code>).</li>
+</ul>
+
+<p>La especificaciones HTML listan <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply" title="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">los tipos de <code>&lt;input&gt;</code> que deberían disparar el evento <code>change</code></a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Ejemplos_Live_Elemento_select">Ejemplos Live: Elemento select</h3>
+
+<div class="select-example">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label&gt;Elija un sabor de nieve:
+    &lt;select class="nieve" name="nieve"&gt;
+        &lt;option value=""&gt;Seleccione Uno …&lt;/option&gt;
+        &lt;option value="chocolate"&gt;Chocolate&lt;/option&gt;
+        &lt;option value="sardina"&gt;Sardina&lt;/option&gt;
+        &lt;option value="vainilla"&gt;Vainilla&lt;/option&gt;
+    &lt;/select&gt;
+&lt;/label&gt;
+
+&lt;div class="resultado"&gt;&lt;/div&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "select  result";
+}
+
+select {
+  grid-area: select;
+}
+
+.resultado {
+  grid-area: result;
+}
+
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const selectElement = document.querySelector('.nieve');
+
+selectElement.addEventListener('change', (event) =&gt; {
+    const resultado = document.querySelector('.resultado');
+    resultado.textContent = `Te gusta el sabor ${event.target.value}`;
+});
+</pre>
+</div>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('select-example', '100%', '75px') }}</p>
+
+<h3 id="Elemento_de_entrada_de_texto">Elemento de entrada de texto</h3>
+
+<p>Para algunos elementos, incluyendo <code>&lt;input type="text"&gt;</code>, el evento <code>change</code> no se lanza hasta que el campo pierde el foco. Prueba a introducir algo en el campo anterior, y luego pulsa en algún otro lugar para lanzar el evento.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">placeholder</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Enter some text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>log<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> input <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> log <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'log'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+input<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'change'</span><span class="punctuation token">,</span> updateValue<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">updateValue</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  log<span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.change_event")}}</p>
+
+<p>Diferentes navegadores no siempre concuerdan cuando un evento <code>change</code> debería ser disparado para ciertos tipo de interacciones. Por ejemplo, navegación por teclado en en elementos {{HTMLElement("select")}} nunca disparan el evento <code>change</code> en Gecko hasta que el usuario presiona Enter o cambia el foco fuera del <code>&lt;select&gt;</code> (ver {{bug("126379")}}). A partir de Firefox 63 (Quantum), sin embargo, este comportamiento es consistente entre los mayores navegadores.</p>
diff --git a/files/es/web/api/htmlelement/click/index.html b/files/es/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..0f6d7983c7
--- /dev/null
+++ b/files/es/web/api/htmlelement/click/index.html
@@ -0,0 +1,88 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+tags:
+  - HTMLElement
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>El método <code><strong>HTMLElement.click()</strong></code> simula el click de un ratón físico en un elemento HTML.</p>
+
+<p>Cuando <code>click()</code> se usa en un elemento que soporte este método (como un elemento {{HTMLElement("input")}}), el elemento lanza el evento asociado al click. Luego, este evento iniciará otros eventos asociados al clicado en elementos más altos en la jerarquía del documento html (o de la cadena de eventos).</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>elemento</em>.click()</pre>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div>
+
+<p>{{Compat("api.HTMLElement.click")}}</p>
+
+
+<h3 id="Traducción_en_Español">Traducción en Español:</h3>
+
+
+
+<article class="localized">
+<div class="guide-links"><a href="https://developer.mozilla.org/es/docs/MDN/Community">¿Necesitas ayuda?</a> • <a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Editor">Guía editorial</a> • <a href="https://developer.mozilla.org/es/docs/MDN/Contribute/Content/Style_guide">Guía de estilo</a></div>
+
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="draft-container">
+<div class="draft-old"> </div>
+
+<div class="draft-status"><span id="draft-action">Borrador autoguardado: <time class="time-ago" id="draft-time" title="2018-05-27T03:51:54.273Z">26/5/2018 21:51:54</time></span></div>
+</div>
+
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="editor-tools"> </div>
+
+<div style="height: 173px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 617px; position: fixed; top: 0px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</article>
+
+<article class="localized">
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="cke" dir="ltr" id="cke_id_content" lang="es">
+<div>
+<div id="cke_1_contents" style="height: 947px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</article>
+
+<p> </p>
diff --git a/files/es/web/api/htmlelement/contenteditable/index.html b/files/es/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..bbb0749b7f
--- /dev/null
+++ b/files/es/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,57 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">La propiedad <strong><code>contentEditable</code></strong> de la interfaz {{domxref("HTMLElement")}} especifica si el elemento es editable o no.</span> Este atributo puede tener los siguientes valores:</p>
+
+<ul>
+ <li><code>'true'</code> indica si el elemento es <code>contenteditable</code>.</li>
+ <li><code>'false'</code> indica que el elemento no puede ser editado.</li>
+ <li><code>'inherit'</code> indica que el elemento hereda el estado editable del padre.</li>
+</ul>
+
+<p>Se puede usar la propiedad {{domxref("HTMLElement.isContentEditable")}} para comprobar el valor {{jsxref("Boolean")}} de esta propiedad.</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox"><em>editable</em> = <em>element</em>.contentEditable
+<em>element</em>.contentEditable = 'true'
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.contentEditable")}}</p>
+
+<p>In Internet Explorer, <code>contenteditable</code> cannot be applied to the {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}}, and {{htmlelement("tr")}} elements directly. A content editable {{htmlelement("span")}} or {{htmlelement("div")}} element can be placed inside the individual table cells.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Making content editable</a></li>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>The {{htmlattrxref("contenteditable")}} global attribute.</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..10c6f555f9
--- /dev/null
+++ b/files/es/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,132 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary">La propiedad <code><strong>dataset</strong></code> en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los <a href="/es/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de datos personalizados</a> (<code>data-*</code>) de cada uno de los elementos.</span> Está disponible el acceso en HTML y en el DOM.  Dentro del <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad<strong> </strong><code>dataset</code><strong> </strong>puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del <code>dataset</code>, que representan a cada atributo correspondiente. Además un HTML <code><strong>data-</strong></code><em>attribute</em> y su correspondiente DOM<strong> </strong><code>dataset.</code><em>property</em> no comparten el mismo nombre, pero son siempre similares:</p>
+
+<ul>
+ <li>El nombre de un attributo de datos comienza en HTML con <code>data-</code>. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (<code>-</code>), punto (<code>.</code>), dos puntos (<code>:</code>) y guión bajo (<code>_</code>) -- NUNCA una letra mayúscula (A a Z).</li>
+ <li>El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.</li>
+</ul>
+
+<p>Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p>
+
+<h3 id="Conversion_de_nombres">Conversion de nombres</h3>
+
+<p><code>dash-style</code> a <code>camelCase</code>: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas</p>
+
+<ul>
+ <li>el prefijo <code>data-</code> es eliminado (incluyendo el guión);</li>
+ <li>por cada guión (<code>U+002D</code>) seguido de un caracter ASCII que sea una letra en minuscula<span style="line-height: 1.5;"> </span><code>a</code><span style="line-height: 1.5;"> a la </span><code>z</code><span style="line-height: 1.5;">, el guión es removido y la letra se transforma en su contraparte en mayuscula;</span></li>
+ <li>otros caracteres (incluyendo otros guines) se mantienen intactos.</li>
+</ul>
+
+<p><code>camelCase</code> a <code>dash-style</code>: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:</p>
+
+<ul>
+ <li>Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la <code>a</code> a la <code>z</code> (antes de la conversión);</li>
+ <li>se agrega el prefijo <code>data-</code>;</li>
+ <li>cualquier caracter ASCII que sea una letra mayuscula de la <code>A</code> a la <code>Z</code> se convierte en un guión seguido de se contraparte en minuscula;</li>
+ <li>otros caracteres se mantienen intactos.</li>
+</ul>
+
+<p>La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.</p>
+
+<p>Por ejemplo, el atributo nombrado <code>data-abc-def</code> corresponde a la clave <code>abcDef</code>.</p>
+
+<ul>
+</ul>
+
+<h3 id="Accediendo_valores">Accediendo valores</h3>
+
+<ul>
+ <li>Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en <code>element.dataset.keyname</code></li>
+ <li>Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en <code>element.dataset[keyname]</code></li>
+ <li>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code></a> puede ser usado para checar si un atributo dado existe.</li>
+</ul>
+
+<h3 id="Definiendo_valores">Definiendo valores</h3>
+
+<ul>
+ <li>Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, <code>null</code> siempre se convierte en el string "null".</li>
+ <li>Cuando quieras remover un atributo, puedes usar el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operador <code>delete</code></a>.</li>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<ul>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li>
+ <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li>
+ <br>
+ <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li>
+ <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li>
+ <br>
+ <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li>
+</ul>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: html">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe&lt;/div&gt;</pre>
+
+<pre class="brush: js">const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.dataset")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li>
+ <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlelement/focus/index.html
new file mode 100644
index 0000000000..d615cbf12e
--- /dev/null
+++ b/files/es/web/api/htmlelement/focus/index.html
@@ -0,0 +1,164 @@
+---
+title: HTMLElement.focus()
+slug: Web/API/HTMLElement/focus
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLOrForeignElement/focus
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>El método <code><strong>HTMLElement.focus()</strong></code> fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.</p>
+
+<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">element.focus();
+element.focus(focusOption); // Object parameter</pre>
+
+<h3 id="Parámetros" name="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>focusOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Es un objeto con la siguiente propiedad:</dd>
+ <dd>
+ <dl>
+  <dt><code>preventScroll</code> {{optional_inline}}</dt>
+  <dd>Es un valor <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>:
+  <ul>
+   <li>Si es <code>false</code>, el método hará scroll hasta que el elemento esté visible en la ventana del navegador</li>
+   <li>Si es <code>true</code>,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
+
+<h3 id="Enfocar_un_campo_de_texto" name="Enfocar_un_campo_de_texto">Enfocar un campo de texto</h3>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input type="text" id="myTextField" value="Campo de texto."&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button type="button" onclick="focusMethod()"&gt;¡Púlsame para enfocar el campo de texto!&lt;/button&gt;
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
+
+<h3 id="Enfocar_un_botón" name="Enfocar_un_botón">Enfocar un botón</h3>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;button type="button" id="myButton"&gt;Púlsame!&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button type="button" onclick="focusMethod()"&gt;¡Púlsame para enfocar el botón!&lt;/button&gt;
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
+
+
+
+<h3 id="Enfocar_con_focusOption" name="Enfocar_con_focusOption">Enfocar con focusOption</h3>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js">focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;button type="button" onclick="focusScrollMethod()"&gt;¡Púlsame para enfocar el botón!&lt;/button&gt;
+&lt;button type="button" onclick="focusNoScrollMethod()"&gt;¡Púlsame para enfocar el botón sin hacer scroll!&lt;/button&gt;
+
+&lt;div id="container" style="height: 1000px; width: 1000px;"&gt;
+&lt;button type="button" id="myButton" style="margin-top: 500px;"&gt;¡Púlsame!&lt;/button&gt;
+&lt;/div&gt;
+
+</pre>
+
+<h4 id="Resultado_3">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
+
+<h2 id="Especificación" name="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Si se llama a <code>HTMLElement.focus()</code> desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método <code>event.preventDefault()</code> para evitar que el foco abandone <code>HTMLElement</code><strong>.</strong></p>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.focus")}}</p>
+
+<h2 id="Ver_también" name="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Método DOM {{domxref("HTMLElement.blur()")}} para quitar el foco sobre un elemento.</li>
+ <li>{{ domxref("document.activeElement") }} para saber cuál es el elemento enfocado actualmente.</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/index.html b/files/es/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..d27114fccc
--- /dev/null
+++ b/files/es/web/api/htmlelement/index.html
@@ -0,0 +1,402 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div></div>
+
+<div>La interfaz <strong><code>HTMLElement</code></strong> representa cualquier elemento <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Algunos elementos implementan directamente esta interfaz, otros la implementan a través de una interfaz que hereda de ella.</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Hereda propiedades de su padre, {{domxref("Element")}}, y los implementalo de  {{domxref("GlobalEventHandlers")}} y {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que representa la clave de acceso al elemento.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("DOMString")}} que contiene la clave asignada del elemento.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Es un  {{domxref("DOMString")}}, donde el valor <code>"true"</code> significa que el elemento es editable y si el valor es <code>"false"</code> significa que no lo es.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("Boolean")}} si el contenido del elemento puede ser editado.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}}</dt>
+ <dd>Es un  {{domxref("HTMLMenuElement")}} que representa el menú contextual asociado al elemento. Puede ser <code>null</code></dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("DOMStringMap")}} que permite el acceso de lectura y escritura de los atributos personalizados del elemento (<code>data-*</code>) .</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>Es un {{domxref("DOMString")}}, que refleja el atributo global <code>dir</code>, representando la direccionalidad del elemento. Los posibles valores son <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>Es un {{jsxref("Boolean")}} que indica si el elemento puede ser arrastrado..</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd>Devuelve un {{domxref("DOMSettableTokenList")}} que refleja el atributo global <code>dropzone</code> y describe el comportamiento del elemento con respecto a una operación de soltar.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>Es un {{jsxref("Boolean")}} que indica si el elemento está oculto.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>Es un {{jsxref("Boolean")}}...</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>Es un {{domxref("DOMString")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>Devuelve un {{jsxref("Object")}}…</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>Es un {{domxref("DOMString")}} que representa el lenguaje de los atributos del elemento, texto, y contenido del elemento.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un <code>double</code> que contiene la altura de, en relación al diseño (<code>layout)</code>.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Devuelve un <code>double</code>, que representa la distancia desde el borde izquierdo del elemento hasta el borde izquierdo del elemento padre <code>offsetParent</code>'.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("HTMLPropertiesCollection")}}…</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it hasn't an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}}</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>La mayoria de las propiedades de los eventos, del formulario <code>onXYZ</code>, estan definidas en las interfaces {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implementadas por <code>HTMLElement</code>. Otras pocas son especificas de <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchend")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Removes keyboard focus from the currently focused element.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>Sends a mouse click event to the element.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Makes the element the current keyboard focus.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>Makes the spell checker runs on the element.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br>
+    Added the following method: <code>forceSpellcheck()</code>.<br>
+    Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br>
+    Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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>Basic support</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>17.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.5</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.spellcheck", "spellcheck")}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.style", "style")}}</td>
+   <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>8.0</td>
+   <td>11</td>
+   <td>11.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dropzone", "dropzone")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>12.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60<br>
+    (Removed in Opera 15)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>
+    <p>{{CompatGeckoMobile("1.0")}}</p>
+   </td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+   <td rowspan="7">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/innertext/index.html b/files/es/web/api/htmlelement/innertext/index.html
new file mode 100644
index 0000000000..403f3c0bc1
--- /dev/null
+++ b/files/es/web/api/htmlelement/innertext/index.html
@@ -0,0 +1,84 @@
+---
+title: HTMLElement.innerText
+slug: Web/API/HTMLElement/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The <code><strong>innerText</strong></code> property of the {{domxref("HTMLElement")}} interface represents the "rendered" text content of a node and its descendants.</span> As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> <code>innerText</code> is easily confused with {{domxref("Node.textContent")}}, but there are important differences between the two. Basically, <code>innerText</code> is aware of the rendered appearance of text, while <code>textContent</code> is not.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">const <em>renderedText</em> = <em>htmlElement</em>.innerText
+<em>htmlElement</em>.innerText = <em>string</em></pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}} representing the rendered text content of an element. If the element itself is not <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">being rendered</a> (e.g detached from the document or is hidden from view), the returned value is the same as the {{domxref("Node.textContent")}} property.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This example compares <code>innerText</code> with {{domxref("Node.textContent")}}. Note how <code>innerText</code> is aware of things like {{htmlElement("br")}} elements, and ignores hidden elements.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;h3&gt;Source element:&lt;/h3&gt;
+&lt;p id="source"&gt;
+  &lt;style&gt;#source { color: red; }&lt;/style&gt;
+Take a look at&lt;br&gt;how this text&lt;br&gt;is interpreted
+       below.
+  &lt;span style="display:none"&gt;HIDDEN TEXT&lt;/span&gt;
+&lt;/p&gt;
+&lt;h3&gt;Result of textContent:&lt;/h3&gt;
+&lt;textarea id="textContentOutput" rows="6" cols="30" readonly&gt;...&lt;/textarea&gt;
+&lt;h3&gt;Result of innerText:&lt;/h3&gt;
+&lt;textarea id="innerTextOutput" rows="6" cols="30" readonly&gt;...&lt;/textarea&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.innerHTML = source.textContent;
+innerTextOutput.innerHTML = source.innerText;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example", 700, 450)}}</p>
+
+<h2 id="Specification">Specification</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('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Introduced, based on the <a href="https://github.com/rocallahan/innerText-spec">draft of the innerText specification</a>. See <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> and <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> for history.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.innerText")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/input_event/index.html b/files/es/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..ab082e4a06
--- /dev/null
+++ b/files/es/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,329 @@
+---
+title: Evento input
+slug: Web/API/HTMLElement/input_event
+tags:
+  - DOM
+  - Evento
+  - InputEvent
+  - Referencia
+translation_of: Web/API/HTMLElement/input_event
+---
+<div>{{APIRef}}</div>
+
+<p>El evento <strong><code>input</code></strong> se dispara cuando el valor (<code>value</code>) de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido cambiado. </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Burbujas</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectivo</th>
+   <td>{{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Acción por defecto</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Propiedad del manejador del evento</th>
+   <td>{{domxref("GlobalEventHandlers.oninput")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El evento también aplica a los elementos con la propiedad {{domxref("HTMLElement.contentEditable", "contenteditable")}} habilidado, y para cualquier otro elemento cuando la propiedad {{domxref("Document.designMode", "designMode")}} esta encendida. En el caso de un <code>contenteditable</code> y <code>designMode</code>, el objetivo del evento es el  the event target is the <em>editing host</em>. Si estas propiedades aplian a múltiples elementos, el host de edición es el elemento ancestro más cercano cuyo padre no es editable.</p>
+
+<p>Para elementos <code>&lt;input&gt;</code> con <code>type=checkbox</code> o <code>type=radio</code>, el evento <code>input</code> debería disparar cuando el usuario alterna el control, por <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">la especificación HTML5</a>. Sin embargo, históricamente no siempre es el caso. Revise la compatibilidad o use el evento {{event("change")}} en su lugar para estos tipos.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> A diferencia de <code>input</code>, el evento {{event("change")}} no es disparado necesariamente por cada alteración al valor (<code>value</code>) de un elemento.</p>
+</div>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Este ejemplo registra el valor siempre que se cambia el valor del elemento {{HtmlElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Ingrese algún texto" name="nombre"/&gt;
+&lt;p id="valores"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('valores');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.srcElement.value;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<p>(Funciona en la versión en inglés)</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.input")}}</p>
+
+<div class="hidden">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>9<sup>[2][3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is <code>"on"</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;select&gt;</code> element</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;input&gt;</code> element of type <code>checkbox</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;input&gt;</code> element of type <code>radio</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("12")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is <code>"on"</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;select&gt;</code> element</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;input&gt;</code> element of type <code>checkbox</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>&lt;input&gt;</code> element of type <code>radio</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko didn't fire <code>input</code> events while composition was ongoing using IMEs or when dead keys were used on macOS X.</p>
+
+<p>[2] IE 9 does not fire an <code>input</code> event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).</p>
+
+<p>[3] IE 10 and IE 11 have a bug where the <code>input</code> event fires on placeholder attribute changes.</p>
+
+<p>[4] Prior to Opera 15, Opera did not fire an <code>input</code> event after dropping text in an input field.</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/InputEvent">InputEvent</a></li>
+ <li>{{domxref("GlobalEventHandlers.oninput")}}</li>
+ <li>Eventos relacionados
+  <ul>
+   <li>{{event("beforeinput")}}</li>
+   <li>{{event("change")}}</li>
+   <li><code><a href="/en-US/docs/Web/API/Constraint_validation/invalid_event">invalid</a></code></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/es/web/api/htmlelement/offsetheight/index.html b/files/es/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..82f683d7c5
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,65 @@
+---
+title: HTMLElement.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+tags:
+  - API
+  - Propiedad
+  - Referencia
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propiedad de sólo lectura <strong><code>HTMLElement.offsetHeight</code></strong> devuelve el alto de un elemento, incluyendo el <em>padding</em> vertical y los bordes, en píxeles, como un número entero.</p>
+
+<p>Generalmente, <code>offsetHeight</code> es una medida en píxeles que representa la altura CSS del elemento, incluyendo cualquier borde, padding, y barras de desplazamiento horizontales (si existieran). No incluye el alto de pseudo-elementos como <code>::before</code> y <code>::after</code>. Para el objeto body del documento, la medida incluye la altura total del contenido lineal en lugar de la altura CSS del elemento. Los elementos flotantes que se extienden por debajo de otros contenidos lineales son ignorados</p>
+
+<p>Si un elemento está oculto (por ejemplo, al establecer <code>style.display</code> a <code>"none"</code> en el elemento o uno de sus ancestros), se devuelve <code>0</code>.</p>
+
+<div class="note">
+<p>Esta propiedad redondea el valor a un entero. Si necesitas un  valor decimal, usa {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">var <em>intElemOffsetHeight</em> = <em>element</em>.offsetHeight;</pre>
+
+<p><code><em>intElemOffsetHeight</em></code> es una variable que almacena el entero correspondiente al valor de <code>offsetHeight</code> en píxeles de un elemento. La propiedad <code>offsetHeight</code> es de sólo lectura.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<p>El ejemplo de la imagen de superior muestra una barra de desplazamiento y un <code>offsetHeight</code> que cabe en la ventana. Sin embargo, los elementos no desplazables podrían tener un <code>offsetHeight</code> mucho más grande que el área visible. Esos elementos están típicamente contenidos en elementos desplazables (scroll); con lo cual esos elementos no desplazables podrían ser parcial o completamente invisibles, dependiendo de la configuración de <code>scrollTop</code> del elemento contenedor.</p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notas">Notas</h3>
+
+<p><code>offsetHeight</code> es una pripiedad del modelo del objeto <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> que fue inicialmente introducido por MSIE. A veces se le conoce como las dimensiones físicas/gráficas de un elemento, o la altura <code>border-box</code> del elemento.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determinando las dimensiones de los elementos</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Midiendo las dimensiones y ubicación de los elementos</a></li>
+</ul>
diff --git a/files/es/web/api/htmlelement/offsetleft/index.html b/files/es/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..0067faf65f
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,141 @@
+---
+title: HTMLElement.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propiedad de solo lectura <strong><code>HTMLElement.offsetLeft</code></strong> devuelve el número de <em>píxeles a la izquierda </em>del elemento actual con respecto al nodo {{domxref("HTMLElement.offsetParent")}} .</p>
+
+<p>Para los elementos de bloque, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, y <code>offsetHeight</code> determina el borde de la caja del elemento relativo al <code>offsetParent.</code></p>
+
+<p>Sin embargo, para los elementos inline (por ejemplo <strong>span</strong>), que puede ser cortado de un línea a otra, <code>offsetTop,</code> and <code>offsetLeft </code>describe la posición de la primer borde de la caja (usar {{domxref("Element.getClientRects()")}} para obtener el ancho y el alto), mientras que <code>offsetWidth </code>y <code>offsetHeight </code>describen las dimensiones de los límites (usar {{domxref("Element.getBoundingClientRect()")}} para obtener su posición). Por lo tanto, una caja con left, top, width y height del <code>offsetLeft</code>, <code>offsetTop</code>, <code>offsetWidth</code>, <code>offsetHeight</code>, no definirá los límites para un span con texto que continúa en otra línea.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="eval"><em>left</em> = <em>element</em>.offsetLeft;
+</pre>
+
+<p><code>left</code> es un entero que representa la posición de la izquierda del elemento actual con respecto al padre.</p>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre>var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // posición izquierda muy larga: hacer algo
+}
+</pre>
+
+<p>This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p>
+
+<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>
+
+<pre>&lt;div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="long"&gt;Long span that wraps within this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = long.offsetTop + document.body.scrollTop + "px";
+  box.style.width = long.offsetWidth + "px";
+  box.style.height = long.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
+</span><span style="line-height: normal;">&lt;/script&gt; </span></pre>
+
+<h2 id="Specification" name="Specification">Specification</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('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p>
+
+<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
+</ul>
diff --git a/files/es/web/api/htmlelement/offsetparent/index.html b/files/es/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..4fb14be33d
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,52 @@
+---
+title: HTMLElement.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+tags:
+  - API
+  - CSSOM View
+  - Propiedad
+  - Reference
+  - Referencia
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La propiedad de solo lectura <strong><code>HTMLElement.offsetParent</code></strong> retorna una referencia al objeto, el cual es el elemento contenedor posicionado más cercano (más cercano en la jerarquía contenedora). Si el elemento es no-posicionado, <code>td</code>, <code>th</code>, <code>table</code> o el <code>body</code> más cercano es retornado.</p>
+
+<p><code>offsetParent</code> retorna <code>null</code> cuando el elemento <code>style.display</code> tiene asignado <code>none</code>. <code>offsetParent</code> es útil porque {{domxref("HTMLElement.offsetTop","offsetTop")}} y {{domxref("HTMLElement.offsetLeft","offsetLeft")}} son relativos a su borde de relleno.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>parentObj</var> = element.offsetParent;
+</pre>
+
+<ul>
+ <li><var>parentObj</var> es una referencia de objeto al elemento en el cual el elemento actual es offset.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Compatibilidad de Browser</h2>
+
+<div class="hidden">La tabla de compatibilidad de esta página es generada desde datos estructurados. Si gusta contribuir a los datos, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>
+
+<p>{{Compat("api.HTMLElement.offsetParent")}}</p>
diff --git a/files/es/web/api/htmlelement/offsettop/index.html b/files/es/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..0b5f19708a
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,61 @@
+---
+title: HTMLElement.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La propiedad de sólo lectura <strong><code>HTMLElement.offsetTop</code></strong> retorna la distancia del elemento actual respecto al borde superior del nodo {{domxref("HTMLelement.offsetParent","offsetParent")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxis</h2>
+
+<pre class="syntaxbox"><var>topPos</var> = element.offsetTop;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parámetros</h3>
+
+<ul>
+ <li><code>topPos</code> es el número de pixels desde el borde superior del elemento padre <em>más cercano posicionado de forma relativa</em>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Ejemplo</h2>
+
+<pre class="brush:js">var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos &gt; 10) {
+  // objeto está posicionado a más de
+  // de 10 pixels de distancia de su padre
+}</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('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+
+
+
+<p>{{Compat("api.HTMLElement.offsetTop")}}</p>
+
+<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p>
+
+<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p>
diff --git a/files/es/web/api/htmlelement/offsetwidth/index.html b/files/es/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..13a9a7e454
--- /dev/null
+++ b/files/es/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,62 @@
+---
+title: HTMLElement.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propiedad de solo lectura <code><strong>HTMLElement.offsetWidth</strong></code>  devuelve el ancho del layout del elemento. Esta medida incluye los bordes del elemento asignados al mismo en los estilos CSS.</p>
+
+<h2 id="Sintáxis">Sintáxis</h2>
+
+<pre class="syntaxbox">var<em> offsetWidth</em> =<em>element</em>.offsetWidth;
+</pre>
+
+<p><strong><code>offsetWidth</code> </strong>es una propiedad de solo lectura.</p>
+
+<div class="note">
+<p>Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa: {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notas">Notas</h3>
+
+<p><code>offsetWidth</code> es una propiedad del  <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> "object model" que fue inicialmente introducido por MSIE. A veces es referido como box-width.</p>
+
+<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2>
+
+<p>{{Compat("api.HTMLElement.offsetWidth")}}</p>
+
+<h2 id="Links_Relacionados">Links Relacionados</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN Measuring Element Dimension and Locati</a></li>
+</ul>
diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..62c8903b72
--- /dev/null
+++ b/files/es/web/api/htmlelement/style/index.html
@@ -0,0 +1,52 @@
+---
+title: Element.style
+slug: Web/API/HTMLElement/style
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<h3 id="Summary" name="Summary">Resumen</h3>
+
+<p>Devuelve un objeto que representa el atributo <code>style </code>del elemento.</p>
+
+<h3 id="Example" name="Example">Ejemplo</h3>
+
+<pre class="eval">var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+</pre>
+
+<h3 id="Notes" name="Notes">Notas</h3>
+
+<p>Ya que la propiedad <code>style </code>tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones <em>in-line</em> hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. </p>
+
+<p>Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style <em>in-line</em> y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección &lt;head&gt; o en hojas de estilo.</p>
+
+<p>Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar <a href="/Es/DOM/Window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> en su lugar.</p>
+
+<p>Mira la lista de Propiedades CSS del DOM (<a href="/es/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a>) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.</p>
+
+<p>Generalmente es mejor usarla propiedad <code>style </code>que usar <code>elt.setAttribute('style', '...')</code>, ya que el uso de la propiedad <code>style </code>no reemplazará otras propiedades CSS que puedan especificarse en el atributo <code>style</code>.</p>
+
+<p>Los estilos <em>no</em> pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en <code>elt.style = "color: blue;"</code>. Esto es porque el atributo <code>style </code>devuelve un objeto del tipo <code>CSSStyleDeclaration</code>. En su lugar, pueds establecer las propiedades como:</p>
+
+<pre class="eval">elt.style.color = "blue";  // Asignación directa
+
+var st = elt.style;
+st.color = "blue";  // Asignación Indirecta
+</pre>
+
+<p>El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos<code> elt </code>y sus valores heredados: </p>
+
+<pre class="eval">var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(elt, null);
+for (x in st)
+  out += "  " + x + " = '" + st[x] + "' &gt; '" + cs[x] + "'\n";
+</pre>
+
+<p> </p>
+
+<h3 id="Specification" name="Specification">Especificación</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>