From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/he/web/api/element/index.html | 331 ++++++++++++++++++++++++++++++++++++ 1 file changed, 331 insertions(+) create mode 100644 files/he/web/api/element/index.html (limited to 'files/he/web/api/element/index.html') diff --git a/files/he/web/api/element/index.html b/files/he/web/api/element/index.html new file mode 100644 index 0000000000..a0d4f8ee21 --- /dev/null +++ b/files/he/web/api/element/index.html @@ -0,0 +1,331 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web API +translation_of: Web/API/Element +--- +
{{APIRef("DOM")}}
+ +

Element is the most general base class from which all objects in a {{DOMxRef("Document")}} inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the {{DOMxRef("HTMLElement")}} interface is the base interface for HTML elements, while the {{DOMxRef("SVGElement")}} interface is the basis for all SVG elements. Most functionality is specified further down the class hierarchy.

+ +

Languages outside the realm of the Web platform, like XUL through the XULElement interface, also implement Element.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.
+
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.
+
{{DOMxRef("Element.className")}}
+
Is a {{DOMxRef("DOMString")}} representing the class of the element.
+
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner height of the element.
+
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the left border of the element.
+
{{DOMxRef("Element.clientTop")}}  {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the top border of the element.
+
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner width of the element.
+
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.
+
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. 
+
{{DOMxRef("Element.id")}}
+
Is a {{DOMxRef("DOMString")}} representing the id of the element.
+
{{DOMxRef("Element.innerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.
+
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.
+
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
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. {{ gecko_minversion_inline("1.9.2")}}

+
+
+
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
+
Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{DOMxRef("Element.outerHTML")}}
+
Is a {{DOMxRef("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.
+
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
+
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
+
Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{DOMxRef("Element.scrollHeight")}}  {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{DOMxRef("Element.scrollLeft")}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{DOMxRef("Element.scrollTop")}}
+
A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.
+
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
+
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
+
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+
Returns the name of the shadow DOM slot the element is inserted in.
+
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
+
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+
Returns a {{jsxref("String")}} with the name of the tag for the given element.
+
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
+
Returns the {{DOMxRef("UndoManager")}} associated with the element.
+
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{DOMxRef("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.

+
+ +

Properties included from Slotable

+ +

The Element interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.

+ +
+
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
+
Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.
+
+ +

Event handlers

+ +
+
{{domxref("Element.onfullscreenchange")}}
+
An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is backgrounded.
+
{{domxref("Element.onfullscreenerror")}}
+
An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.
+
+ +

Obsolete event handlers

+ +
+
{{DOMxRef("Element.onwheel")}}
+
Returns the event handling code for the {{Event("wheel")}} event. This is now implemented on {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.
+
+ +

Methods

+ +

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

+ +
+
{{DOMxRef("EventTarget.addEventListener()")}}
+
Registers an event handler to a specific event type on the element.
+
{{DOMxRef("Element.attachShadow()")}}
+
Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
+
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
+
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.
+
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+
Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.
+
{{DOMxRef("EventTarget.dispatchEvent()")}}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.
+
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+
Returns an array of Animation objects currently active on the element.
+
{{DOMxRef("Element.getAttribute()")}}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNames()")}}
+
Returns an array of attribute names from the current element.
+
{{DOMxRef("Element.getAttributeNS()")}}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getBoundingClientRect()")}}
+
Returns the size of an element and its position relative to the viewport.
+
{{DOMxRef("Element.getClientRects()")}}
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{DOMxRef("Element.getElementsByClassName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.
+
{{DOMxRef("Element.getElementsByTagName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.
+
{{DOMxRef("Element.getElementsByTagNameNS()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{DOMxRef("Element.hasAttribute()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{DOMxRef("Element.hasAttributeNS()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{DOMxRef("Element.hasAttributes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
+
{{DOMxRef("Element.hasPointerCapture()")}}
+
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+
{{DOMxRef("Element.insertAdjacentElement()")}}
+
Inserts a given element node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.insertAdjacentHTML()")}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{DOMxRef("Element.insertAdjacentText()")}}
+
Inserts a given text node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{DOMxRef("Element.querySelector()")}}
+
Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.
+
{{DOMxRef("Element.querySelectorAll()")}}
+
Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.
+
{{DOMxRef("Element.releasePointerCapture()")}}
+
Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.
+
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
+
Removes the element from the children list of its parent.
+
{{DOMxRef("Element.removeAttribute()")}}
+
Removes the named attribute from the current node.
+
{{DOMxRef("Element.removeAttributeNS()")}}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{DOMxRef("EventTarget.removeEventListener()")}}
+
Removes an event listener from the element.
+
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{domxref("Element.scroll()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{domxref("Element.scrollBy()")}}
+
Scrolls an element by the given amount.
+
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+
Scrolls the page until the element gets into the view.
+
{{domxref("Element.scrollTo()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{DOMxRef("Element.setAttribute()")}}
+
Sets the value of a named attribute of the current node.
+
{{DOMxRef("Element.setAttributeNS()")}}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Sets the node representation of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{DOMxRef("Element.setPointerCapture()")}}
+
Designates a specific element as the capture target of future pointer events.
+
{{DOMxRef("Element.toggleAttribute()")}}
+
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Added the getAnimations() method.
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Added the undoScope and undoManager properties.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Added the following methods: querySelector() and querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Added the requestPointerLock() method.
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Added the requestFullscreen() method.
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Added the following properties: innerHTML, and outerHTML.
+ Added the following method: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Added the following methods: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Added the following methods: closest(), insertAdjacentElement() and insertAdjacentText().
+ Moved hasAttributes() from the Node interface to this one.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}Removed the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Modified the return value of getElementsByTagName() and getElementsByTagNameNS().
+ Removed the schemaTypeInfo property.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}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.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}The normalize() method has been moved to {{DOMxRef("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Element")}}

-- cgit v1.2.3-54-g00ecf