---
title: HTMLElement
slug: Web/API/HTMLElement
tags:
  - API
translation_of: Web/API/HTMLElement
---
<div>
<div>{{ APIRef("HTML DOM") }}</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>

{{Compat("api.HTMLElement")}}

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("Element")}}</li>
</ul>