Element
Element
는 Document
안의 모든 객체가 상속하는 제일 범용적인 기반 클래스로 공통 메서드와 속성만 가지고 있으며, 특정 요소를 더 상세하게 표현하는 클래스가 Element
를 상속합니다. 예를 들어 HTMLElement
인터페이스는 HTML 요소의 기반 인터페이스이고 SVGElement
(en-US) 인터페이스는 모든 SVG 요소의 기초입니다.
XUL의 XULElement
처럼 웹 플랫폼 밖에서도 Element
를 구현합니다.
속성
부모 인터페이스인 Node
와 그 부모인 EventTarget
의 속성을 상속합니다. ParentNode
, ChildNode
, NonDocumentTypeChildNode
(en-US)와 Animatable
의 속성을 구현합니다.
Element.attributes
읽기 전용-
HTML 요소에 할당한 속성을 담은
NamedNodeMap
(en-US) 객체를 반환합니다. Element.classList
읽기 전용-
요소의 클래스 속성 리스트를 담은
DOMTokenList
를 반환합니다. Element.className
-
요소의 클래스를 나타내는
DOMString
을 반환합니다. Element.clientHeight
읽기 전용-
요소의 안쪽 높이를 나타내는
Number
를 반환합니다. Element.clientLeft
읽기 전용-
요소의 왼쪽 테두리 너비를 나타내는
Number
를 반환합니다. Element.clientTop
(en-US) 읽기 전용-
요소의 위쪽 테두리 너비를 나타내는
Number
를 반환합니다. Element.clientWidth
읽기 전용-
요소의 안쪽 너비를 나타내는
Number
를 반환합니다. Element.computedName
읽기 전용-
요소가 노출하는 접근성 라벨을 포함한
DOMString
을 반환합니다. Element.computedRole
읽기 전용-
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
(en-US) 읽기 전용-
A
DOMString
representing the local part of the qualified name of the element. Element.namespaceURI
(en-US) 읽기 전용-
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
(en-US) 읽기 전용-
Is an
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
(en-US) 읽기 전용-
A
DOMString
representing the namespace prefix of the element, ornull
if no prefix is specified. NonDocumentTypeChildNode.previousElementSibling
(en-US) 읽기 전용-
Is a
Element
, the element immediately preceding the given one in the tree, ornull
if there is no sibling element. Element.scrollHeight
읽기 전용-
Returns a
Number
representing the scroll view height of an element. Element.scrollLeft
(en-US)-
Is a
Number
representing the left scroll offset of the element. Element.scrollLeftMax
(en-US) 비표준 읽기 전용-
Returns a
Number
representing the maximum left scroll offset possible for the element. Element.scrollTop
(en-US)-
A
Number
representing number of pixels the top of the document is scrolled vertically. Element.scrollTopMax
(en-US) 비표준 읽기 전용-
Returns a
Number
representing the maximum top scroll offset possible for the element. Element.scrollWidth
(en-US) 읽기 전용-
Returns a
Number
representing the scroll view width of the element. Element.shadowRoot
(en-US)읽기 전용-
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
Element.openOrClosedShadowRoot
(en-US) 비표준 읽기 전용-
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
Element.slot
(en-US) Experimental-
Returns the name of the shadow DOM slot the element is inserted in.
Element.tabStop
(en-US) 비표준-
Is a
Boolean
indicating if the element can receive input focus via the tab key. Element.tagName
읽기 전용-
Returns a
String
with the name of the tag for the given element. Element.undoManager
Experimental 읽기 전용-
Returns the
UndoManager
associated with the element. Element.undoScope
Experimental-
Is a
Boolean
indicating if the element is an undo scope host, or not.
참고: Note: DOM Level 3 명세는 namespaceURI
, localName
, prefix
를 Node
에 정의했고, DOM4에서 Element
로 옮겨졌습니다.이 변경점은 Chrome 46.0과 Firefox 48.0부터 구현됐습니다.
Slotable
속성
Element
인터페이스는 Slotable
(en-US) 믹스인에 정의된 다음 속성을 가집니다.
Slotable.assignedSlot
(en-US)읽기 전용-
Returns a
HTMLSlotElement
(en-US) representing the<slot>
the node is inserted in.
메서드
부모 인터페이스인 Node
와 그 부모인 EventTarget
의 메서드를 상속합니다. ParentNode
, ChildNode
, NonDocumentTypeChildNode
(en-US)와 Animatable
의 메서드를 구현합니다.
EventTarget.addEventListener()
-
Registers an event handler to a specific event type on the element.
Element.attachShadow()
(en-US)-
Attatches a shadow DOM tree to the specified element and returns a reference to its
ShadowRoot
(en-US). Element.animate()
(en-US) Experimental-
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
Element.closest()
Experimental-
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()
(en-US) 비표준 지원이 중단되었습니다-
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a
ShadowRoot
(en-US). Element.computedStyleMap()
(en-US) Experimental-
Returns a
StylePropertyMapReadOnly
(en-US) interface which provides a read-only representation of a CSS declaration block that is an alternative toCSSStyleDeclaration
(en-US). 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()
(en-US) Experimental-
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()
(en-US)-
Returns an array of attribute names from the current element.
Element.getAttributeNS()
(en-US)-
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an
Object
. 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()
(en-US)-
Returns a live
HTMLCollection
containing all descendant elements, of a particular tag name and namespace, from the current element. Element.hasAttribute()
(en-US)-
Returns a
Boolean
indicating if the element has the specified attribute or not. Element.hasAttributeNS()
(en-US)-
Returns a
Boolean
indicating if the element has the specified attribute, in the specified namespace, or not. Element.hasAttributes()
(en-US)-
Returns a
Boolean
indicating if the element has one or more HTML attributes present. Element.hasPointerCapture()
(en-US)-
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
Element.insertAdjacentElement()
(en-US)-
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()
(en-US)-
Inserts a given text node at a given position relative to the element it is invoked upon.
Element.matches()
(en-US) Experimental-
Returns a
Boolean
indicating whether or not the element would be selected by the specified selector string. Element.querySelector()
(en-US)-
Returns the first
Node
which matches the specified selector string relative to the element. Element.querySelectorAll()
(en-US)-
Returns a
NodeList
of nodes which match the specified selector string relative to the element. Element.releasePointerCapture()
(en-US)-
Releases (stops) pointer capture that was previously set for a specific
pointer event
(en-US). ChildNode.remove()
(en-US) Experimental-
Removes the element from the children list of its parent.
Element.removeAttribute()
-
Removes the named attribute from the current node.
Element.removeAttributeNS()
(en-US)-
Removes the attribute with the specified name and namespace, from the current node.
EventTarget.removeEventListener()
-
Removes an event listener from the element.
Element.requestFullscreen()
(en-US) Experimental-
Asynchronously asks the browser to make the element full-screen.
Element.requestPointerLock()
(en-US) Experimental-
Allows to asynchronously ask for the pointer to be locked on the given element.
Element.scroll()
(en-US)-
Scrolls to a particular set of coordinates inside a given element.
Element.scrollBy()
(en-US)-
Scrolls an element by the given amount.
Element.scrollIntoView()
Experimental-
Scrolls the page until the element gets into the view.
Element.scrollTo()
(en-US)-
Scrolls to a particular set of coordinates inside a given element.
Element.setAttribute()
-
Sets the value of a named attribute of the current node.
Element.setAttributeNS()
(en-US)-
Sets the value of the attribute with the specified name and namespace, from the current node.
Element.setCapture()
(en-US) 비표준-
Sets up mouse event capture, redirecting all mouse events to this element.
Element.setPointerCapture()
(en-US)-
Designates a specific element as the capture target of future pointer events (en-US).
Element.toggleAttribute()
(en-US)-
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
명세
브라우저 호환성
BCD tables only load in the browser