1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
---
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>
|
