Element
介面表示了一個在 Document
中的物件,其描述了各類型元素的共同屬性與方法,Element
的子介面則定義了不同類型元素的具體行為並增加額外的功能。例如 HTMLElement
為所有 HTML 元素的基礎介面,而 SVGElement
則是定義所有 SVG 元素的介面。
在 Web 領域之外,如 XUL 語言也能藉由 XULElement
介面來繼承 Element
。
屬性
Inherits properties from its parent interface, Node
, and by extension that interface's parent, EventTarget
. It implements the properties of ParentNode
, ChildNode
, NonDocumentTypeChildNode
, and Animatable
.
Element.assignedSlot
Read only- Returns the
HTMLSlotElement
interface associated with the element. Element.attributes
Read only- Returns a
NamedNodeMap
object containing the assigned attributes of the corresponding HTML element. Element.classList
Read only- Returns a
DOMTokenList
containing the list of class attributes. Element.className
- Is a
DOMString
representing the class of the element. Element.clientHeight
Read only- Returns a
Number
representing the inner height of the element. Element.clientLeft
Read only- Returns a
Number
representing the width of the left border of the element. Element.clientTop
Read only- Returns a
Number
representing the width of the top border of the element. Element.clientWidth
Read only- Returns a
Number
representing the inner width of the element. Element.computedName
Read only- Returns a
DOMString
containing the label exposed to accessibility. Element.computedRole
Read only- Returns a
DOMString
containing the ARIA role that has been applied to a particular element. Element.id
- Is a
DOMString
representing the id of the element. Element.innerHTML
- Is a
DOMString
representing the markup of the element's content. Element.localName
Read only- A
DOMString
representing the local part of the qualified name of the element. Element.namespaceURI
Read only- The namespace URI of the element, or
null
if it is no namespace.Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the
http://www.w3.org/1999/xhtml
namespace in both HTML and XML trees. NonDocumentTypeChildNode.nextElementSibling
Read only- Is a
Element
, the element immediately following the given one in the tree, ornull
if there's no sibling node. Element.outerHTML
- Is a
DOMString
representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string. Element.prefix
Read only- A
DOMString
representing the namespace prefix of the element, ornull
if no prefix is specified. NonDocumentTypeChildNode.previousElementSibling
Read only- Is a
Element
, the element immediately preceding the given one in the tree, ornull
if there is no sibling element. Element.scrollHeight
Read only- Returns a
Number
representing the scroll view height of an element. Element.scrollLeft
- Is a
Number
representing the left scroll offset of the element. Element.scrollLeftMax
Read only- Returns a
Number
representing the maximum left scroll offset possible for the element. Element.scrollTop
- Is a
Number
representing the top scroll offset the an element. Element.scrollTopMax
Read only- Returns a
Number
representing the maximum top scroll offset possible for the element. Element.scrollWidth
Read only- Returns a
Number
representing the scroll view width of the element. Element.shadowRoot
Read only- Returns the youngest shadow root that is hosted by the element.
Element.slot
- Returns the name of the shadow DOM slot attatched to the element. A slot is a placeholder inside a web component that users can fill with their own markup.
Element.tabStop
- Is a
Boolean
indicating if the element can receive input focus via the tab key. Element.tagName
Read only- Returns a
String
with the name of the tag for the given element. Element.undoManager
Read only- Returns the
UndoManager
associated with the element. Element.undoScope
- Is a
Boolean
indicating if the element is an undo scope host, or not.
Note: DOM Level 3 defined namespaceURI
, localName
and prefix
on the Node
interface. In DOM4 they were moved to Element
.
This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.
事件處理器
Element.ongotpointercapture
- Returns the event handler for the
gotpointercapture
event type. Element.onlostpointercapture
- Returns the event handler for the
lostpointercapture
event type. Element.onwheel
- Returns the event handling code for the
wheel
event.
方法
Inherits methods from its parents Node
, and its own parent, EventTarget
, and implements those of ParentNode
, ChildNode
, NonDocumentTypeChildNode
, and Animatable
.
EventTarget.addEventListener()
- Registers an event handler to a specific event type on the element.
Element.attachShadow()
- Attatches a shadow DOM tree to the specified element and returns a reference to its
ShadowRoot
. Element.animate()
- A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
Element.closest()
- Returns the
Element
, descendant of this element (or this element itself), that is the closest ancestor of the elements selected by the selectors given in parameter. Element.createShadowRoot()
- Creates a shadow DOM on on the element, turning it into a shadow host. Returns a
ShadowRoot
. EventTarget.dispatchEvent()
- Dispatches an event to this node in the DOM and returns a
Boolean
that indicates that at least one handler has not canceled it. Element.find()
- ...
Element.findAll()
- ...
Element.getAnimations()
- Returns an array of Animation objects currently active on the element.
Element.getAttribute()
- Retrieves the value of the named attribute from the current node and returns it as an
Object
. Element.getAttributeNames()
Element.getAttributeNS()
- Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an
Object
. Element.getAttributeNode()
- Retrieves the node representation of the named attribute from the current node and returns it as an
Attr
. Element.getAttributeNodeNS()
- Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an
Attr
. Element.getBoundingClientRect()
- ...
Element.getClientRects()
- Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
Element.getDestinationInsertionPoints()
- …
Element.getElementsByClassName()
- Returns a live
HTMLCollection
that contains all descendants of the current element that possess the list of classes given in the parameter. Element.getElementsByTagName()
- Returns a live
HTMLCollection
containing all descendant elements, of a particular tag name, from the current element. Element.getElementsByTagNameNS()
- Returns a live
HTMLCollection
containing all descendant elements, of a particular tag name and namespace, from the current element. Element.hasAttribute()
- Returns a
Boolean
indicating if the element has the specified attribute or not. Element.hasAttributeNS()
- Returns a
Boolean
indicating if the element has the specified attribute, in the specified namespace, or not. Element.hasAttributes()
- Returns a
Boolean
indicating if the element has one or more HTML attributes present. Element.insertAdjacentElement
- Inserts a given element node at a given position relative to the element it is invoked upon.
Element.insertAdjacentHTML
- Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
Element.insertAdjacentText
- Inserts a given text node at a given position relative to the element it is invoked upon.
Element.matches()
- Returns a
Boolean
indicating whether or not the element would be selected by the specified selector string. Element.querySelector()
- Returns the first
Node
which matches the specified selector string relative to the element. Element.querySelectorAll
- Returns a
NodeList
of nodes which match the specified selector string relative to the element. Element.releasePointerCapture
- Releases (stops) pointer capture that was previously set for a specific
pointer event
. ChildNode.remove()
- Removes the element from the children list of its parent.
Element.removeAttribute()
- Removes the named attribute from the current node.
Element.removeAttributeNS()
- Removes the attribute with the specified name and namespace, from the current node.
Element.removeAttributeNode()
- Removes the node representation of the named attribute from the current node.
EventTarget.removeEventListener()
- Removes an event listener from the element.
Element.requestFullscreen()
- Asynchronously asks the browser to make the element full-screen.
Element.requestPointerLock()
- Allows to asynchronously ask for the pointer to be locked on the given element.
Element.scrollIntoView()
- Scrolls the page until the element gets into the view.
Element.setAttribute()
- Sets the value of a named attribute of the current node.
Element.setAttributeNS()
- Sets the value of the attribute with the specified name and namespace, from the current node.
Element.setAttributeNode()
- Sets the node representation of the named attribute from the current node.
Element.setAttributeNodeNS()
- Setw the node representation of the attribute with the specified name and namespace, from the current node.
Element.setCapture()
- Sets up mouse event capture, redirecting all mouse events to this element.
Element.setPointerCapture()
- Designates a specific element as the capture target of future
pointer events
.
規範
Specification | Status | Comment |
---|---|---|
Shadow DOM | Obsolete | |
Web Animations | Working Draft | Added the getAnimations() method. |
UndoManager and DOMTransaction The definition of 'Element' in that specification. |
Editor's Draft | Added the undoScope and undoManager properties. |
Pointer Events – Level 2 The definition of 'Element' in that specification. |
Recommendation | Added the following event handlers: ongotpointercapture and onlostpointercapture .Added the following methods: setPointerCapture() and releasePointerCapture() . |
Pointer Events The definition of 'Element' in that specification. |
Obsolete | Added the following event handlers: ongotpointercapture and onlostpointercapture .Added the following methods: setPointerCapture() and releasePointerCapture() . |
Selectors API Level 2 The definition of 'Element' in that specification. |
Obsolete | Added the following methods: matches() (implemented as mozMatchesSelector() ), find() , findAll() . |
Selectors API Level 1 The definition of 'Element' in that specification. |
Obsolete | Added the following methods: querySelector() and querySelectorAll() . |
Pointer Lock The definition of 'Element' in that specification. |
Candidate Recommendation | Added the requestPointerLock() method. |
Fullscreen API The definition of 'Element' in that specification. |
Living Standard | Added the requestFullscreen() method. |
DOM Parsing and Serialization The definition of 'Element' in that specification. |
Working Draft | Added the following properties: innerHTML , and outerHTML .Added the following method: insertAdjacentHTML() . |
CSS Object Model (CSSOM) View Module The definition of 'Element' in that specification. |
Working Draft | Added the following properties: scrollTop , scrollLeft , scrollWidth , scrollHeight , clientTop , clientLeft , clientWidth , and clientHeight .Added the following methods: getClientRects() , getBoundingClientRect() , and scrollIntoView() . |
Element Traversal Specification The definition of 'Element' in that specification. |
Obsolete | Added inheritance of the ElementTraversal interface. |
DOM The definition of 'Element' in that specification. |
Living Standard | Removed the following methods: closest() , setIdAttribute() , setIdAttributeNS() , and setIdAttributeNode() .Removed the schemaTypeInfo property.Modified the return value of getElementsByTag() and getElementsByTagNS() .Moved hasAttributes() from the Node interface to this one.Inserted insertAdjacentElement() and insertAdjacentText() . |
Document Object Model (DOM) Level 3 Core Specification The definition of 'Element' in that specification. |
Obsolete | Added the following methods: setIdAttribute() , setIdAttributeNS() , and setIdAttributeNode() . These methods were never implemented and have been removed in later specifications.Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications. |
Document Object Model (DOM) Level 2 Core Specification The definition of 'Element' in that specification. |
Obsolete | The normalize() method has been moved to Node . |
Document Object Model (DOM) Level 1 Specification The definition of 'Element' in that specification. |
Obsolete | Initial definition. |
瀏覽器相容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | 1.0 |
children |
(Yes) | (Yes) | 3.0 (1.9) | 7.0 with a significant bug [1] 9.0 according to the spec |
(Yes) | No support |
childElementCount , nextElementSibling , previousElementSibling |
(Yes) | (Yes) | 3.5 (1.9.1) | 9.0 | (Yes) | (Yes) |
firstElementChild , lastElementChild |
(Yes) | (Yes) | 3.0 (1.9) | 9.0 | (Yes) | (Yes) |
classList |
(Yes) | (Yes) | 3.6 (1.9.2) | (Yes) | (Yes) | |
outerHTML |
(Yes) | (Yes) | 11 (11) | (Yes) | (Yes) | (Yes) |
clientLeft , clientTop |
(Yes) | (Yes) | 3.5 (1.9.1) | (Yes) | (Yes) | (Yes) |
getBoundingClientRect() , getClientRects() |
(Yes) | (Yes) | 3.0 (1.9) | (Yes) | (Yes) | (Yes) |
querySelector() , querySelectorAll() |
1.0 | (Yes) | 3.5 (1.9.1) | 8.0 | 10.0 | 3.2 (525.3) |
insertAdjacentHTML() |
1.0 | (Yes) | 8 (8) | 4.0 | 7.0 | 4.0 (527) |
setCapture() |
No support | No support | 4.0 (2) | No support | No support | No support |
oncopy , oncut , onpaste |
No support | No support | 3.0 (1.9) | (Yes) | No support | |
onwheel |
No support | (Yes) | 17 (17) | No support | No support | No support |
ongotpointercapture , onlostpointercapture , setPointerCapture() , and releasePointerCapture() |
52.0 [4] | (Yes) | (Yes) [3] | 10.0 | No support | No support |
matches() |
(Yes) with the non-standard name webkitMatchesSelector |
(Yes) webkit ms | 3.6 (1.9.2) with the non-standard name mozMatchesSelector 34 (34) with the standard name |
9.0 with the non-standard name msMatchesSelector |
11.5 with the non-standard name oMatchesSelector 15.0 with the non-standard name webkitMatchesSelector |
5.0 with the non-standard name webkitMatchesSelector |
find() and findAll() |
No support | No support | No support | No support | No support | No support |
requestPointerLock() |
16.0 webkit, behind an about:flags 22.0 webkit (with special cases, progressively lifted see [2]) |
(Yes) | 14 (14)moz | No support | No support | No support |
requestFullscreen() |
14.0 webkit | (Yes) | 10 (10) moz | 11.0 ms | 12.10 15.0 webkit |
5.1 webkit |
undoManager and undoScope |
No support | No support | (Yes) (behind the dom.undo_manager.enabled pref) |
No support | No support | No support |
attributes |
? | No support | 22 (22) Before this it was available via the Node interface that any element inherits. |
? | ? | ? |
scrollTopMax() and scrollLeftMax() |
No support | No support | 16 (16) | No support | No support | No support |
closest() |
? | (Yes) | 35 (35) | ? | ? | ? |
hasAttributes() |
(Yes) | No support | 1.0 (1.7 or earlier) (on the Node interface)35 (35) (on this interface |
(Yes) | (Yes) | (Yes) |
insertAdjacentElement() , insertAdjacentText() |
(Yes) | No support | 48.0 (48.0) | ? | (Yes) | (Yes) |
assignedSlot , attatchShadow , shadowRoot , and slot |
53 | No support | ? | ? | ? | ? |
computedRole and computedName |
41[4] | ? | ? | ? | 28[4] | ? |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1) | (Yes) | (Yes) | 1.0 | ||
scrollTopMax() and scrollLeftMax() |
No support | No support | 16.0 (16) | No support | No support | No support | ||
closest() |
? | (Yes) | 35.0 (35) | ? | ? | ? | ||
hasAttributes() |
(Yes) | No support | 1.0 (1.0) (on the Node interface)35.0 (35) (on this interface |
(Yes) | (Yes) | (Yes) | ||
insertAdjacentElement() , insertAdjacentText() |
(Yes) | (Yes) | 48.0 (48.0) | ? | (Yes) | (Yes) | ||
assignedSlot , attatchShadow , shadowRoot , and slot |
No support | 53.0 | No support | ? | ? | ? | ? | 53 |
computedRole and computedName |
No support | No support | ? | ? | ? | 28[4] | ? | No support |
[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.
[2] Chrome 16 allowed webkitRequestPointerLock()
only in fullscreen; Chrome 21 for trusted web site (permission asked); Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed <iframe>
if the non-standard value webkit-allow-pointer-lock
is set to the sandbox
attribute.
[3] Implementation withdrawn. See bug 1166347.
[4] Behind a flag.