path: root/files/zh-cn/web/api/element/index.html

---
title: Element
slug: Web/API/Element
tags:
  - API
  - DOM
  - DOM参考
  - Element
  - 元素
  - 参考
  - 接口
translation_of: Web/API/Element
---
<p>{{APIRef("DOM")}}</p>

<p><span class="seoSummary"><strong><code>Element</code></strong> 是一个通用性非常强的基类，所有 {{DOMxRef("Document")}} 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 <code>Element</code> 并且增加了一些额外功能的接口描述了具体的行为。</span>例如， {{DOMxRef("HTMLElement")}} 接口是所有 HTML 元素的基本接口，而 {{DOMxRef("SVGElement")}} 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。</p>

<p>在 Web 平台的领域以外的语言，比如 XUL，通过 <code>XULElement</code> 接口，同样也实现了 <code>Element</code> 接口。</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Properties" name="Properties">属性</h2>

<p><em>所有属性继承自它的祖先接口 {{DOMxRef("Node")}}，并且扩展了 {{DOMxRef("Node")}} 的父接口 {{DOMxRef("EventTarget")}}，并且从以下部分继承了属性：{{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}，</em>和 {{DOMxRef("Animatable")}}。</p>

<dl>
 <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt>
 <dd>返回一个与该元素相关的所有属性集合 {{DOMxRef("NamedNodeMap")}}。</dd>
 <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt>
 <dd>返回该元素包含的 class 属性，是一个 {{DOMxRef("DOMTokenList")}}。</dd>
 <dt>{{DOMxRef("Element.className")}}</dt>
 <dd>一个 {{DOMxRef("DOMString")}}，表示这个元素的 class。</dd>
 <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt>
 <dd>返回{{jsxref("Number")}} 表示内部相对于外层元素的高度。</dd>
 <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt>
 <dd>返回{{jsxref("Number")}}表示该元素距离它左边界的宽度。</dd>
 <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt>
 <dd>返回 {{jsxref("Number")}} 表示该元素距离它上边界的高度。</dd>
 <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt>
 <dd>返回{{jsxref("Number")}} 表示该元素内部的宽度。</dd>
 <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt>
 <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd>
 <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt>
 <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element.</dd>
 <dt>{{DOMxRef("Element.id")}}</dt>
 <dd>是一个{{DOMxRef("DOMString")}} 表示这个元素的id。</dd>
 <dt>{{DOMxRef("Element.innerHTML")}}</dt>
 <dd>是一个{{DOMxRef("DOMString")}} 表示这个元素的内容文本。</dd>
 <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt>
 <dd>是一个 {{DOMxRef("DOMString")}} 表示这个元素名称本地化的部分。</dd>
 <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt>
 <dd>元素对应的 namespace URI ，如果没有则返回 <code>null</code>
 <div class="note">
 <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p>
 </div>
 </dd>
 <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
 <dd>是一个{{DOMxRef("Element")}}, 该元素下一个兄弟节点, 如果为null表示不存在..</dd>
 <dt>{{DOMxRef("Element.outerHTML")}}</dt>
 <dd>是一个 {{DOMxRef("DOMString")}}，获取该DOM元素及其后代的HTML文本。在设置它的时候，会从给定的字符串开始解析，替换自身。</dd>
 <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt>
 <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
 <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
 <dd>是一个 {{DOMxRef("Element")}}, 该元素上一个兄弟节点, 如果为null表示不存在..</dd>
 <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt>
 <dd>返回类型为： {{jsxref("Number")}}，表示元素的滚动视图高度。</dd>
 <dt>{{DOMxRef("Element.scrollLeft")}}</dt>
 <dd>返回类型为：{{jsxref("Number")}}，表示该元素横向滚动条距离最左的位移.</dd>
 <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
 <dd>返回类型为： {{jsxref("Number")}}，表示该元素横向滚动条可移动的最大值</dd>
 <dt>{{DOMxRef("Element.scrollTop")}}</dt>
 <dd>返回类型为：{{jsxref("Number")}} ，表示该元素纵向滚动条距离</dd>
 <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
 <dd>返回类型为：{{jsxref("Number")}} ，表示该元素纵向滚动条可移动的最大值</dd>
 <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt>
 <dd>返回类型为： {{jsxref("Number")}} ，表示元素的滚动视图宽度。</dd>
 <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt>
 <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd>
 <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
 <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
 <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt>
 <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd>
 <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
 <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt>
 <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</dd>
 <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt>
 <dd>Returns the {{DOMxRef("UndoManager")}} associated with the element.</dd>
 <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt>
 <dd>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
</dl>

<div class="note">
<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p>

<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
</div>

<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3>

<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p>

<dl>
 <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
 <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd>
</dl>

<h3 id="Handlers" name="Handlers">事件句柄</h3>

<dl>
 <dt>{{domxref("Element.onfullscreenchange")}}</dt>
 <dd>事件 {{event("fullscreenchange")}} 的回调方法, 在元素进入或退出全屏模式时触发. 不仅可用于观察（监听）可预期的过度变化，还可以观察（监听）未知的变化，如：当你的应用程序在后台运行。</dd>
 <dt>{{domxref("Element.onfullscreenerror")}}</dt>
 <dd>事件 {{event("fullscreenerror")}} 的回调方法, 在进入全屏模式过程中出现错误时触发.</dd>
</dl>

<h2 id="Methods" name="Methods">方法</h2>

<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p>

<dl>
 <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt>
 <dd>Registers an event handler to a specific event type on the element.</dd>
 <dt>{{DOMxRef("Element.attachShadow()")}}</dt>
 <dd>Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd>
 <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt>
 <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
 <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt>
 <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd>
 <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
 <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd>
 <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
 <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd>
 <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt>
 <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd>
 <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt>
 <dd>Returns an array of Animation objects currently active on the element.</dd>
 <dt>{{DOMxRef("Element.getAttribute()")}}</dt>
 <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
 <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt>
 <dd>Returns an array of attribute names from the current element.</dd>
 <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt>
 <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
 <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt>
 <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
 <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
 <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
 <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt>
 <dd>返回元素的大小及其相对于视口的位置。</dd>
 <dt>{{DOMxRef("Element.getClientRects()")}}</dt>
 <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
 <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt>
 <dd>参数中给出类的列表，返回一个动态的 {{DOMxRef("HTMLCollection")}} ，包含了所有持有这些类的后代元素。</dd>
 <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt>
 <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd>
 <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt>
 <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
 <dt>{{DOMxRef("Element.hasAttribute()")}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
 <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
 <dt>{{DOMxRef("Element.hasAttributes()")}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
 <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
 <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd>
 <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt>
 <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
 <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt>
 <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
 <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt>
 <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
 <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt>
 <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
 <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt>
 <dd>Returns a {{DOMxRef("CSSPseudoElement")}} representing the child pseudo-element matched by the specified pseudo-element selector.</dd>
 <dt>{{DOMxRef("Element.querySelector()")}}</dt>
 <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd>
 <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt>
 <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd>
 <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt>
 <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd>
 <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt>
 <dd>Removes the element from the children list of its parent.</dd>
 <dt>{{DOMxRef("Element.removeAttribute()")}}</dt>
 <dd>Removes the named attribute from the current node.</dd>
 <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt>
 <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
 <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt>
 <dd>Removes the node representation of the named attribute from the current node.</dd>
 <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt>
 <dd>Removes an event listener from the element.</dd>
 <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
 <dd>Asynchronously asks the browser to make the element full-screen.</dd>
 <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>
 <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
</dl>

<dl>
 <dt>{{DOMxRef("Element.scroll()")}}</dt>
 <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
 <dt>{{DOMxRef("Element.scrollBy()")}}</dt>
 <dd>Scrolls an element by the given amount.</dd>
 <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt>
 <dd>Scrolls the page until the element gets into the view.</dd>
 <dt>{{DOMxRef("Element.scrollTo()")}}</dt>
 <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
 <dt>{{DOMxRef("Element.setAttribute()")}}</dt>
 <dd>Sets the value of a named attribute of the current node.</dd>
 <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt>
 <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
 <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt>
 <dd>Sets the node representation of the named attribute from the current node.</dd>
 <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
 <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd>
 <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt>
 <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
 <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt>
 <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd>
 <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
 <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd>
</dl>

<h2 id="事件">事件</h2>

<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>

<dl>
 <dt>{{DOMxRef("Element/cancel_event", "cancel")}}</dt>
 <dd>Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd>
 <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt>
 <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onerror", "onerror")}} property.</dd>
 <dt>{{DOMxRef("Element/scroll_event", "scroll")}}</dt>
 <dd>Fired when the document view or an element has been scrolled.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd>
 <dt>{{DOMxRef("Element/select_event", "select")}}</dt>
 <dd>Fired when some text has been selected.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd>
 <dt>{{DOMxRef("Element/show_event", "show")}}</dt>
 <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute. {{deprecated_inline}}<br>
 Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd>
 <dt>{{DOMxRef("Element/wheel_event","wheel")}}</dt>
 <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br>
 Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.</dd>
</dl>

<h3 id="剪贴板事件">剪贴板事件</h3>

<dl>
 <dt>{{DOMxRef("Element/copy_event", "copy")}}</dt>
 <dd>Fired when the user initiates a copy action through the browser's user interface.<br>
 Also available via the {{DOMxRef("HTMLElement/oncopy", "oncopy")}} property.</dd>
 <dt>{{DOMxRef("Element/cut_event", "cut")}}</dt>
 <dd>Fired when the user initiates a cut action through the browser's user interface.<br>
 Also available via the {{DOMxRef("HTMLElement/oncut", "oncut")}} property.</dd>
 <dt>{{DOMxRef("Element/paste_event", "paste")}}</dt>
 <dd>Fired when the user initiates a paste action through the browser's user interface.<br>
 Also available via the {{DOMxRef("HTMLElement/onpaste", "onpaste")}} property.</dd>
</dl>

<h3 id="Composition_events">Composition events</h3>

<dl>
 <dt>{{DOMxRef("Element/compositionend_event", "compositionend")}}</dt>
 <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd>
 <dt>{{DOMxRef("Element/compositionstart_event", "compositionstart")}}</dt>
 <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd>
 <dt>{{DOMxRef("Element/compositionupdate_event", "compositionupdate")}}</dt>
 <dd>Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.</dd>
</dl>

<h3 id="Focus_events">Focus events</h3>

<dl>
 <dt>{{DOMxRef("Element/blur_event", "blur")}}</dt>
 <dd>Fired when an element has lost focus.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onblur", "onblur")}} property.</dd>
 <dt>{{DOMxRef("Element/focus_event", "focus")}}</dt>
 <dd>Fired when an element has gained focus.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onfocus", "onfocus")}} property</dd>
 <dt>{{DOMxRef("Element/focusin_event", "focusin")}}</dt>
 <dd>Fired when an element is about to gain focus.</dd>
 <dt>{{DOMxRef("Element/focusout_event", "focusout")}}</dt>
 <dd>Fired when an element is about to lose focus.</dd>
</dl>

<h3 id="Fullscreen_events">Fullscreen events</h3>

<dl>
 <dt><code>{{DOMxRef("Element/fullscreenchange_event", "fullscreenchange")}}</code></dt>
 <dd>Sent to an {{DOMxRef("Element")}} when it transitions into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br>
 Also available via the {{DOMxRef("Element.onfullscreenchange", "onfullscreenchange")}} property.</dd>
 <dt><code>{{DOMxRef("Element/fullscreenerror_event", "fullscreenerror")}}</code></dt>
 <dd>Sent to an <code>Element</code> if an error occurs while attempting to switch it into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br>
 Also available via the {{DOMxRef("Element.onfullscreenerror", "onfullscreenerror")}} property.</dd>
</dl>

<h3 id="键盘事件">键盘事件</h3>

<dl>
 <dt><code>{{DOMxRef("Element/keydown_event", "keydown")}}</code></dt>
 <dd>Fired when a key is pressed.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onkeydown", "onkeydown")}} property.</dd>
 <dt><code>{{DOMxRef("Element/keypress_event", "keypress")}}</code></dt>
 <dd>Fired when a key that produces a character value is pressed down. {{deprecated_inline}}<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onkeypress", "onkeypress")}} property.</dd>
 <dt><code>{{DOMxRef("Element/keyup_event", "keyup")}}</code></dt>
 <dd>Fired when a key is released.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onkeyup", "onkeyup")}} property.</dd>
</dl>

<h3 id="鼠标事件">鼠标事件</h3>

<dl>
 <dt>{{DOMxRef("Element/auxclick_event", "auxclick")}}</dt>
 <dd>Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd>
 <dt>{{DOMxRef("Element/click_event", "click")}}</dt>
 <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onclick", "onclick")}} property.</dd>
 <dt>{{DOMxRef("Element/contextmenu_event", "contextmenu")}}</dt>
 <dd>Fired when the user attempts to open a context menu.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd>
 <dt>{{DOMxRef("Element/dblclick_event", "dblclick")}}</dt>
 <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd>
 <dt>{{DOMxRef("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
 <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.</dd>
 <dt>{{DOMxRef("Element/mousedown_event", "mousedown")}}</dt>
 <dd>Fired when a pointing device button is pressed on an element.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd>
 <dt>{{DOMxRef("Element/mouseenter_event", "mouseenter")}}</dt>
 <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd>
 <dt>{{DOMxRef("Element/mouseleave_event", "mouseleave")}}</dt>
 <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd>
 <dt>{{DOMxRef("Element/mousemove_event", "mousemove")}}</dt>
 <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd>
 <dt>{{DOMxRef("Element/mouseout_event", "mouseout")}}</dt>
 <dd>Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd>
 <dt>{{DOMxRef("Element/mouseover_event", "mouseover")}}</dt>
 <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd>
 <dt>{{DOMxRef("Element/mouseup_event", "mouseup")}}</dt>
 <dd>Fired when a pointing device button is released on an element.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd>
 <dt>{{DOMxRef("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
 <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd>
 <dt>{{DOMxRef("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
 <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd>
 <dt>{{DOMxRef("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
 <dd>Fired before the {{DOMxRef("Element/mousedown_event", "mousedown")}} event.</dd>
 <dt>{{DOMxRef("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
 <dd>Fired after the {{DOMxRef("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd>
</dl>

<h3 id="Touch_events">Touch events</h3>

<dl>
 <dt>{{DOMxRef("Element/touchcancel_event", "touchcancel")}}</dt>
 <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd>
 <dt>{{DOMxRef("Element/touchend_event", "touchend")}}</dt>
 <dd>Fired when one or more touch points are removed from the touch surface.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd>
 <dt>{{DOMxRef("Element/touchmove_event", "touchmove")}}</dt>
 <dd>Fired when one or more touch points are moved along the touch surface.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd>
 <dt>{{DOMxRef("Element/touchstart_event", "touchstart")}}</dt>
 <dd>Fired when one or more touch points are placed on the touch surface.<br>
 Also available via the {{DOMxRef("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd>
</dl>

<dl>
 <dt></dt>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范文档</th>
   <th scope="col">状态</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}</td>
   <td>{{Spec2("CSS4 Pseudo-Elements")}}</td>
   <td>Added the <code>pseudo()</code> method.</td>
  </tr>
  <tr>
   <td>{{SpecName("Web Animations", '', '')}}</td>
   <td>{{Spec2("Web Animations")}}</td>
   <td>Added the <code>getAnimations()</code> method.</td>
  </tr>
  <tr>
   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
   <td>{{Spec2('Undo Manager')}}</td>
   <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Events 2')}}</td>
   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Events')}}</td>
   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
   <td>{{Spec2('Selectors API Level 1')}}</td>
   <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Lock')}}</td>
   <td>Added the <code>requestPointerLock()</code> method.</td>
  </tr>
  <tr>
   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
   <td>{{Spec2('Fullscreen')}}</td>
   <td>Added the <code>requestFullscreen()</code> method.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('DOM Parsing')}}</td>
   <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br>
    Added the following method: <code>insertAdjacentHTML()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
    Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
   <td>{{Spec2('Element Traversal')}}</td>
   <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br>
    Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
    Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br>
    Removed the <code>schemaTypeInfo</code> property.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>Added the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>. These methods were never implemented and have been removed in later specifications.<br>
    Added the <code>schemaTypeInfo</code> property. This property was never implemented and has been removed in later specifications.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.Element")}}</p>