Element

Baseline 广泛可用 *

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

Element 是所有元素对象(即表示元素的Document)的基类,它继承自这个最通用的基类。它只包含所有类型元素共有的方法和属性。更具体的类会继承自 Element

例如,HTMLElement 接口是 HTML 元素的基接口。类似地,SVGElement 接口是所有 SVG 元素的基接口,而 MathMLElement 接口是 MathML 元素的基接口。大多数功能都在类层次结构中进一步指定。

Web 平台领域之外的语言,例如通过 XULElement 接口实现的 XUL,也实现了 Element

EventTarget Node Element

实例属性

Element 继承自其父接口 Node,并由此继承自该接口的父接口 EventTarget

Element.assignedSlot 只读

返回一个 HTMLSlotElement,表示节点插入到的 <slot>

Element.attributes 只读

返回一个 NamedNodeMap 对象,其中包含相应 HTML 元素的已分配属性。

Element.childElementCount 只读

返回此元素的子元素数量。

Element.children 只读

返回此元素的子元素。

Element.classList 只读

返回一个 DOMTokenList,其中包含类属性列表。

Element.className

一个字符串,表示元素的类。

Element.clientHeight 只读

返回一个数字,表示元素的内部高度。

Element.clientLeft 只读

返回一个数字,表示元素的左边框宽度。

Element.clientTop 只读

返回一个数字,表示元素的上边框宽度。

Element.clientWidth 只读

返回一个数字,表示元素的内部宽度。

Element.currentCSSZoom 只读

一个数字,表示元素的有效缩放大小;如果元素未渲染,则为 1.0。

Element.elementTiming 实验性

一个字符串,反映 elementtiming 属性,该属性用于标记元素以便在 PerformanceElementTiming API 中进行观察。

Element.firstElementChild 只读

返回此元素的第一个子元素。

Element.id

一个字符串,表示元素的 id。

Element.innerHTML

一个字符串,表示元素内容的标记。

Element.lastElementChild 只读

返回此元素的最后一个子元素。

Element.localName 只读

一个字符串,表示元素限定名称的本地部分。

Element.namespaceURI 只读

元素的命名空间 URI,如果没有命名空间,则为 null

Element.nextElementSibling 只读

一个 Element,表示树中紧跟在给定元素后面的元素,如果没有兄弟节点则为 null

Element.outerHTML

一个字符串,表示元素的标记(包括其内容)。当用作设置器时,用给定字符串解析出的节点替换元素。

Element.part

表示元素的部件标识符(即使用 part 属性设置),以 DOMTokenList 形式返回。

Element.prefix 只读

一个字符串,表示元素的命名空间前缀;如果没有指定前缀,则为 null

Element.previousElementSibling 只读

一个 Element,表示树中紧邻给定元素之前的元素,如果没有兄弟元素则为 null

Element.scrollHeight 只读

返回一个数字,表示元素的滚动视图高度。

Element.scrollLeft

一个数字,表示元素的左滚动偏移量。

Element.scrollLeftMax 非标准 只读

返回一个数字,表示元素可能的最大左滚动偏移量。

Element.scrollTop

一个数字,表示元素顶部垂直滚动的像素数。

Element.scrollTopMax 非标准 只读

返回一个数字,表示元素可能的最大顶部滚动偏移量。

Element.scrollWidth 只读

返回一个数字,表示元素的滚动视图宽度。

Element.shadowRoot 只读

返回元素托管的开放 Shadow Root,如果不存在开放 Shadow Root,则返回 null。

Element.slot

返回元素插入的 Shadow DOM Slot 的名称。

Element.tagName 只读

返回一个字符串,其中包含给定元素的标签名称。

ARIA 中包含的实例属性

Element 接口还包括以下属性。

Element.ariaAtomic

一个字符串,反映 aria-atomic 属性,该属性指示辅助技术是根据 aria-relevant 属性定义的更改通知来呈现所有更改区域还是仅呈现部分更改区域。

Element.ariaAutoComplete

一个字符串,反映 aria-autocomplete 属性,该属性指示输入文本是否可以触发显示一个或多个用户对组合框、搜索框或文本框的预期值的预测,并指定如果进行预测,它们将如何呈现。

Element.ariaBrailleLabel

一个字符串,反映 aria-braillelabel 属性,该属性定义元素的盲文标签。

Element.ariaBrailleRoleDescription

一个字符串,反映 aria-brailleroledescription 属性,该属性定义元素的 ARIA 盲文角色描述。

Element.ariaBusy

一个字符串,反映 aria-busy 属性,该属性指示元素是否正在被修改,因为辅助技术可能希望等到修改完成后再将其暴露给用户。

Element.ariaChecked

一个字符串,反映 aria-checked 属性,该属性指示复选框、单选按钮和具有选中状态的其他小部件的当前“选中”状态。

Element.ariaColCount

一个字符串,反映 aria-colcount 属性,该属性定义表格、网格或树网格中的列数。

Element.ariaColIndex

一个字符串,反映 aria-colindex 属性,该属性定义元素在表格、网格或树网格中相对于总列数的列索引或位置。

Element.ariaColIndexText

一个字符串,反映 aria-colindextext 属性,该属性定义 aria-colindex 的人类可读文本替代项。

Element.ariaColSpan

一个字符串,反映 aria-colspan 属性,该属性定义单元格或网格单元格在表格、网格或树网格中跨越的列数。

Element.ariaCurrent

一个字符串,反映 aria-current 属性,该属性指示容器或一组相关元素中表示当前项的元素。

Element.ariaDescription

一个字符串,反映 aria-description 属性,该属性定义描述或注释当前元素的字符串值。

Element.ariaDisabled

一个字符串,反映 aria-disabled 属性,该属性指示元素可感知但已禁用,因此不可编辑或以其他方式操作。

Element.ariaExpanded

一个字符串,反映 aria-expanded 属性,该属性指示此元素拥有或控制的分组元素是展开还是折叠。

Element.ariaHasPopup

一个字符串,反映 aria-haspopup 属性,该属性指示交互式弹出元素(如菜单或对话框)的可用性和类型,该弹出元素可以由元素触发。

Element.ariaHidden

一个字符串,反映 aria-hidden 属性,该属性指示元素是否暴露给辅助功能 API。

Element.ariaInvalid

一个字符串,反映 aria-invalid 属性,该属性指示输入值不符合应用程序预期的格式。

Element.ariaKeyShortcuts

一个字符串,反映 aria-keyshortcuts 属性,该属性指示作者已实现的键盘快捷键,用于激活或聚焦元素。

Element.ariaLabel

一个字符串,反映 aria-label 属性,该属性定义标记当前元素的字符串值。

Element.ariaLevel

一个字符串,反映 aria-level 属性,该属性定义元素在结构中的层次级别。

Element.ariaLive

一个字符串,反映 aria-live 属性,该属性指示元素将被更新,并描述用户代理、辅助技术和用户可以从活动区域预期的更新类型。

Element.ariaModal

一个字符串,反映 aria-modal 属性,该属性指示元素显示时是否为模态。

Element.ariaMultiline

一个字符串,反映 aria-multiline 属性,该属性指示文本框是接受多行输入还是只接受单行输入。

Element.ariaMultiSelectable

一个字符串,反映 aria-multiselectable 属性,该属性指示用户可以从当前可选择的后代中选择多个项。

Element.ariaOrientation

一个字符串,反映 aria-orientation 属性,该属性指示元素的朝向是水平、垂直还是未知/模糊。

Element.ariaPlaceholder

一个字符串,反映 aria-placeholder 属性,该属性定义一个简短提示,旨在帮助用户在控件没有值时进行数据输入。

Element.ariaPosInSet

一个字符串,反映 aria-posinset 属性,该属性定义元素在当前列表项或树项集中的编号或位置。

Element.ariaPressed

一个字符串,反映 aria-pressed 属性,该属性指示切换按钮的当前“按下”状态。

Element.ariaReadOnly

一个字符串,反映 aria-readonly 属性,该属性指示元素不可编辑,但仍可操作。

Element.ariaRelevant 非标准

一个字符串,反映 aria-relevant 属性,该属性指示当活动区域内的可访问性树被修改时,用户代理将触发哪些通知。这用于描述 aria-live 区域中哪些更改是相关的,应该被宣布。

Element.ariaRequired

一个字符串,反映 aria-required 属性,该属性指示在提交表单之前元素上需要用户输入。

Element.ariaRoleDescription

一个字符串,反映 aria-roledescription 属性,该属性定义了元素角色的可读、作者本地化的描述。

Element.ariaRowCount

一个字符串,反映 aria-rowcount 属性,该属性定义表格、网格或树网格中的总行数。

Element.ariaRowIndex

一个字符串,反映 aria-rowindex 属性,该属性定义元素在表格、网格或树网格中相对于总行数的行索引或位置。

Element.ariaRowIndexText

一个字符串,反映 aria-rowindextext 属性,该属性定义 aria-rowindex 的人类可读文本替代项。

Element.ariaRowSpan

一个字符串,反映 aria-rowspan 属性,该属性定义单元格或网格单元格在表格、网格或树网格中跨越的行数。

Element.ariaSelected

一个字符串,反映 aria-selected 属性,该属性指示具有选中状态的元素的当前“选中”状态。

Element.ariaSetSize

一个字符串,反映 aria-setsize 属性,该属性定义当前列表项或树项集中的项目数。

Element.ariaSort

一个字符串,反映 aria-sort 属性,该属性指示表格或网格中的项目是否按升序或降序排序。

Element.ariaValueMax

一个字符串,反映 aria-valueMax 属性,该属性定义范围小部件的最大允许值。

Element.ariaValueMin

一个字符串,反映 aria-valueMin 属性,该属性定义范围小部件的最小允许值。

Element.ariaValueNow

一个字符串,反映 aria-valueNow 属性,该属性定义范围小部件的当前值。

Element.ariaValueText

一个字符串,反映 aria-valuetext 属性,该属性定义范围小部件的 aria-valuenow 的人类可读文本替代项。

Element.role

一个字符串,反映显式设置的 role 属性,该属性提供元素的语义角色。

从 ARIA 元素引用中反映的实例属性

这些属性反映了相应属性中由 id 引用指定的元素,但有一些注意事项。有关更多信息,请参阅《反射属性》指南中的反射元素引用

Element.ariaActiveDescendantElement

一个元素,表示当焦点位于 复合 小部件、组合框文本框分组应用程序 上时,当前的活动元素。反映 aria-activedescendant 属性。

Element.ariaControlsElements

一个元素数组,其内容或存在受其所应用的元素控制。反映 aria-controls 属性。

Element.ariaDescribedByElements

一个元素数组,包含其所应用的元素的可访问描述。反映 aria-describedby 属性。

Element.ariaDetailsElements

一个元素数组,提供其所应用的元素的可访问详细信息。反映 aria-details 属性。

Element.ariaErrorMessageElements

一个元素数组,提供其所应用的元素的错误消息。反映 aria-errormessage 属性。

Element.ariaFlowToElements

一个元素数组,用于标识内容备用阅读顺序中的下一个元素(或多个元素),根据用户的判断覆盖一般默认阅读顺序。反映 aria-flowto 属性。

Element.ariaLabelledByElements

一个元素数组,提供其所应用的元素的可访问名称。反映 aria-labelledby 属性。

Element.ariaOwnsElements

一个元素数组,由其所应用的元素拥有。这用于定义父元素与其子元素之间的视觉、功能或上下文关系,当 DOM 层次结构无法表示该关系时。反映 aria-owns 属性。

实例方法

Element 继承自其父级 Node,以及它自己的父级 EventTarget 的方法。

Element.after()

Element 的父级的子节点列表中,紧接在 Element 之后插入一组 Node 对象或字符串。

Element.animate()

一个用于在元素上创建和运行动画的快捷方法。返回创建的 Animation 对象实例。

Element.ariaNotify() 实验性 非标准

指定给定的文本字符串应由屏幕阅读器宣布。

Element.append()

在元素的最后一个子节点之后插入一组 Node 对象或字符串。

Element.attachShadow()

将 Shadow DOM 树附加到指定的元素,并返回对其 ShadowRoot 的引用。

Element.before()

Element 的父级的子节点列表中,紧接在 Element 之前插入一组 Node 对象或字符串。

Element.checkVisibility()

根据可配置的检查,返回元素是否预期可见。

Element.closest()

返回与参数中给定选择器匹配的当前元素最近的祖先元素(或当前元素本身)的 Element

Element.computedStyleMap()

返回一个 StylePropertyMapReadOnly 接口,它提供了一个 CSS 声明块的只读表示,作为 CSSStyleDeclaration 的替代方案。

Element.getAnimations()

返回当前在元素上活动的 Animation 对象数组。

Element.getAttribute()

从当前节点检索指定属性的值并将其作为字符串返回。

Element.getAttributeNames()

从当前元素返回属性名称数组。

Element.getAttributeNode()

从当前节点检索指定属性的节点表示并将其作为 Attr 返回。

Element.getAttributeNodeNS()

从当前节点检索具有指定名称和命名空间的属性的节点表示并将其作为 Attr 返回。

Element.getAttributeNS()

从当前节点检索具有指定命名空间和名称的属性的值并将其作为字符串返回。

Element.getBoundingClientRect()

返回元素的大小及其相对于视口的位置。

Element.getBoxQuads() 实验性

返回表示节点 CSS 片段的 DOMQuad 对象列表。

Element.getClientRects()

返回一个矩形集合,表示客户端中文本每行的边界矩形。

Element.getElementsByClassName()

返回一个活动的 HTMLCollection,其中包含当前元素的所有后代元素,这些元素具有参数中给出的类列表。

Element.getElementsByTagName()

从当前元素返回一个活动的 HTMLCollection,其中包含特定标签名称的所有后代元素。

Element.getElementsByTagNameNS()

从当前元素返回一个活动的 HTMLCollection,其中包含特定标签名称和命名空间的所有后代元素。

Element.getHTML()

将元素的 DOM 内容作为 HTML 字符串返回,可选地包括任何 Shadow DOM。

Element.hasAttribute()

返回一个布尔值,指示元素是否具有指定的属性。

Element.hasAttributeNS()

返回一个布尔值,指示元素是否在指定的命名空间中具有指定的属性。

Element.hasAttributes()

返回一个布尔值,指示元素是否具有一个或多个 HTML 属性。

Element.hasPointerCapture()

指示调用它的元素是否对给定指针 ID 标识的指针具有指针捕获。

Element.insertAdjacentElement()

在相对于调用它的元素给定位置插入给定元素节点。

Element.insertAdjacentHTML()

将文本解析为 HTML 或 XML,并将生成的节点插入到给定位置的树中。

Element.insertAdjacentText()

在相对于调用它的元素给定位置插入给定文本节点。

Element.matches()

返回一个布尔值,指示元素是否会被指定的选择器字符串选中。

Element.moveBefore()

在不删除然后插入节点的情况下,将给定 Node 作为直接子节点移动到调用节点内部,位于给定参考节点之前。

Element.prepend()

在元素的第一个子节点之前插入一组 Node 对象或字符串。

Element.querySelector()

返回相对于元素与指定选择器字符串匹配的第一个 Node

Element.querySelectorAll()

返回一个 NodeList,其中包含相对于元素与指定选择器字符串匹配的节点。

Element.releasePointerCapture()

释放(停止)先前为特定 PointerEvent 设置的指针捕获。

Element.remove()

从其父级的子节点列表中删除元素。

Element.removeAttribute()

从当前节点删除指定属性。

Element.removeAttributeNode()

从当前节点删除指定属性的节点表示。

Element.removeAttributeNS()

从当前节点删除具有指定名称和命名空间的属性。

Element.replaceChildren()

用指定的新子节点集替换 Node 的现有子节点。

Element.replaceWith()

用一组 Node 对象或字符串替换其父级子节点列表中的元素。

Element.requestFullscreen()

异步请求浏览器使元素全屏。

Element.requestPointerLock()

允许异步请求将指针锁定在给定元素上。

Element.scroll()

滚动到给定元素内的一组特定坐标。

Element.scrollBy()

按给定数量滚动元素。

Element.scrollIntoView()

滚动页面直到元素进入视图。

Element.scrollIntoViewIfNeeded() 非标准

如果当前元素不在浏览器窗口的可见区域内,则将其滚动到浏览器窗口的可见区域。请改用标准 Element.scrollIntoView()

Element.scrollTo()

滚动到给定元素内的一组特定坐标。

Element.setAttribute()

设置当前节点指定属性的值。

Element.setAttributeNode()

设置当前节点指定属性的节点表示。

Element.setAttributeNodeNS()

设置当前节点具有指定名称和命名空间的属性的节点表示。

Element.setAttributeNS()

设置当前节点具有指定名称和命名空间的属性的值。

Element.setCapture() 非标准 已弃用

设置鼠标事件捕获,将所有鼠标事件重定向到此元素。

Element.setHTML() 安全上下文 实验性

解析并清理 HTML 字符串为文档片段,然后该片段替换元素在 DOM 中的原始子树。

Element.setHTMLUnsafe()

解析 HTML 字符串为文档片段,不进行清理,然后该片段替换元素在 DOM 中的原始子树。HTML 字符串可能包含声明性 Shadow Root,如果 HTML 是使用 Element.innerHTML 设置的,则这些 Shadow Root 将被解析为模板元素。

Element.setPointerCapture()

指定一个特定元素作为未来 指针事件 的捕获目标。

Element.toggleAttribute()

切换一个布尔属性,如果它存在则删除它,如果它不存在则添加到指定的元素。

事件

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

afterscriptexecute 非标准 已弃用

当脚本执行后触发。

beforeinput

当输入元素的值即将被修改时触发。

beforematch

当元素处于隐藏直到找到状态时,如果用户通过“在页面中查找”功能或片段导航找到内容,浏览器即将显示其内容时触发。

beforescriptexecute 非标准 已弃用

当脚本即将执行时触发。

beforexrselect 实验性

在 WebXR 选择事件(selectselectstartselectend)分派之前触发。

contentvisibilityautostatechange

当设置了 content-visibility: auto 的任何元素开始或停止与用户相关跳过其内容时触发。

input

当元素的值因用户操作直接改变时触发。

securitypolicyviolation

当违反 内容安全策略 时触发。

wheel

当用户旋转指点设备(通常是鼠标)上的滚轮按钮时触发。

动画事件

animationcancel

当动画意外中止时触发。

animationend

当动画正常完成时触发。

animationiteration

当动画迭代完成时触发。

animationstart

当动画开始时触发。

剪贴板事件

copy

当用户通过浏览器用户界面启动复制操作时触发。

cut

当用户通过浏览器用户界面启动剪切操作时触发。

paste

当用户通过浏览器用户界面启动粘贴操作时触发。

合成事件

compositionend

当文本合成系统(例如输入法编辑器)完成或取消当前合成会话时触发。

compositionstart

当文本合成系统(例如输入法编辑器)开始新的合成会话时触发。

compositionupdate

当在文本合成系统(例如输入法编辑器)控制的文本合成会话上下文中接收到新字符时触发。

焦点事件

blur

当一个元素失去焦点时触发。

focus

当元素获得焦点时触发。

focusin

focus 之后,当元素获得焦点时触发。

focusout

blur 之后,当元素失去焦点时触发。

全屏事件

fullscreenchange

Element 进入或退出全屏模式时发送。

fullscreenerror

如果尝试将 Element 切换进入或退出全屏模式时发生错误,则发送给 Element

键盘事件

keydown

当按下键时触发。

keypress 已弃用

当按下产生字符值的键时触发。

keyup

当释放键时触发。

鼠标事件

auxclick

当非主指点设备按钮(例如,除左键之外的任何鼠标按钮)在元素上按下并释放时触发。

click

当指点设备按钮(例如,鼠标的主按钮)在单个元素上按下并释放时触发。

contextmenu

当用户尝试打开上下文菜单时触发。

dblclick

当指点设备按钮(例如,鼠标的主按钮)在单个元素上点击两次时触发。

DOMActivate 已弃用

当元素被激活时发生,例如通过鼠标点击或按键。

DOMMouseScroll 已弃用 非标准

当鼠标滚轮或类似设备操作且累计滚动量自上次事件以来超过 1 行或 1 页时发生。

mousedown

当在元素上按下指点设备按钮时触发。

mouseenter

当指点设备(通常是鼠标)移动到附加了监听器的元素上时触发。

mouseleave

当指点设备(通常是鼠标)的指针从附加了监听器的元素上移出时触发。

mousemove

当指点设备(通常是鼠标)在元素上移动时触发。

mouseout

当指点设备(通常是鼠标)从附加了监听器的元素或其子元素上移开时触发。

mouseover

当指点设备移动到附加了监听器的元素或其子元素上时触发。

mouseup

当在元素上释放指点设备按钮时触发。

mousewheel 已弃用 非标准

当鼠标滚轮或类似设备操作时触发。

MozMousePixelScroll 已弃用 非标准

当鼠标滚轮或类似设备操作时触发。

webkitmouseforcechanged 非标准

每次触摸板触摸屏上的压力量发生变化时触发。

webkitmouseforcedown 非标准

在 mousedown 事件之后,一旦施加了足够的压力以符合“强制点击”时触发。

webkitmouseforcewillbegin 非标准

mousedown 事件之前触发。

webkitmouseforceup 非标准

webkitmouseforcedown 事件之后,一旦压力减小到足以结束“强制点击”时触发。

指针事件

gotpointercapture

当元素使用 setPointerCapture() 捕获指针时触发。

lostpointercapture

捕获的指针被释放时触发。

pointercancel

当指针事件被取消时触发。

pointerdown

当指针变为活动状态时触发。

pointerenter

当指针移动到元素或其子元素的命中测试边界内时触发。

pointerleave

当指针从元素的命中测试边界中移出时触发。

pointermove

当指针坐标改变时触发。

pointerout

当指针从元素的命中测试边界中移出时触发(还有其他原因)。

pointerover

当指针移动到元素的命中测试边界内时触发。

pointerrawupdate

当指针的任何属性发生变化,但未触发 pointerdownpointerup 事件时触发。

pointerup

当指针不再活动时触发。

滚动事件

scroll

当文档视图或元素已滚动时触发。

scrollend

当文档视图完成滚动时触发。

scrollsnapchange 实验性

在滚动操作结束时,当选择了新的滚动捕捉目标时,在滚动容器上触发。

scrollsnapchanging 实验性

当浏览器确定一个新的滚动捕捉目标即将生效时,在滚动容器上触发,即它将在当前滚动手势结束时被选中。

触摸事件

gesturechange 非标准

当触控手势期间手指移动时触发。

gestureend 非标准

当不再有多个手指接触触控表面,从而结束手势时触发。

gesturestart 非标准

当多个手指接触触控表面,从而开始新手势时触发。

touchcancel

当一个或多个触控点以实现特定的方式中断时触发(例如,创建了太多触控点)。

touchend

当一个或多个触控点从触控表面移除时触发。

touchmove

当一个或多个触控点沿触控表面移动时触发。

touchstart

当一个或多个触控点放置在触控表面上时触发。

过渡事件

transitioncancel

CSS 过渡被取消时触发的 Event

transitionend

CSS 过渡完成播放时触发的 Event

transitionrun

CSS 过渡被创建时(即,当它被添加到一组正在运行的过渡中时)触发的 Event,但不一定已开始。

transitionstart

CSS 过渡已开始过渡时触发的 Event

规范

规范
DOM
# interface-element
指针事件
# 对 Element 接口的扩展
Fullscreen API
# api
DOM 解析和序列化
# 对 Element 接口的扩展
CSSOM 视图模块
# 对 Element 接口的扩展

浏览器兼容性