HTMLElement - 代表所有 HTML 元素的接口

HTMLElement 接口代表所有 HTML 元素。一些元素直接实现这个接口,其他元素通过继承它的接口实现它。

属性

从其父接口 Element 继承了属性,并从 DocumentAndElementEventHandlersElementCSSInlineStyleGlobalEventHandlersHTMLOrForeignElementTouchEventHandlers 实现了属性。

HTMLElement.accessKey

一个 DOMString,表示分配给元素的访问按键。

HTMLElement.accessKeyLabel 只读

一个 DOMString,表示分配给元素的访问按键。

HTMLElement.contentEditable

一个 DOMString,值为 true 表示元素是可编辑的,值为 false 表示元素不是可编辑的。

HTMLElement.isContentEditable 只读

一个 Boolean,指示是否可以编辑元素的内容。

HTMLElement.contextMenu

一个 HTMLMenuElement,表示与元素关联的上下文菜单。它可能是 null

HTMLOrForeignElement.dataset 只读

一个 DOMStringMap,脚本可以使用该脚本读写元素的自定义数据属性data-* )。

HTMLElement.dir

一个 DOMString,表示 dir 全局属性,代表元素的方向性。可能的值为 "ltr""rtl""auto"

HTMLElement.draggable

一个 Boolean,表示是否可以拖动元素。

HTMLElement.enterkeyhint

一个 DOMString,用于定义要为虚拟键盘上的 Enter 键显示的操作标签(或图标)。

HTMLElement.hidden

一个 Boolean,指示元素是否隐藏。

HTMLElement.inert

一个 Boolean,指示出于用户交互事件,页面内文本搜索(“在页面中查找”)和文本选择的目的,用户代理是否必须像缺少给定节点一样进行操作。

HTMLElement.innerText

表示节点及其后代的 “已渲染” 文本内容。作为一种获取方法,它近似于用户使用光标突出显示元素的内容然后将其复制到剪贴板时将获得的文本。

HTMLElement.itemScope

一个 Boolean,代表项目范围。

HTMLElement.itemType 只读

一个 DOMSettableTokenList

HTMLElement.itemId

一个 DOMString,表示项目的 ID。

HTMLElement.itemRef 只读

一个 DOMSettableTokenList

HTMLElement.itemProp 只读

一个 DOMSettableTokenList

HTMLElement.itemValue

一个 Object,表示项目的值。

HTMLElement.lang

一个 DOMString,表示元素属性,文本和元素内容的语言。

HTMLElement.noModule

一个 Boolean,表示是否可以在支持模块脚本的用户代理中执行导入脚本。

HTMLOrForeignElement.nonce

返回内容安全策略用于确定是否允许进行给定提取的一次使用的密码。

HTMLElement.offsetHeight 只读

返回一个 double,表示元素相对于布局的高度。

HTMLElement.offsetLeft 只读

返回一个 double,即从该元素的左边框到其 offsetParent 的左边框的距离。

HTMLElement.offsetParent 只读

返回一个 Element,它是当前从中计算所有偏移量计算的元素。

HTMLElement.offsetTop 只读

返回一个 double,即从此元素的顶部边框到其 offsetParent 的顶部边框的距离。

HTMLElement.offsetWidth 只读

返回一个 double,表示元素相对于布局的宽度。

HTMLElement.properties 只读

返回一个 HTMLPropertiesCollection

HTMLElement.spellcheck

一个 Boolean 的控件,用于控制拼写检查。它在所有 HTML 元素上都存在,尽管它对所有元素都没有影响。

HTMLElement.style

一个 CSSStyleDeclaration,表示元素的样式属性的声明的对象。

HTMLOrForeignElement.tabIndex

一个 long,表示元素在跳位顺序中的位置。

HTMLElement.title

一个 DOMString,包含当鼠标悬停在元素上方时在弹出框中显示的文本。

HTMLElement.translate

一个 Boolean,表示是否翻译。

事件处理程序

大多数事件处理程序属性的格式都是 onXYZ,它们是在 DocumentAndElementEventHandlersGlobalEventHandlersTouchEventHandlers 接口上定义的,由 HTMLElement 实现。另外,以下处理程序是 HTMLElement 特有的。

HTMLElement.oncopy

返回 copy 事件的事件处理代码(Mozilla bug 280959)。

HTMLElement.oncut

返回 cut 事件的事件处理代码(Mozilla bug 280959)。

HTMLElement.onpaste

返回 paste 事件的事件处理代码(Mozilla bug 280959)。

TouchEventHandlers.ontouchstart

返回 touchstart 事件的事件处理代码。

TouchEventHandlers.ontouchend

返回 touchend 事件的事件处理代码。

TouchEventHandlers.ontouchmove

返回 touchmove 事件的事件处理代码。

TouchEventHandlers.ontouchenter

返回 touchenter 事件的事件处理代码。

TouchEventHandlers.ontouchleave

返回 touchleave 事件的事件处理代码。

TouchEventHandlers.ontouchcancel

返回 touchcancel 事件的事件处理代码。

方法

从其父接口 Element 和,并实现了 DocumentAndElementEventHandlersElementCSSInlineStyleGlobalEventHandlersHTMLOrForeignElementTouchEventHandlers 的方法。

HTMLElement.attachInternals()

ElementInternals 实例附加到自定义元素。

HTMLOrForeignElement.blur()

从当前焦点的元素中移除键盘焦点。

HTMLElement.click()

将鼠标单击事件发送到元素。

HTMLOrForeignElement.focus()

使元素成为当前键盘焦点。

HTMLElement.forceSpellCheck()

对元素的内容运行拼写检查器。

事件

使用 addEventListener() 或通过为此接口的 oneventname 属性分配事件监听器来监听这些事件

invalid

当元素在约束验证期间不满足其约束时触发。
也可以通过 oninvalid 属性处理。

动画事件

animationcancel

当动画意外中止时触发。也可以通过 onanimationcancel 属性处理。

animationend

动画正常完成时触发。也可以通过 onanimationend 属性处理。

animationiteration

动画迭代完成时触发。
也可以通过 onanimationiteration 属性处理。

animationstart

动画开始时触发。也可以通过 onanimationstart 属性处理。

输入事件

beforeinput

<input><select><textarea> 元素的值即将被修改时触发。

input

<input><select><textarea> 元素的 value 被更改时触发。
也可以通过 oninput 属性处理。

change

<input><select><textarea> 元素的 value 已由用户更改并提交时触发。与 input 事件不同,不是每次元素更改 value 值都会触发 change 事件。

指针事件

gotpointercapture

当元素使用 setPointerCapture() 捕获指针时触发。也可以通过 ongotpointercapture 属性处理。

lostpointercapture

释放捕获的指针时触发。也可以通过 onlostpointercapture 属性处理。

pointercancel

取消指针事件时触发。也可以通过 onpointercancel 属性处理。

pointerdown

当指针变为活动状态时触发。也可以通过 onpointerdown 属性处理。

pointerenter

当指针移入元素或其后代之一的 “命中测试” 边界时触发。也可以通过 onpointerenter 属性处理。

pointerleave

当指针移出元素的点击测试边界时触发。也可以通过 onpointerleave 属性处理。

pointermove

当指针更改坐标时触发。也可以通过 onpointermove 属性处理。

pointerout

当指针移出元素的 “命中测试” 边界时(除其他原因外)触发。也可以通过 onpointerout 属性处理。

pointerover

当指针移到元素的 “命中测试” 边界时触发。也可以通过 onpointerover 属性处理。

pointerup

当指针不再活动时触发。也可以通过 onpointerup 属性处理。

过渡事件

transitioncancel

取消 CSS 转换时触发。也可以通过 ontransitioncancel 属性处理。

transitionend

CSS 过渡完成时触发。也可以通过 ontransitionend 属性处理。

transitionrun

首次创建 CSS 过渡时触发。也可以通过 ontransitionrun 属性处理。

transitionstart

CSS 转换实际开始时触发。也可以通过 ontransitionstart 属性处理。

规范

规范 状态 备注
CSS Object Model (CSSOM) View Module
HTMLElement 的定义
工作草案 添加了以下属性:offsetParentoffsetTopoffsetLeftoffsetWidthoffsetHeight
HTML Living Standard
HTMLElement 的定义
现行的标准 添加了以下属性:translateitemScopeitemTypeitemIditemRefitemProppropertiesitemValue。添加了以下方法:forceSpellcheck()。将 onXYZ 属性移动到 GlobalEventHandlers 接口,并继承该接口。
HTML5
HTMLElement 的定义
推荐 添加了以下属性:datasethiddentabindexaccessKeyaccessKeyLabeldraggabledropzonecontentEditableisContentEditablecontextMenuspellcheckcommandTypecommandLabelcommandIconcommandHiddencommandDisabledcommandCheckedstyle 和所有的 onXYZ。将 idclassName 属性移到 Element 接口。
Document Object Model (DOM) Level 2 HTML Specification
HTMLElement 的定义
已过时 自从 Document Object Model (DOM) Level 2 HTML Specification 以来没有变化。
Document Object Model (DOM) Level 1 Specification
HTMLElement 的定义
已过时 初始定义。

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持11215.583
accessKey17125 未知 支持6
accessKeyLabel 不支持 不支持8 不支持 未知14
animationcancel 事件 不支持 不支持54 不支持 不支持

13.1

12

animationend 事件4312 支持10309
animationiteration 事件43125110309
animationstart 事件43125110309
autocapitalize66≤79 未知 不支持 未知 未知
beforeinput 事件 支持79 不支持 不支持 支持 支持
blur1125983
click()9112323810.56
contentEditable1123896
contextMenu45 — 61≤18 — 791 未知 未知 未知
dataset812611115.1
dir1121 未知 支持6
draggable7122 支持126
dropzone14 — 59≤18 — 791 未知 未知 未知
focus1125983
forceSpellCheck 不支持 不支持 不支持 不支持 不支持 未知
gotpointercapture 事件57≤7959 未知44 未知
hidden61211111.66
inert6079 未知 未知47 未知
innerText112455.59.63
input 事件1

79

12 — 796

69711.63.1
inputMode66≤7977 不支持 支持 未知
isContentEditable1121 未知 支持6
itemId17 — 28 不支持6 不支持11 — 15 未知
itemProp17 — 28 不支持6 不支持11 — 15 未知
itemRef17 — 28 不支持6 不支持11 — 15 未知
itemScope17 — 28 不支持6 不支持11 — 15 未知
itemType17 — 28 不支持6 不支持11 — 15 未知
itemValue17 — 28 不支持6 不支持11 — 15 未知
lang1121 未知 支持6
lostpointercapture 事件57≤7959 未知44 未知
noModule60≤79 未知 不支持47 未知
nonce617975 不支持 支持10
offsetHeight1121883
offsetLeft1121883
offsetParent1121883
offsetTop1121883
offsetWidth1121883
oncopy71123 未知 支持 支持
oncut71123 未知 支持 支持
onModule60≤79 未知 未知47 未知
onpaste71123 未知 支持 支持
outerText4312 不支持 支持 支持6
pointercancel 事件55

12

12 — 798

59

29

11

108

未知 不支持
pointerdown 事件55

12

12 — 799

59

29

11

109

未知 不支持
pointerenter 事件55

12

12 — 7910

59

29

11

1010

未知 不支持
pointerleave 事件55

12

12 — 7911

59

29

11

1011

未知 不支持
pointermove 事件55

12

12 — 7912

59

29

11

1012

未知 不支持
pointerout 事件55

12

12 — 7913

59

29

11

1013

未知 不支持
pointerover 事件55

12

12 — 7914

59

29

11

1014

未知 不支持
pointerup 事件55

12

12 — 7915

59

29

11

1015

未知 不支持
spellcheck43122 未知 支持6
style451218811
tabIndex1

18

1216

1816 支持6
title1121 未知 支持6
transitioncancel 事件74≤7953 未知62

13.1

12

transitionend 事件

26

117

≤79

≤7917

5110

12.1

1517

11.6 — 1518

6.1

417

transitionrun 事件74≤7953 未知62

13.1

12

transitionstart 事件74≤7953 未知62

13.1

12

translate1979 不支持 不支持 不支持6

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持118 未知4 未知10.11
accessKey4.418 未知5 未知 支持 支持
accessKeyLabel 不支持 不支持 未知8 未知 未知14
animationcancel 事件 不支持 不支持 未知54 未知 不支持

13.4

12

animationend 事件4343 未知 支持 未知309
animationiteration 事件4343 未知51 未知309
animationstart 事件4343 未知51 未知309
autocapitalize6666 未知 未知 未知 未知 未知
beforeinput 事件 支持 支持 未知 不支持 未知 支持 支持
blur4.418 未知5 未知10.11
click()≤375181 未知5 未知116
contentEditable4.418 未知4 未知 支持 支持
contextMenu45 — 6145 — 61 未知4 未知 未知 未知
dataset4.418 未知6 未知115.1
dir4.418 未知4 未知 支持 支持
draggable4.418 未知4 未知 支持 支持
dropzone4.4 — 5918 — 59 未知4 未知 未知 未知
focus4.418 未知5 未知10.11
forceSpellCheck 不支持 不支持 未知4 未知 未知 未知
gotpointercapture 事件5757 未知 不支持 未知43 未知
hidden≤3718 未知4 未知126
inert 不支持60 未知 未知 未知44 未知
innerText4.418 未知45 未知10.14
input 事件118 未知6 未知122
inputMode6666 未知 不支持 未知 支持 未知
isContentEditable4.418 未知4 未知 支持 支持
itemId 不支持18 — 28 未知4 未知 未知 未知
itemProp 不支持18 — 28 未知4 未知 未知 未知
itemRef 不支持18 — 28 未知4 未知 未知 未知
itemScope 不支持18 — 28 未知4 未知 未知 未知
itemType 不支持18 — 28 未知4 未知 未知 未知
itemValue 不支持18 — 28 未知4 未知 未知 未知
lang4.418 未知4 未知 支持 支持
lostpointercapture 事件5757 未知 不支持 未知43 未知
noModule6060 未知 未知 未知44 未知
nonce6161 未知 不支持 未知 支持10
offsetHeight118 未知4 未知10.11
offsetLeft118 未知4 未知10.11
offsetParent118 未知4 未知10.11
offsetTop118 未知4 未知10.11
offsetWidth118 未知4 未知10.11
oncopy7171 未知4 未知 支持 支持
oncut7171 未知4 未知 支持 支持
onModule6060 未知 未知 未知44 未知
onpaste7171 未知4 未知 支持 支持
outerText4343 未知 不支持 未知 支持 支持
pointercancel 事件5555 未知29 未知 未知 不支持
pointerdown 事件5555 未知29 未知 未知 不支持
pointerenter 事件5555 未知29 未知 未知 不支持
pointerleave 事件5555 未知29 未知 未知 不支持
pointermove 事件5555 未知29 未知 未知 不支持
pointerout 事件5555 未知29 未知 未知 不支持
pointerover 事件5555 未知29 未知 未知 不支持
pointerup 事件5555 未知29 未知 未知 不支持
spellcheck4343 未知4 未知 支持 支持
style4545 未知4 未知10.111
tabIndex4.418 未知4 未知 支持 支持
title4.418 未知4 未知 支持 支持
transitioncancel 事件7474 未知53 未知53

13.4

12

transitionend 事件

≤37

117

26

1817

未知51 未知

12.1

1417

12 — 1418

7

3.217

transitionrun 事件7474 未知53 未知53

13.4

12

transitionstart 事件7474 未知53 未知53

13.4

12

translate4.425 未知4 未知 支持 支持

1. 在 Chrome 19 之前,click() 仅在按钮和输入框上定义。

2. 在 Firefox 5 之前,click() 仅在按钮和输入框上定义,而对文本和文件输入无效。

3. 从 Firefox 75 开始,即使该元素未附加到 DOM 树,click() 函数也可以使用。

4. 在 Samsung Internet 1.5 之前,click() 仅在按钮和输入上定义。

5. 在 Android WebView 4.4 之前,click() 仅在按钮和输入上定义。

6. 不支持 selectcheckboxradio

7. 仅支持类型为 textpassword 的输入框。

8. 通过 mspointercancel 支持。

9. 通过 mspointerdown 支持。

10. 通过 mspointerenter 支持。

11. 通过 mspointerleave 支持。

12. 通过 mspointermove 支持。

13. 通过 mspointerout 支持。

14. 通过 mspointerover 支持。

15. 通过 mspointerup 支持。

16. 对于没有显式 tabindex 属性的元素,返回错误的值。有关详细信息,请参见问题 4365703

17. 通过 webkitTransitionEnd 支持。

18. 通过 oTransitionEnd 支持。

相关链接