Element

Element 是最通用的基类,Document 中的所有元素对象(即表示元素的对象)都继承自它。它只具有各种元素共有的方法和属性。更具体的类则继承自 Element

例如,HTMLElement 接口是所有 HTML 元素的基本接口。同样,SVGElement 接口是所有 SVG 元素的基本接口,而 MathMLElement 接口则是 MathML 元素的基础接口。大多数功能是在这个类的更深层级的接口中被进一步制定的。

在 Web 平台的领域以外的语言,比如 XUL,通过 XULElement 接口,同样也实现了 Element 接口。

EventTarget Node Element

实例属性

Element 从其父接口 Node 以及该接口的父接口 EventTarget 继承属性。

Element.assignedSlot (en-US) 只读

返回一个表示节点所插入的 <slot>HTMLSlotElement 值。

Element.attributes 只读

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

Element.childElementCount 只读

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

Element.children 只读

返回此元素的子元素。

Element.classList 只读

返回该元素包含的所有 class 属性,是一个 DOMTokenList

Element.className

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

Element.clientHeight 只读

返回代表元素内部高度的数值。

Element.clientLeft 只读

返回代表元素左边界宽度的数值。

Element.clientTop 只读

返回代表元素顶部边框宽度的数值。

Element.clientWidth 只读

返回代表元素内部宽度的数值。

Element.elementTiming 实验性

一个字符串,反映了 elementtiming (en-US) 属性,该属性在 PerformanceElementTiming (en-US) API 中标记了一个观察元素。

Element.firstElementChild 只读

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

Element.id

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

Element.innerHTML

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

Element.lastElementChild 只读

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

Element.localName 只读

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

Element.namespaceURI 只读

元素对应的命名空间 URI,如果没有则返回 null

备注: 在 Firefox 3.5 及更早版本中,HTML 元素不在命名空间中。在以后的版本中,HTML 元素在 HTML 树和 XML 树中都属于 http://www.w3.org/1999/xhtml 命名空间。

Element.nextElementSibling 只读

一个 Element,树中紧跟给定元素的元素,如果没有同级节点,则为 null

Element.outerHTML

一个字符串,代表元素的标记(包括其内容)。作为 setter 使用时,将用从给定字符串解析出的节点替换元素。

Element.part (en-US)

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

Element.prefix 只读

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

Element.previousElementSibling 只读

一个 Element,树中紧靠给定元素的元素,如果没有同级元素,则为 null

Element.scrollHeight 只读

元素滚动视图高度的数值。

Element.scrollLeft

元素左滚动偏移量的数值。

Element.scrollLeftMax 非标准 只读

元素可能的最大左滚动偏移值。

Element.scrollTop

元素顶部垂直滚动的像素数。

Element.scrollTopMax 非标准 只读

元素可能的最大顶部滚动偏移值。

Element.scrollWidth 只读

代表元素滚动视图宽度的数值。

Element.shadowRoot 只读

返回元素挂载的开放影子根;如果没有开放影子根,则返回 null。

Element.slot

返回元素插入的影子 DOM 插槽的名称。

Element.tagName 只读

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

ARIA 中包含的实例属性

Element 接口包括以下在 ARIAMixin 混入中定义的属性。

Element.ariaAtomic (en-US)

反映 aria-atomic (en-US) 属性的字符串,表示辅助技术是否将根据 aria-relevant (en-US) 属性定义的变更通知,显示全部或仅部分变更区域。

Element.ariaAutoComplete (en-US)

反映 aria-autocomplete (en-US) 属性的字符串,表示输入文本是否会触发显示一个或多个用户对组合框、搜索框或文本框的预期值的预测,并指定如果进行了预测将如何显示。

Element.ariaBusy (en-US)

反映 aria-busy (en-US) 属性的字符串,表示元素是否正在被修改,因为辅助技术可能希望等到修改完成后再向用户展示。

Element.ariaChecked (en-US)

反映 aria-checked (en-US)属性的字符串,表示复选框、单选按钮和其他具有选中状态的部件的当前“选中”状态。

Element.ariaColCount (en-US)

反映 aria-colcount (en-US) 属性的字符串,该属性定义了表格、网格或树状网格中的列数。

Element.ariaColIndex (en-US)

反映 aria-colindex (en-US) 属性的字符串,该属性定义了元素的列索引或相对于表格、网格或树状网格中列总数的位置。

Element.ariaColIndexText (en-US) 实验性

反映 aria-colindextext (en-US) 属性的字符串,该属性定义了 aria-colindex 的人类可读文本替代。

Element.ariaColSpan (en-US)

反映 aria-colspan (en-US) 属性的字符串,该属性定义了表格、网格或树型网格中单元格或网格单元格所跨列数。

Element.ariaCurrent (en-US)

反映 aria-current (en-US) 属性的字符串,表示在一个容器或一组相关元素中代表当前项目的元素。

Element.ariaDescription (en-US)

反映 aria-description (en-US) 属性的字符串,该属性定义了描述或注释当前元素的字符串值。

Element.ariaDisabled (en-US)

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

Element.ariaExpanded (en-US)

反映 aria-expanded (en-US) 属性的字符串,表示该元素拥有或控制的分组元素是展开还是折叠状态。

Element.ariaHasPopup (en-US)

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

Element.ariaHidden (en-US)

反映 aria-hidden 属性的字符串,表示元素是否暴露于无障碍 API。

Element.ariaKeyShortcuts (en-US)

反映 aria-keyshortcuts (en-US) 属性的字符串,表示作者为激活元素或将焦点赋予元素而实施的键盘快捷方式。

Element.ariaLabel (en-US)

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

Element.ariaLevel (en-US)

反映 aria-level (en-US) 属性的字符串,该属性定义了结构中元素的层次级别。

Element.ariaLive

反映 aria-live (en-US) 属性的字符串,表示元素将被更新,并描述了用户代理、辅助技术和用户可期望从实时区域获得的更新类型。

Element.ariaModal (en-US)

反映 aria-modal (en-US) 属性的字符串,表示元素在显示时是否为模态元素。

Element.ariaMultiline (en-US)

反映 aria-multiline (en-US) 属性的字符串,表示文本框是接受多行输入还是只接受单行输入。

Element.ariaMultiSelectable (en-US)

反映 aria-multiselectable (en-US) 属性的字符串,表示用户可以从当前可选后代中选择多个项目。

Element.ariaOrientation (en-US)

反映 aria-orientation (en-US) 属性的字符串,表示元素的方向是水平、垂直还是未知/模糊。

Element.ariaPlaceholder (en-US)

反映 aria-placeholder (en-US) 属性的字符串,它定义了一个简短的提示,目的是在控件无值时帮助用户输入数据。

Element.ariaPosInSet (en-US)

反映 aria-posinset (en-US) 属性的字符串,它定义了元素在当前列表项或树状项集合中的编号或位置。

Element.ariaPressed (en-US)

反映 aria-pressed (en-US) 属性的字符串,表示切换按钮当前的“按下”状态。

Element.ariaReadOnly (en-US)

反映 aria-readonly (en-US) 属性的字符串,表示该元素不可编辑,但在其他方面是可操作的。

Element.ariaRelevant (en-US) 非标准

反映 aria-relevant (en-US) 属性的字符串,表示当实时区域内的无障碍树被修改时,用户代理将触发哪些通知。该属性用于描述 aria-live 区域中哪些变化是相关的,应予以公布。

Element.ariaRequired (en-US)

aria-required (en-US) 属性的字符串,表示在提交表单前需要用户输入。

Element.ariaRoleDescription (en-US)

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

Element.ariaRowCount (en-US)

反映 aria-rowcount (en-US) 属性的字符串,该属性定义了表格、网格或树状网格中的总行数。

Element.ariaRowIndex (en-US)

反映 aria-rowindex (en-US) 属性的字符串,它定义了元素的行索引或相对于表格、网格或树状网格中总行数的位置。

Element.ariaRowIndexText (en-US) 实验性

反映 aria-rowindextext (en-US) 属性的字符串,它定义了 aria-rowindex 的人类可读文本替代。

Element.ariaRowSpan (en-US)

反映 aria-rowspan (en-US) 属性的字符串,该属性定义了表格、网格或树型网格中单元格或网格单元格所跨行数。

Element.ariaSelected (en-US)

反映 aria-selected (en-US) 属性的字符串,表示具有选定状态的元素的当前“选定”状态。

Element.ariaSetSize (en-US)

反映 aria-setsize (en-US) 属性的字符串,该属性定义了当前列表项或树状项集合中的项数。

Element.ariaSort (en-US)

反映 aria-sort (en-US) 属性的字符串,表示表格或网格中的项目是按升序还是降序排序。

Element.ariaValueMax (en-US)

反映 aria-valueMax (en-US) 属性的字符串,该属性定义了范围部件允许的最大值。

Element.ariaValueMin (en-US)

反映 aria-valueMin (en-US) 属性的字符串,该属性定义了范围部件的最小允许值。

Element.ariaValueNow (en-US)

反映 aria-valueNow (en-US) 属性的字符串,该属性定义了范围部件的当前值。

Element.ariaValueText (en-US)

反映 aria-valuetext (en-US) 属性的字符串,该属性为范围部件定义了 aria-valuenow 的人类可读文本替代值。

实例方法

Element 继承 Node 及其父接口 EventTarget 的方法。

Element.after()

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

Element.animate()

在元素上创建并运行动画的快捷方法。返回创建的动画对象实例。

Element.append()

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

Element.attachShadow()

为指定元素附加影子 DOM 树,并返回指向其 ShadowRoot 的引用。

Element.before()

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

Element.closest()

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

Element.computedStyleMap() (en-US)

返回一个 StylePropertyMapReadOnly (en-US) 接口,该接口提供 CSS 声明块的只读表示,可替代 CSSStyleDeclaration

Element.getAnimations() (en-US)

返回元素当前活动的动画对象数组。

Element.getAttribute()

从当前节点读取指定属性的值,并以字符串形式返回。

Element.getAttributeNames()

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

Element.getAttributeNode()

从当前节点获取指定属性的节点表示,并以 Attr 的形式返回。

Element.getAttributeNodeNS()

从当前节点读取指定名称和命名空间的属性的节点表示,并以 Attr 的形式返回。

Element.getAttributeNS() (en-US)

从当前节点读取指定名称空间和名称的属性值,并以字符串形式返回。

Element.getBoundingClientRect()

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

Element.getBoxQuads() 实验性

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

Element.getClientRects()

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

Element.getElementsByClassName()

返回一个实时的 HTMLCollection,其中包含当前元素的所有后代,这些后代拥有参数中给定的类列表。

Element.getElementsByTagName()

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

Element.getElementsByTagNameNS()

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

Element.hasAttribute()

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

Element.hasAttributeNS()

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

Element.hasAttributes()

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

Element.hasPointerCapture() (en-US)

指示调用该函数的元素是否具有指针捕获功能,用于捕获由给定指针 ID 标识的指针。

Element.insertAdjacentElement()

将指定元素节点插入调用该函数的元素的指定位置。

Element.insertAdjacentHTML()

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

Element.insertAdjacentText()

将给定的文本节点插入调用该函数的元素的指定位置。

Element.matches()

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

Element.prepend()

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

Element.querySelector()

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

Element.querySelectorAll()

返回 NodeList 中相对于元素符合指定选择器字符串的节点。

Element.releasePointerCapture() (en-US)

释放(停止)之前为特定指针事件设置的指针捕捉。

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() 实验性

解析和净化 (en-US) HTML 字符串,并插入到 DOM 作为元素的子树。

Element.setPointerCapture()

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

Element.toggleAttribute()

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

事件

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

afterscriptexecute 非标准

执行脚本时触发此事件。

beforematch (en-US) 实验性

浏览器在(处于被找到前隐藏状态的)元素因用户已通过“在页面中查找”功能或片段导航找到了该内容而即将显示时触发。

beforescriptexecute 非标准

脚本即将执行时触发此事件。

contentvisibilityautostatechange 实验性

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

scroll

当文档视图或元素滚动时触发此事件。

scrollend (en-US)

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

securitypolicyviolation (en-US)

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

wheel

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

动画事件

animationcancel

当动画意外终止时触发此事件。

animationend

当动画正常结束时触发此事件。

animationiteration

当动画迭代完成时触发此事件。

animationstart

当动画开始时触发此事件。

剪贴板事件

copy

当用户通过浏览器的用户界面初始化复制操作时触发此事件。

cut

当用户通过浏览器的用户界面初始化剪切操作时触发此事件。

paste

当用户通过浏览器的用户界面初始化粘贴操作时触发此事件。

合成事件

compositionend

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

compositionstart

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

compositionupdate

在文本合成系统(如输入法编辑器)控制的文本合成会话中收到新字符时触发此事件。

聚焦事件

blur

当元素失去焦点时触发此事件。

focus

当元素获得焦点时触发此事件。

focusin (en-US)

当元素获得焦点时触发此事件,位于 focus 事件之后。

focusout

当元素失去焦点时触发此事件,位于 blur 事件之后。

全屏事件

fullscreenchange

当前 Element 进入或退出全屏模式时发送给该元素。

fullscreenerror

如果在尝试将当前 Element 切换到或切换出全屏模式时发生错误,则向该 Element 发送该事件。

键盘事件

keydown

当按键按下时触发此事件。

keypress 已弃用

当按下可产生字符值的按键时触发此事件。

keyup

当按键释放时触发此事件。

鼠标事件

auxclick

当元素上的非主要指针设备按钮(例如除左键以外的任何鼠标按钮)被按下并释放时触发此事件。

click

指针设备按钮(如鼠标的主按钮)在单个元素上按下并释放时触发此事件。

contextmenu

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

dblclick

当指针设备按钮(如鼠标的主按钮)在单个元素上被点击两次时触发此事件。

DOMActivate 已弃用

元素被激活,例如通过鼠标点击或按键时触发此事件。

DOMMouseScroll (en-US) 已弃用 非标准

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

mousedown

当元素上的指针设备按钮被按下时触发此事件。

mouseenter

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

mouseleave

当指针设备(通常是鼠标)的指针移出附有监听器的元素时触发此事件。

mousemove

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

mouseout

当指针设备(通常是鼠标)离开监听器所连接的元素或其子元素时触发此事件。

mouseover

当指针设备移动到监听器所连接的元素上或其子元素上时触发此事件。

mouseup

当元素上的指针设备按钮被释放时触发此事件。

mousewheel 已弃用 非标准

操作鼠标滚轮或类似设备时触发此事件。

MozMousePixelScroll (en-US) 已弃用 非标准

操作鼠标滚轮或类似设备时触发此事件。

webkitmouseforcechanged (en-US) 非标准

每次触控板触摸屏上的压力发生变化时触发此事件。

webkitmouseforcedown (en-US) 非标准

在鼠标按下事件后,一旦施加了足够的压力,就会触发“强制点击”。

webkitmouseforcewillbegin (en-US) 非标准

mousedown 事件之前触发。

webkitmouseforceup (en-US) 非标准

webkitmouseforcedown (en-US) 事件之后,当压力充分减小以结束“强制点击”时触发。

指针事件

gotpointercapture

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

lostpointercapture

捕获指针被释放时触发。

pointercancel

指针事件取消时触发。

pointerdown

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

pointerenter

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

pointerleave

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

pointermove

指针改变坐标时触发。

pointerout

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

pointerover

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

pointerrawupdate (en-US) 实验性

指针改变任何属性时触发,这些属性不会触发 pointerdownpointerup 事件。

pointerup

指针不再处于活动状态时触发。

触摸事件

gesturechange (en-US) 非标准

触控手势期间数字移动时触发。

gestureend (en-US) 非标准

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

gesturestart (en-US) 非标准

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

touchcancel

当一个或多个触摸点以特定的实现方式受到破坏(例如,创建的触摸点过多)时触发。

touchend

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

touchmove

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

touchstart

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

过渡事件

transitioncancel

CSS 过渡被取消时触发的 Event

transitionend

CSS 过渡结束播放时触发的 Event

transitionrun (en-US)

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

transitionstart

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

规范

Specification
DOM Standard
# interface-element
Pointer Events
# extensions-to-the-element-interface
Pointer Lock 2.0
# extensions-to-the-element-interface
Fullscreen API Standard
# api
DOM Parsing and Serialization
# extensions-to-the-element-interface
CSSOM View Module
# extension-to-the-element-interface

浏览器兼容性

BCD tables only load in the browser