번역 작업 진행중입니다.

ElementDocument 안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 Element를 상속합니다. 예를 들어 HTMLElement 인터페이스는 HTML 요소의 기반 인터페이스이고 SVGElement 인터페이스는 모든 SVG 요소의 기초입니다.

XUL의 XULElement처럼 웹 플랫폼 밖에서도 Element를 구현합니다.

속성

부모 인터페이스인 Node와 그 부모인 EventTarget의 속성을 상속합니다. ParentNode, ChildNode, NonDocumentTypeChildNodeAnimatable의 속성을 구현합니다.

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.

참고: Firefox 3.5 이하에서는 HTML 요소가 네임스페이스에 속해있지 않습니다. 이후 버전에서는 HTML과 XML 트리 모두에서 http://www.w3.org/1999/xhtml 네임스페이스를 사용합니다.

NonDocumentTypeChildNode.nextElementSibling Read only
Is an Element, the element immediately following the given one in the tree, or null 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, or null if no prefix is specified.
NonDocumentTypeChildNode.previousElementSibling Read only
Is a Element, the element immediately preceding the given one in the tree, or null 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
A Number representing number of pixels the top of the document is scrolled vertically.
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.shadowRootRead only
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
Element.openOrClosedShadowRoot Read only
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
Element.slot
Returns the name of the shadow DOM slot the element is inserted in.
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 명세는 namespaceURIlocalNameprefixNode에 정의했고, DOM4에서 Element로 옮겨졌습니다.

이 변경점은 Chrome 46.0과 Firefox 48.0부터 구현됐습니다.

Slotable 속성

Element 인터페이스는 Slotable 믹스인에 정의된 다음 속성을 가집니다.

Slotable.assignedSlotRead only
Returns a HTMLSlotElement representing the <slot> the node is inserted in.

이벤트 핸들러

Element.ongotpointercapture
Returns the event handler for the gotpointercapture event type.
Element.onlostpointercapture
Returns the event handler for the lostpointercapture event type.

메서드

부모 인터페이스인 Node와 그 부모인 EventTarget의 메서드를 상속합니다. ParentNode, ChildNode, NonDocumentTypeChildNodeAnimatable의 메서드를 구현합니다.

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 which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
Element.createShadowRoot()  
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a ShadowRoot.
Element.computedStyleMap()
Returns a StylePropertyMapReadOnly interface which provides a read-only representation of a CSS declaration block that is an alternative to CSSStyleDeclaration.
EventTarget.dispatchEvent()
Dispatches an event to this node in the DOM and returns a Boolean that indicates whether no handler canceled the event.
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()
Returns an array of attribute names from the current element.
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()
Returns the size of an element and its position relative to the viewport.
Element.getClientRects()
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
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()
Sets 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.
Element.toggleAttribute()
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.

 

명세

Specification Status Comment
Web Animations Working Draft Added the getAnimationPlayers() method.
UndoManager and DOMTransaction
The definition of 'Element' in that specification.
Editor's Draft Added the undoScope and undoManager properties.
Pointer Events
The definition of 'Element' in that specification.
Recommendation 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() form the Node interface to this one.
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.

브라우저 호환성

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1 Yes Yes Yes
accessKey No1 ? ? ? No1 ?
animate36 No48 No23 ?
attachShadow53 No2

63

593 4

No4010
attributes26 No22 ? ? ?
classList8

16

125

3.610 Yes5.1
className Yes Yes Yes Yes Yes Yes
clientHeight Yes Yes Yes6 Yes Yes
clientLeft Yes ? ? ? Yes ?
clientTop Yes ? ? ? Yes ?
clientWidth Yes Yes Yes6 Yes Yes
closest411535 No289
computedStyleMap66 No No No53 No
createShadowRoot

356

25 —? webkit

No

59 — 617

29 — 598

No

229

15 —? webkit

No
currentStyle No No No6 No No
getAttribute29 Yes23 Yes Yes6
getAttributeNS Yes Yes Yes10 Yes Yes Yes
getAttributeNames61 ?45 No489
getAttributeNode Yes ? ? ? Yes ?
getAttributeNodeNS Yes ? ? ? Yes ?
getBoundingClientRect Yes ? ? ? Yes ?
getClientRects Yes ? ? ? Yes ?
getElementsByClassName Yes ? Yes119 Yes Yes12
getElementsByTagName113 Yes Yes115.5 Yes13 Yes13
getElementsByTagNameNS113 Yes Yes14 155.5 Yes13 Yes13
hasAttribute Yes Yes Yes Yes Yes Yes
hasAttributeNS Yes ? ? ? Yes ?
hasAttributes Yes ? Yes169 Yes Yes
id Yes Yes Yes Yes Yes Yes
innerHTML112147 Yes
insertAdjacentElement11248 Yes Yes Yes
insertAdjacentHTML112841774
insertAdjacentText11248 Yes Yes Yes
localName4618 ?4818 ? Yes ?
matches

34

Yes19

Yes

Yes19

Yes20

34

4419

3.621 22 23

920

21

1519

11.5 — 1524

7

519

name No ? ? ? No ?
namespaceURI4618 ?4818 ? Yes18 ?
openOrClosedShadowRoot No No6325 No No No
ongotpointercapture55 ?

59

4126

11

10 ms

42 No
onlostpointercapture55 ?

59

4126

11

10 ms

42 No
outerHTML Yes Yes11471.3
prefix4618 Yes4818 ? Yes ?
querySelector1123.5

9

827

Yes Yes
querySelectorAll1 Yes3.5

9

828

103.2
releasePointerCapture55 ?

59

4126

11

10 ms

42 No
removeAttribute Yes ? ? ? Yes ?
removeAttributeNS Yes ? ? ? Yes ?
removeAttributeNode Yes ? ? ? Yes ?
requestFullscreen Yes ? ? ? Yes ?
requestPointerLock ? ? ? ? ? ?
runtimeStyle No No No6 No No
scrollIntoView Yes ? ? ? Yes ?
scrollIntoViewIfNeeded Yes ? ? ? Yes ?
scrollHeight4 Yes

21

3 — 2129

8 Yes4
scrollLeft Yes Yes Yes Yes Yes Yes
scrollLeftMax No No16 No No No
scrollTop Yes Yes Yes Yes Yes Yes
scrollTopMax No No16 No No No
scrollWidth Yes ? ? ? Yes ?
setAttribute Yes ? ? ? Yes ?
setAttributeNS Yes ? ? ? Yes ?
setAttributeNode Yes ? ? ? Yes ?
setAttributeNodeNS ? ? ? ? ? ?
setCapture No ? ? ? No ?
setPointerCapture55 ?

59

4126

11

10 ms

42 No
shadowRoot53 No2

63

593 4

No40 Yes
slot53 ? ? ? ? ?
tabStop43 ? ? ? ? ?
tagName Yes Yes Yes Yes Yes Yes
toggleAttribute69 ?63 ?56 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes18 Yes4 Yes Yes Yes
accessKey No1 No1 ? ? No1 ? ?
animate3636 ?4823 ? ?
attachShadow5353 No2

63

593 4

4010 ?
attributes Yes Yes ?22 ? ? ?
classList Yes Yes12 Yes ?5 ?
className Yes Yes Yes Yes Yes Yes Yes
clientHeight Yes Yes Yes Yes Yes Yes Yes
clientLeft Yes Yes ? ? Yes ? ?
clientTop Yes Yes ? ? Yes ? ?
clientWidth Yes Yes Yes Yes Yes Yes Yes
closest ? ? ?35 ?9 ?
computedStyleMap6666 No No53 No ?
createShadowRoot

356

25 —? webkit

356

25 —? webkit

No

59 — 617

29 — 598

229

14 —? webkit

No

5.0

4.0 —? webkit

currentStyle No No No No No No No
getAttribute ? ? ?23 ? ? ?
getAttributeNS Yes Yes Yes Yes Yes Yes Yes
getAttributeNames6161 ?4548 ? ?
getAttributeNode Yes Yes ? ? Yes ? ?
getAttributeNodeNS Yes Yes ? ? Yes ? ?
getBoundingClientRect Yes Yes ? ? Yes ? ?
getClientRects Yes Yes ? ? Yes ? ?
getElementsByClassName ? ? ? ? ? ? ?
getElementsByTagName Yes ? Yes Yes11 Yes Yes Yes
getElementsByTagNameNS Yes ? Yes Yes14 15 Yes Yes ?
hasAttribute Yes Yes Yes Yes Yes Yes Yes
hasAttributeNS Yes Yes ? ? Yes ? ?
hasAttributes ? ? ? ? ? ? ?
id Yes Yes Yes Yes Yes Yes Yes
innerHTML Yes18124 Yes11.0
insertAdjacentElement2.3181248 Yes Yes Yes
insertAdjacentHTML2.318128 Yes4 Yes
insertAdjacentText2.3181248 Yes Yes Yes
localName ? ? ?4818 ? ? ?
matches

Yes

Yes19

34

Yes19

Yes

Yes19

Yes20

34

4419

422 23

21

1519

11.5 — 1524

8

Yes19

Yes

Yes19

name No No ? ? No ? ?
namespaceURI ? ? ? Yes ? ? ?
openOrClosedShadowRoot No No No6325 No No No
ongotpointercapture5555 ?

No

4126

42 No ?
onlostpointercapture5555 ?

No

4126

42 No ?
outerHTML Yes Yes Yes Yes Yes Yes Yes
prefix ? ? Yes4818 ? ? ?
querySelector Yes Yes Yes Yes Yes Yes Yes
querySelectorAll Yes Yes Yes Yes ? Yes Yes
releasePointerCapture5555 ?

No

4126

42 No ?
removeAttribute Yes Yes ? ? Yes ? ?
removeAttributeNS Yes Yes ? ? Yes ? ?
removeAttributeNode Yes Yes ? ? Yes ? ?
requestFullscreen Yes Yes ? ? Yes ? ?
requestPointerLock ? ? ? ? ? ? ?
runtimeStyle No No No No No No No
scrollIntoView Yes Yes ? ? Yes ? ?
scrollIntoViewIfNeeded Yes Yes ? ? Yes ? ?
scrollHeight Yes Yes Yes Yes Yes4 Yes
scrollLeft Yes Yes Yes Yes Yes Yes Yes
scrollLeftMax No No No16 No No No
scrollTop Yes Yes Yes Yes Yes Yes Yes
scrollTopMax No No No16 No No No
scrollWidth Yes Yes ? ? Yes ? ?
setAttribute Yes Yes ? ? Yes ? ?
setAttributeNS Yes Yes ? ? Yes ? ?
setAttributeNode Yes Yes ? ? Yes ? ?
setAttributeNodeNS ? ? ? ? ? ? ?
setCapture No No ? ? No ? ?
setPointerCapture5555 ?

No

4126

42 No ?
shadowRoot5353 No2

63

593 4

40 Yes ?
slot5353 ? ? ? ? ?
tabStop ?43 ? ? ? ? ?
tagName ? ? Yes Yes ? ? ?
toggleAttribute6969 ?6356 ? ?

1. Implemented on HTMLElement.

2. Under consideration

3. See bug 1205323

4. From version 59: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

5. Not supported for SVG elements.

6. In Chrome 45, the ability to have multiple shadow roots was deprecated.

7. From version 59 until version 61 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

8. From version 29 until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

9. In Opera 32, the ability to have multiple shadow roots was deprecated.

10. Starting in Firefox 13, null is always returned instead of the empty string, as per the DOM4 specification. Previously, there were cases in which an empty string could be returned.

11. Prior to Firefox 19, this method was returning a NodeList; it was then changed to reflect the change in the spec.

12. Safari on iOS 8 and OS X 10.10 returns a NodeList.

13. Initially, this method was returning a NodeList; it was then changed to reflect the spec change.

14. The behavior of element.getElementsByTagNameNS changed between Firefox 3.5 and Firefox 3.6. In Firefox 3.5 and before, this function would automatically case-fold any queries so that a search for "foo" would match "Foo" or "foo". In Firefox 3.6 and later this function is now case-sensitive so that a query for "foo" will only match "foo" and not "Foo". For more background on this, please see the comment from Henri Sivonen about the change. You can also look at the relevant part of the standard, which states which parts of the API are case-sensitive and which parts aren't.

15. Prior to Firefox 19, this method was returning a NodeList; it was then changed to reflects the spec change.

16. [1] Before Firefox 35, it was implemented on the Node interface.

17. Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.

18. This API was previously available on theNode API.

19. Supported as webkitMatchesSelector.

20. Supported as msMatchesSelector.

21. Prior to Firefox 4, invalid selector strings caused false to be returned instead of throwing an exception.

22. See bug 1119718 for removal.

23. Supported as mozMatchesSelector.

24. Supported as oMatchesSelector.

25. Available only to WebExtensions.

26. From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

27. querySelector() is supported, but only for CSS 2.1 selectors.

28. querySelectorAll() is supported, but only for CSS 2.1 selectors.

29. In Firefox versions prior to 21, when an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property. This can mean either the content is too short to require a scrollbar or that the element has a CSS style overflow value of visible (non-scrollable).

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, kewlbear, fscholz, moolow, khalid32, junghyun_han
최종 변경자: urty5656,