Element
Baseline 广泛可用 *
Element 是所有元素对象(即表示元素的Document)的基类,它继承自这个最通用的基类。它只包含所有类型元素共有的方法和属性。更具体的类会继承自 Element。
例如,HTMLElement 接口是 HTML 元素的基接口。类似地,SVGElement 接口是所有 SVG 元素的基接口,而 MathMLElement 接口是 MathML 元素的基接口。大多数功能都在类层次结构中进一步指定。
Web 平台领域之外的语言,例如通过 XULElement 接口实现的 XUL,也实现了 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属性,该属性用于标记元素以便在PerformanceElementTimingAPI 中进行观察。 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属性,该属性指示交互式弹出元素(如菜单或对话框)的可用性和类型,该弹出元素可以由元素触发。 -
一个字符串,反映
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 选择事件(
select、selectstart、selectend)分派之前触发。 contentvisibilityautostatechange-
当设置了
content-visibility: auto的任何元素开始或停止与用户相关并跳过其内容时触发。 input-
当元素的值因用户操作直接改变时触发。
securitypolicyviolation-
当违反 内容安全策略 时触发。
wheel-
当用户旋转指点设备(通常是鼠标)上的滚轮按钮时触发。
动画事件
animationcancel-
当动画意外中止时触发。
animationend-
当动画正常完成时触发。
animationiteration-
当动画迭代完成时触发。
animationstart-
当动画开始时触发。
剪贴板事件
合成事件
compositionend-
当文本合成系统(例如输入法编辑器)完成或取消当前合成会话时触发。
compositionstart-
当文本合成系统(例如输入法编辑器)开始新的合成会话时触发。
compositionupdate-
当在文本合成系统(例如输入法编辑器)控制的文本合成会话上下文中接收到新字符时触发。
焦点事件
全屏事件
fullscreenchange-
当
Element进入或退出全屏模式时发送。 fullscreenerror-
如果尝试将
Element切换进入或退出全屏模式时发生错误,则发送给Element。
键盘事件
鼠标事件
auxclick-
当非主指点设备按钮(例如,除左键之外的任何鼠标按钮)在元素上按下并释放时触发。
click-
当指点设备按钮(例如,鼠标的主按钮)在单个元素上按下并释放时触发。
-
当用户尝试打开上下文菜单时触发。
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-
当指针的任何属性发生变化,但未触发
pointerdown或pointerup事件时触发。 pointerup-
当指针不再活动时触发。
滚动事件
scroll-
当文档视图或元素已滚动时触发。
scrollend-
当文档视图完成滚动时触发。
scrollsnapchange实验性-
在滚动操作结束时,当选择了新的滚动捕捉目标时,在滚动容器上触发。
scrollsnapchanging实验性-
当浏览器确定一个新的滚动捕捉目标即将生效时,在滚动容器上触发,即它将在当前滚动手势结束时被选中。
触摸事件
gesturechange非标准-
当触控手势期间手指移动时触发。
gestureend非标准-
当不再有多个手指接触触控表面,从而结束手势时触发。
gesturestart非标准-
当多个手指接触触控表面,从而开始新手势时触发。
touchcancel-
当一个或多个触控点以实现特定的方式中断时触发(例如,创建了太多触控点)。
touchend-
当一个或多个触控点从触控表面移除时触发。
touchmove-
当一个或多个触控点沿触控表面移动时触发。
touchstart-
当一个或多个触控点放置在触控表面上时触发。
过渡事件
规范
| 规范 |
|---|
| DOM # interface-element |
| 指针事件 # 对 Element 接口的扩展 |
| Fullscreen API # api |
| DOM 解析和序列化 # 对 Element 接口的扩展 |
| CSSOM 视图模块 # 对 Element 接口的扩展 |
浏览器兼容性
加载中…