JavaScripture
Contribute via GitHub Feedback

JavaScript Element : Node

Element represents an element in the DOM/document tree. Element is the base type for HTMLElement and SVGElement.

Instance Properties

attributes : Array<Attr>

childElementCount : Number

Returns the number of direct children of this.

children : HTMLCollection

The Element children in this. Unlike Node.childNodes, children only returns nodes inside this that derive from Element (ie, other node types like Text and Comment will be excluded from children but present in childNodes).

Example:

Run

Results:

 

classList : DOMTokenList

classList is an object that allows easy manipulation of the classes in the className property. See also className.

Example:

Run

Results:

 

className : String

Gets or sets the classes of the Element (used for styling via CSS). className should be a space separated list of classes. className corresponds to the HTML class attribute. See also classList.

Example:

Run

Results:

 

clientHeight : Number  
clientLeft : Number  
clientTop : Number  
clientWidth : Number  
dataset : DOMStringMap  

Map of custom 'data-' prefixed attributes on this. Attribute names are converted to camel case.

Example:

Run

Results:

 

firstElementChild : Element
id : String

A unique name for this element in the document. You can retrieve an element by id using document.getElementById().

lastElementChild : Element
localName : String

namespaceURI : String

nextElementSibling : Element

prefix : String

previousElementSibling : Element

scrollHeight : Number  
scrollLeft : Number
scrollTop : Number
scrollWidth : Number  
shadowRoot : ShadowRoot  

tagName : String  

Instance Methods

append 2 variants
append(item0 : String, [item1 : String, [...]]) : undefined

Same as append(new Text(item0), new Text(item1), ...).

Example:

Run

Results:

 

append(item0 : Node, [item1 : Node, [...]]) : undefined

Inserts the specified nodes at the end of this.childNodes. See also prepend, replaceChildren, and Node.appendChild.

Example:

Run

Results:

 

createShadowRoot() : ShadowRoot
getAttribute(name : String) : String

getAttributeNS(namespaceURI : String, localName : String) : String

getBoundingClientRect() : ClientRect

Returns the rectangular bounds of this relative to the viewport. If this is a text element that is split on multiple lines, the rectangle will be enlarged to contain all portions. Use getClientRects() to get the rectangles of each portion.

Example:

Run

Results:

 

getClientRects() : ClientRectList

Returns a list of rectangles where this is in the document. This method is similar to getBoundingClientRect() except it will return a ClientRect for each part of the element (eg, text elements split on multiple lines will return a list with length > 1).

Example:

Run

Results:

 

getDestinationInsertionPoints() : NodeList
getElementsByClassName(classNames : String) : NodeList

Returns a list of descendants of this that match the specified class name. See also getElementsByTagName(), querySelector(), and querySelectorAll().

Example:

Run

Results:

 

getElementsByTagName(name : String) : NodeList

Returns a list of descendants of this that match the specified tag name. See also getElementsByTagNameNS(), getElementsByClassName(), querySelector(), and querySelectorAll().

Example:

Run

Results:

 

getElementsByTagNameNS(namespaceURI : String, localName : String) : NodeList

hasAttribute(name : String) : Boolean

hasAttributeNS(namespaceURI : String, localName : String) : Boolean

hasAttributes() : Boolean

prepend 2 variants
prepend(item0 : String, [item1 : String, [...]]) : undefined

Same as prepend(new Text(item0), new Text(item1), ...).

Example:

Run

Results:

 

prepend(item0 : Node, [item1 : Node, [...]]) : undefined

Inserts the specified nodes at the start of this.childNodes. See also append, replaceChildren, and Node.insertBefore.

Example:

Run

Results:

 

querySelector(selector : String) : Element

Returns the first Element that matches the CSS selector. See also querySelectorAll(), getElementsByTagName(), and getElementsByClassName().

Example:

Run

Results:

 

querySelectorAll(cssSelector : String) : NodeList

Returns a NodeList containing the Elements in the document that match the CSS selector. See also querySelector(), getElementsByTagName(), and getElementsByClassName().

Example:

Run

Results:

 

releasePointerCapture(id : Number) : undefined
removeAttribute(name : String) : undefined

removeAttributeNS(namespaceURI : String, localName : String) : undefined

replaceChildren 2 variants
replaceChildren(item0 : String, [item1 : String, [...]]) : undefined

Same as replaceChildren(new Text(item0), new Text(item1), ...).

Example:

Run

Results:

 

replaceChildren(item0 : Node, [item1 : Node, [...]]) : undefined

Removes all items from this.childNodes and replaces them with the specified nodes. See also append, prepend, Node.insertBefore, Node.removeChild, and Node.replaceChild.

Example:

Run

Results:

 

requestFullscreen([options : Object]) : Promise<undefined>
options : {
navigationUIStringOne of 'auto', 'show', or 'hide'.
}

Enters fullscreen mode where this fills the entire screen. See also document.exitFullscreen().

Example:

Run

Results:

 

requestPointerLock() : undefined

Locks the pointer (mouse cursor) to this. If successful, document.onpointerlockchange will fire and subsequent pointer moves be sent to this. If unable to lock the pointer, document.onpointerlockerror will fire. Use document.exitPointerLock to release the pointer. See also document.pointerLockElement, MouseEvent.movementX and MouseEvent.movementY.

Example:

Run

Results:

 

scrollIntoView([top = false : Boolean]) : undefined

Scolls the element into view.

Example:

Run

Results:

 

setAttribute(name : String, value : String) : undefined

setAttributeNS(namespaceURI : String, qualifiedName : String, value : String) : undefined

setPointerCapture(id : Number) : undefined

Instance Events

oncopy / 'copy'  
listener(event : ClipboardEvent) : undefined
oncut / 'cut'  
listener(event : ClipboardEvent) : undefined
onfullscreenchange / 'fullscreenchange'  
listener(event : Event) : undefined
onfullscreenerror / 'fullscreenerror'  
listener(event : Event) : undefined
ongotpointercapture / 'gotpointercapture'  
listener(event : PointerEvent) : undefined
onlostpointercapture / 'lostpointercapture'  
listener(event : PointerEvent) : undefined
onpaste / 'paste'  
listener(event : ClipboardEvent) : undefined
onpointercancel / 'pointercancel'  
listener(event : PointerEvent) : undefined
onpointerdown / 'pointerdown'  
listener(event : PointerEvent) : undefined
onpointerenter / 'pointerenter'  
listener(event : PointerEvent) : undefined
onpointerleave / 'pointerleave'  
listener(event : PointerEvent) : undefined
onpointermove / 'pointermove'  
listener(event : PointerEvent) : undefined
onpointerout / 'pointerout'  
listener(event : PointerEvent) : undefined
onpointerover / 'pointerover'  
listener(event : PointerEvent) : undefined
onpointerup / 'pointerup'  
listener(event : PointerEvent) : undefined
ontouchcancel / 'touchcancel'  
listener(event : TouchEvent) : undefined
ontouchend / 'touchend'  
listener(event : TouchEvent) : undefined

Called when the user stops touching the element.

ontouchmove / 'touchmove'  
listener(event : TouchEvent) : undefined

Called when the user moves while touching the element.

ontouchstart / 'touchstart'  
listener(event : TouchEvent) : undefined

Called when the user begins touching the element.