Element

Inserts a set of Node or DOMString objects in the children list of the Element's parent, just after the Element. DOMString objects are inserted as equivalent Text nodes.

Inserts a set of Node objects or DOMString objects after the last child of the Element. DOMString objects are inserted as equivalent Text nodes.

Differences from Node.appendChild():

• Element.append() allows you to also append DOMString objects, whereas Node.appendChild() only accepts Node objects.
• Element.append() has no return value, whereas Node.appendChild() returns the appended Node object.
• Element.append() can append several nodes and strings, whereas Node.appendChild() can only append one node.

Attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot.

Inserts a set of Node or DOMString objects in the children list of this Element's parent, just before this Element. DOMString objects are inserted as equivalent Text nodes.

Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

The width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding. clientLeft is read-only.

The width of the top border of an element in pixels. It does not include the top margin or padding. clientTop is read-only.

clientWidth is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

getAttribute() returns the value of the named attribute on the specified element. If the named attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details.

getAttributeNS returns the string value of the attribute with the specified namespace and name. If the named attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details.

Returns the specified attribute of the specified element, as an Attr node.

Returns the Attr node for the attribute with the given namespace and name.

Returns a text rectangle object that encloses a group of text rectangles.

Returns a collection of rectangles that indicate the bounding rectangles for each box in a client.

Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

Returns a list of elements with the given tag name. The subtree underneath the specified element is searched, excluding the element itself. The returned list is live, meaning that it updates itself with the DOM tree automatically. Consequently, there is no need to call several times element.getElementsByTagName with the same element and arguments.

Returns a list of elements with the given tag name belonging to the given namespace.

hasAttribute returns a boolean value indicating whether the specified element has the specified attribute or not.

hasAttributeNS returns a boolean value indicating whether the current element has the specified attribute.

The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.

Supported by FF>8, Opera>7, Chrome>1, IE>4, Safari>4

The matches() method of the Element interface returns true if the element would be selected by the specified selector string; otherwise, it returns false.

A DOMString representing the namespace prefix of the element, or null if no prefix is specified.

Inserts a set of Node objects or DOMString objects before the first child of the Element. DOMString objects are inserted as equivalent Text nodes.

Removes the element from the tree it belongs to.

removeAttribute removes an attribute from the specified element.

removeAttributeNS removes the specified attribute from an element.

removeAttributeNode removes the specified attribute from the current element.

Replaces this Element in the children list of its parent with a set of Node or string objects. String objects are inserted as equivalent Text nodes.

The Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in full-screen mode.

It's not guaranteed that the element will be put into full screen mode. If permission to enter full screen mode is granted, the returned Promise will resolve and the element will receive a fullscreenchange event to let it know that it's now in full screen mode. If permission is denied, the promise is rejected and the element receives a fullscreenerror event instead. If the element has been detached from the original document, then the document receives these events instead.

Earlier implementations of the Fullscreen API would always send these events to the document rather than the element, and you may need to be able to handle that situation. Check Browser compatibility in fullscreen for specifics on when each browser made this change.

The Element.requestPointerLock() method allows to asynchronously ask for the pointer to be locked on the given element.

To track the success or failure of the request, it is necessary to listen for the pointerlockchange and pointerlockerror events at the Document level.

Height of the scroll view of an element; it includes the element padding but not its margin.

scrollWidth is a read–only property that returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than the clientWidth.

Adds a new attribute or changes the value of an existing attribute on the specified element.

MSN

setAttributeNS adds a new attribute or changes the value of an attribute with the given namespace and name.

setAttributeNode() adds a new Attr node to the specified element.

setAttributeNodeNS adds a new namespaced attribute node to an element.

Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.

In XML (and XML-based languages such as XHTML), tagName preserves case. On HTML elements in DOM trees flagged as HTML documents, tagName returns the element name in the uppercase form. The value of tagName is the same as that of nodeName.

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

This implementation accepts a settings object of type EventListenerOptions.

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

.attributes is a collection of all attribute nodes registered to the specified node. It is a NamedNodeMap,not an Array, so it has no Array methods and the Attr nodes' indexes may differ among browsers. To be more specific, attribute is a key value pair of strings that represents any information regarding that node; it cannot hold Object. Attribute can hold additional data/information that is required while processing custom JavaScript. There are many predefined attributes for different nodes used for binding events, validations, and specifying layout informations that are handled by browser (may vary from browser to browser).

Returns the absolute base URL of this Node.

Returns an unsigned long giving the amount of children that the object has.

Returns a live NodeList containing all the children of this node. NodeList being live means that if the children of the Node change, the NodeList object is automatically updated.

Returns a live HTMLCollection containing all objects of type Element that are children of the object.

Clone a Node, and optionally, all of its contents. By default, it clones the content of the node.

Compares the position of the current node against another node in any other document.

Returns a Boolean value indicating whether a node is a descendant of a given node, i.e. the node itself, one of its direct children (childNodes), one of the children's direct children, and so on.

Dispatches an Event at the specified EventTarget, invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) apply to events dispatched manually with dispatchEvent().

Returns the node's first child in the tree, or null if the node is childless. If the node is a Document, it returns the first node in the list of its direct children.

Returns the Element that is the first child of the object, or null if there is none.

hasAttributes returns a boolean value of true or false, indicating if the current element has any attributes or not.

hasChildNodes returns a Boolean value indicating whether the current Node has child nodes or not.

Inserts the first Node given in a parameter immediately before the second, child of this element, Node.

True if this Node is connected to the Document context object (or ShadowRoot in the case of shadow DOM)

isDefaultNamespace accepts a namespace URI as an argument and returns true if the namespace is the default namespace on the given node or false if not.

If #targetElm is first div element in document, "true" will be displayed.

Tests whether two nodes are the same, that is they reference the same object.

The Node.isSupported()returns a Boolean flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.

Returns a Node representing the last direct child node of the node, or null if the node has no child.

Returns the Element that is the last child of the object, or null if there is none.

Returns a DOMString representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. Though the specification requires localName to be defined on the Node interface, Gecko-based browsers implement it on the Element interface.

Takes a prefix and returns the namespaceURI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.

Returns the prefix for a given namespaceURI if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.

The namespace URI of this node, or null if it is no namespace. 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. Though the specification requires namespaceURI to be defined on the Node interface, Gecko-based browsers implement it on the Element interface.

The nextElementSibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.

Returns the node immediately following the specified one in its parent's childNodes list, or null if the specified node is the last node in that list.

Returns a DOMString containing the name of the Node. The structure of the name will differ with the name type. E.g. An HTMLElement will contain the name of the corresponding tag, like 'audio' for an HTMLAudioElement, a Text node will have the '#text' string, or a Document node will have the '#document' string.

The read-only Node.nodeType property returns an unsigned short integer representing the type of the node.

Puts the specified node and all of its subtree into a "normalized" form. In a normalized subtree, no text nodes in the subtree are empty and there are no adjacent text nodes.

Returns the Document that this node belongs to. If no document is associated with it, returns null.

Returns a Node that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.

The previousElementSibling read-only property returns the Element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.

Returns the node immediately preceding the specified one in its parent's childNodes list, null if the specified node is the first in that list.

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes) that matches the specified group of selectors.

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors.

Removes a child node from the current element, which must be a child of the current node.

Removes the event listener previously registered with EventTarget.addEventListener.

This implementation accepts a settings object of type EventListenerOptions.

Removes the event listener previously registered with EventTarget.addEventListener.

Replaces one child Node of the current one with the second one given in parameter.

Replaces the existing children of a Node with a specified new set of children.

Supported by FF>3.6, any Opera, any Chrome, any IE, any Safari

innerHTML sets or gets the HTML syntax describing the element's descendants.

Note: If a <div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as &amp, &lt and &gt respectively. Use Node.textContent to get a correct copy of these text nodes' contents.

The copy event is fired when the user initiates a copy action through the browser UI (for example, using the CTRL/Cmd+C keyboard shortcut or selecting the "Copy" from the menu) and in response to an allowed document.execCommand("copy") call.

The cut event is fired when a selection has been removed from the document and added to the clipboard.

The Element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the element has transitioned into or out of full-screen mode.

The Element interface's onfullscreenerror property is an event handler for the fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen mode.

The paste event is fired when a selection has been pasted from the clipboard to the document.

Gets the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.

Supported by FF>10, any Opera, any Chrome, any IE, any Safari

scrollLeft gets or sets the number of pixels that an element's content is scrolled to the left.

scrollTop gets or sets the number of pixels that the content of an element is scrolled upward.

Represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied to the clipboard.

Is a DOMString representing the value of an object. For most Node type, this returns null and any set operation is ignored. For nodes of type TEXT_NODE (Text objects), COMMENT_NODE (Comment objects), and PROCESSING_INSTRUCTION_NODE (ProcessingInstruction objects), the value corresponds to the text data contained in the object.

Is a DOMString representing the textual content of an element and all its descendants.