Table of Contents

Class Element

Namespace
CSharpToJavaScript.APIs.JS
Assembly
CSharpToJavaScript.dll

Element is the most general base class from which all element objects (i.e., objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.

[Value("Element")]
public class Element : Node
Inheritance
Element
Derived
Inherited Members

Remarks

For example, the HTMLElement interface is the base interface for HTML elements. Similarly, the SVGElement interface is the basis for all SVG elements, and the MathMLElement interface is the base interface for MathML 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.

See also on MDN

Constructors

Element() 

public Element()

Properties

Attributes

The Element.attributes property returns a live 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, attributes is a key/value pair of strings that represents any
information regarding that attribute.

[Value("attributes")]
public NamedNodeMap Attributes { get; }

Property Value

NamedNodeMap

A NamedNodeMap object.

Remarks

-NamedNodeMap, the interface of the returned object
-Cross-browser compatibility considerations: on quirksmode

See also on MDN

ClassList

The Element.classList is a read-only property that
returns a live DOMTokenList collection of the class
attributes of the element. This can then be used to manipulate the class list.

[Value("classList")]
public DOMTokenList ClassList { get; }

Property Value

DOMTokenList

A DOMTokenList representing the contents of the element's
class attribute. If the class attribute is not set or empty,
it returns an empty DOMTokenList, i.e., a DOMTokenList with
the length property equal to 0.Although the classList property itself is read-only, you can modify its associated DOMTokenList using the DOMTokenListadd, DOMTokenListremove, DOMTokenListreplace, and DOMTokenListtoggle methods.You can test whether the element contains a given class using the DOMTokenListcontains method.

Remarks

Using classList is a convenient alternative to accessing an element's list
of classes as a space-delimited string via ClassName.

-ClassName
-DOMTokenList
-classList.js (a cross-browser JavaScript polyfill that fully implements element.classList)

See also on MDN

ClassName

The className property of the
Element interface gets and sets the value of the class attribute
of the specified element.

[Value("className")]
public string ClassName { get; set; }

Property Value

string

A string variable representing the class or space-separated classes of the current element.

Remarks

-ClassList

See also on MDN

ClientHeight

The clientHeight read-only property of the Element interface is zero for elements with no CSS or inline layout boxes; otherwise, it's the inner height of an element in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars (if present).

[Value("clientHeight")]
public long ClientHeight { get; }

Property Value

long

An integer.

Remarks

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

When clientHeight is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's height (excluding any scrollbar) is returned.

-Determining the dimensions of elements
-OffsetHeight
-ScrollHeight
-ClientWidth
-ClientLeft
-ClientTop
-GetBoundingClientRect()

See also on MDN

ClientLeft

The clientLeft read-only property of the Element interface returns 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.

[Value("clientLeft")]
public long ClientLeft { get; }

Property Value

long

An integer.

Remarks

NOTE

When an element has display: inline, clientLeft returns 0 regardless of the element's border.

-Determining the dimensions of elements
-OffsetLeft
-ScrollLeft
-ClientHeight
-ClientWidth
-ClientTop
-GetBoundingClientRect()

See also on MDN

ClientTop

The clientTop read-only property of the Element interface returns the width of the top border of an element in pixels.

[Value("clientTop")]
public long ClientTop { get; }

Property Value

long

An integer.

Remarks

All that lies between the offsetTop and clientTop is the element's border. This is because the offsetTop indicates the location of the top of the border (not the margin) while the client area starts immediately below the border, including padding. Therefore, the clientTop value is always equal to the border-top-width, rounded to integer. For example, if the computed border-top-width is zero, then clientTop is also zero.

-Determining the dimensions of elements
-OffsetTop
-ScrollTop
-ClientHeight
-ClientWidth
-ClientLeft
-GetBoundingClientRect()

See also on MDN

ClientWidth

The clientWidth read-only property of the Element interface is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

[Value("clientWidth")]
public long ClientWidth { get; }

Property Value

long

An integer.

Remarks

When clientWidth is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's width (excluding any scrollbar) is returned.

-Determining the dimensions of elements
-OffsetWidth
-ScrollWidth
-ClientHeight
-ClientLeft
-ClientTop
-GetBoundingClientRect()

See also on MDN

CurrentCSSZoom

The currentCSSZoom read-only property of the Element interface provides the "effective" CSS zoom of an element, taking into account the zoom applied to the element and all its parent elements.

[Value("currentCSSZoom")]
public Number CurrentCSSZoom { get; }

Property Value

Number

A number indicating the effective CSS zoom on the element, or 1 if the element is not rendered.

Remarks

The value calculated by multiplying the CSS zoom values of the element and all of its parents.
For example, if three elements with zoom values of 2, 1.5, and 3, are nested within each other, the most deeply nested element will have a currentCSSZoom value of 9.
If the element doesn't have a CSS box, for example because display: none is set on the element or one of its parents, then the currentCSSZoom is set to 1.

Note that some methods, such as GetBoundingClientRect(), return dimensions and position that are relative to the viewport, and hence include the effects of CSS zoom.
Other properties and methods return values that are relative to the element itself, and do not include the effects of zooming.
These include, for example, client* properties such as ClientHeight, scroll*() methods like Scroll(ScrollToOptions), and offset* properties such as OffsetHeight.
The currentCSSZoom property can be used to scale these values to adjust for the effects of zooming.

-CSS zoom

See also on MDN

ElementTiming

NOTE
Experimental
The elementTiming property of the Element interface identifies elements for observation in the PerformanceElementTiming API. The elementTiming property reflects the value of the elementtiming attribute. 
[Value("elementTiming")]
public string ElementTiming { get; set; }

Property Value

string

A string.

Remarks

-PerformanceElementTiming
-elementtiming HTML attribute

See also on MDN

Id

The id property of the Element interface
represents the element's identifier, reflecting the
id
global attribute.

[Value("id")]
public string Id { get; set; }

Property Value

string

A string.

Remarks

If the id value is not the empty string, it must be unique in a document.

The id is often used with Document.GetElementById to retrieve a particular element.
Another common case is to use an element's ID as a selector when styling the document with CSS.

NOTE

Identifiers are case-sensitive, but you should avoid creating
IDs that differ only in the capitalization.

-The DOM id
global attribute.

See also on MDN

InnerHTML

WARNING
This property parses its input as HTML, writing the result into the DOM.
APIs like this are known as injection sinks, and are potentially a vector for cross-site-scripting (XSS) attacks, if the input originally came from an attacker.
[Value("innerHTML")]
public Union86 InnerHTML { get; set; }

Property Value

Union86

Getting the property returns a string containing the HTML serialization of the element's descendants.Setting the property accepts either a TrustedHTML object or a string. It parses this value as HTML and replaces all the element's descendants with the result.
When set to the null value, that null value is converted to the empty string (""), so elt.innerHTML = null is equivalent to elt.innerHTML = "".

Remarks

You can mitigate this risk by always assigning TrustedHTML objects instead of strings and enforcing trusted types.
See Security considerations for more information.

The innerHTML property of the Element interface gets or sets the HTML or XML markup contained within the element, omitting any {{glossary("shadow tree", "shadow roots")}} in both cases.

To insert the HTML into the document rather than replace the contents of an element, use the method InsertAdjacentHTML(string, Union88).

-TextContent and InnerText
-InsertAdjacentHTML(string, Union88)
-OuterHTML
-Parsing HTML or XML into a DOM tree: DOMParser
-Serializing a DOM tree into an XML string: XMLSerializer
-GetHTML(GetHTMLOptions)
-GetHTML(GetHTMLOptions)
-SetHTMLUnsafe(Union85)
-SetHTMLUnsafe(Union89)
-Trusted Types API

See also on MDN

LocalName

The Element.localName read-only property returns the
local part of the qualified name of an element.

[Value("localName")]
public string LocalName { get; }

Property Value

string

A string representing the local part of the element's qualified name.

Remarks

-TagName
-NamespaceURI
-Prefix
-LocalName

See also on MDN

NamespaceURI

The Element.namespaceURI read-only property returns the namespace URI of the element, or null if the element is not in a namespace.

[Value("namespaceURI")]
public string? NamespaceURI { get; }

Property Value

string

A string, or null.

Remarks

-LocalName
-Prefix
-NamespaceURI

See also on MDN

Onfullscreenchange 

[Value("onfullscreenchange")]
public EventHandlerNonNull Onfullscreenchange { get; set; }

Property Value

EventHandlerNonNull

Onfullscreenerror 

[Value("onfullscreenerror")]
public EventHandlerNonNull Onfullscreenerror { get; set; }

Property Value

EventHandlerNonNull

OuterHTML

WARNING
This property parses its input as HTML, writing the result into the DOM.
APIs like this are known as injection sinks, and are potentially a vector for cross-site-scripting (XSS) attacks, if the input originally came from an attacker.
[Value("outerHTML")]
public Union87 OuterHTML { get; set; }

Property Value

Union87

Getting the property returns a string containing an HTML serialization of the element and its descendants.Setting the property accepts either a TrustedHTML object or a string.
The input is parsed as HTML and replaces the element and all its descendants with the result.
When set to the null value, that null value is converted to the empty string (""), so element.outerHTML = null is equivalent to element.outerHTML = "".

Remarks

You can mitigate this risk by always assigning TrustedHTML objects instead of strings and enforcing trusted types.
See Security considerations for more information.

The outerHTML attribute of the Element interface gets or sets the HTML or XML markup of the element and its descendants, omitting any {{glossary("shadow tree", "shadow roots")}} in both cases.

To get or set the contents of an element, use the InnerHTML property instead.

-Serializing DOM trees into XML strings: XMLSerializer
-Parsing XML or HTML into DOM trees: DOMParser
-OuterText

See also on MDN

Part

The part property of the Element interface
represents the part identifier(s) of the element (i.e., set using the part
attribute), returned as a DOMTokenList. These can be used to style parts
of a shadow DOM, via the {{cssxref("::part")}} pseudo-element.

[Value("part")]
public DOMTokenList Part { get; }

Property Value

DOMTokenList

A DOMTokenList object.

Remarks

-{{cssxref("::part")}}
-part

See also on MDN

Prefix

The Element.prefix read-only property returns the
namespace prefix of the specified element, or null if no prefix is
specified.

[Value("prefix")]
public string? Prefix { get; }

Property Value

string

A string.

Remarks

-NamespaceURI
-LocalName
-Prefix

See also on MDN

ScrollHeight

The scrollHeight read-only property of the Element interface is a measurement of the height of an element's content, including content not visible on the screen due to overflow.

[Value("scrollHeight")]
public long ScrollHeight { get; }

Property Value

long

An integer.

Remarks

The user's viewport is an element with four regions labeled padding-top, border-top, border-bottom, padding-bottom. The scroll height goes from the container's padding top to the end of the padding bottom, well beyond the top and bottom of the viewport.

The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as ClientHeight: it includes the element's padding, but not its border, margin or horizontal scrollbar (if present). It can also include the height of pseudo-elements such as {{cssxref("::before")}} or {{cssxref("::after")}}. If the element's content can fit without a need for vertical scrollbar, its scrollHeight is equal to ClientHeight.

-Determining the dimensions of elements
-OffsetHeight
-ClientHeight
-ScrollWidth
-ScrollLeft
-ScrollTop
-GetBoundingClientRect()
-ScrollTo(ScrollToOptions)

See also on MDN

ScrollLeft

The scrollLeft property of the Element interface gets or sets the number of pixels by which an element's content is scrolled from its left edge. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number.

[Value("scrollLeft")]
public double ScrollLeft { get; set; }

Property Value

double

A double-precision floating-point value indicating the number of pixels by which the element is currently scrolled horizontally from the origin, where a positive value means the element is scrolled to the right (to reveal more content to the right). If the element isn't scrolled at all left or right, then scrollLeft is 0. If the document is not the active document, the returned value is 0. If the document is rendered on a subpixel-precise device, then the returned value is also subpixel-precise and may contain a decimal component.It's possible for scrollLeft to be negative if the element can be scrolled to the left from the initial containing block. For example, if the element's direction is rtl (right-to-left) and content grows to the left, then scrollLeft is 0 when the scrollbar is at its rightmost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.Safari responds to overscrolling by updating scrollLeft beyond the maximum scroll position (unless the default "bounce" effect is disabled, such as by setting overscroll-behavior to none), while Chrome and Firefox do not.The scrollLeft property can be set, which causes the element to scroll to the specified horizontal position, in the same way as using Scroll(ScrollToOptions) with behavior: "auto".

Remarks

-Determining the dimensions of elements
-OffsetLeft
-ClientLeft
-ScrollHeight
-ScrollWidth
-ScrollTop
-GetBoundingClientRect()
-ScrollTo(ScrollToOptions)

See also on MDN

ScrollTop

The scrollTop property of the Element interface gets or sets the number of pixels by which an element's content is scrolled from its top edge. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number.

[Value("scrollTop")]
public double ScrollTop { get; set; }

Property Value

double

A double-precision floating-point value indicating the number of pixels by which the element is currently scrolled vertically from the origin, where a positive value means the element is scrolled down (to reveal more content to the bottom). If the element isn't scrolled at all up or down, then scrollTop is 0. If the document is not the active document, the returned value is 0. If the document is rendered on a subpixel-precise device, then the returned value is also subpixel-precise and may contain a decimal component.It's possible for scrollTop to be negative if the element can be scrolled up from the initial containing block. For example, if the element's flex-direction is column-reverse and content grows upwards, then scrollTop is 0 when the scrollbar is at its bottommost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.Safari responds to overscrolling by updating scrollTop beyond the maximum scroll position (unless the default "bounce" effect is disabled, such as by setting overscroll-behavior to none), while Chrome and Firefox do not. For example, scrollTop may be negative on Safari just by continuing to scroll up when the element is already at the top.The scrollTop property can be set, which causes the element to scroll to the specified vertical position, in the same way as using Scroll(ScrollToOptions) with behavior: "auto".

Remarks

-Determining the dimensions of elements
-OffsetTop
-ClientTop
-ScrollHeight
-ScrollWidth
-ScrollLeft
-GetBoundingClientRect()
-ScrollTo(ScrollToOptions)

See also on MDN

ScrollWidth

The scrollWidth read-only property of the Element interface is a measurement of the width of an element's content, including content not visible on the screen due to overflow.

[Value("scrollWidth")]
public long ScrollWidth { get; }

Property Value

long

An integer.

Remarks

The scrollWidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar. The width is measured in the same way as ClientWidth: it includes the element's padding, but not its border, margin or vertical scrollbar (if present). It can also include the width of pseudo-elements such as {{cssxref("::before")}} or {{cssxref("::after")}}. If the element's content can fit without a need for horizontal scrollbar, its scrollWidth is equal to ClientWidth.

-Determining the dimensions of elements
-OffsetWidth
-ClientWidth
-ScrollHeight
-ScrollLeft
-ScrollTop
-GetBoundingClientRect()
-ScrollTo(ScrollToOptions)

See also on MDN

ShadowRoot

The Element.shadowRoot read-only property
represents the shadow root hosted by the element.

[Value("shadowRoot")]
public ShadowRoot? ShadowRoot { get; }

Property Value

ShadowRoot

A ShadowRoot object instance, or null if the associated
shadow root was attached with its Mode set to
closed. (See AttachShadow(ShadowRootInit) for further details).Some built-in elements, such as input and img, have user-agent shadow roots that are closed to script. Therefore, their shadowRoot property is always null.

Remarks

Use AttachShadow(ShadowRootInit) to add a shadow root to an existing element.

See also on MDN

Slot

The slot property of the Element interface
returns the name of the shadow DOM slot the element is inserted in.

[Value("slot")]
public string Slot { get; set; }

Property Value

string

A string.

Remarks

A slot is a placeholder inside a web component that users can fill with their own markup (see Using templates and slots for more information).

See also on MDN

TagName

The tagName read-only property
of the Element interface returns the tag name of the element on which
it's called.

[Value("tagName")]
public string TagName { get; }

Property Value

string

A string indicating the element's tag name. This string's capitalization depends on the
document type:For Element objects, the value of tagName is the same as
the value of the NodeName property the element object
inherits from Node.

Remarks

For example, if the element is an img, its
tagName property is IMG (for HTML documents; it may be cased
differently for XML/XHTML documents). Note: You can use the LocalName property
to access the Element's local name — which for the case in the example is img (lowercase).

-LocalName

See also on MDN

Methods

AttachShadow(ShadowRootInit)

The Element.attachShadow() method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot.

[Value("attachShadow")]
public ShadowRoot AttachShadow(ShadowRootInit init)

Parameters

init ShadowRootInit

Returns

ShadowRoot

Returns a ShadowRoot object.

Remarks

-Mode
-DelegatesFocus
-SlotAssignment
-Declaratively attach a shadow root with the shadowrootmode attribute of the <template> element
-Declarative shadow DOM on web.dev (2023)

See also on MDN

CheckVisibility(CheckVisibilityOptions)

The checkVisibility() method of the Element interface checks whether the element is visible.

[Value("checkVisibility")]
public bool CheckVisibility(CheckVisibilityOptions options = null)

Parameters

options CheckVisibilityOptions

Returns

bool

false if any of the following conditions are met, otherwise true:

Remarks

The method returns false in either of the following situations:

The optional parameter enables additional checks to test for other interpretations of what "visible" means.
For example, you can further check whether an element has an opacity of 0, if the value of the element visibility property makes it invisible, or if the element content-visibility property has a value of auto and its rendering is currently being skipped.

See also on MDN

Closest(string)

The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.

[Value("closest")]
public Element? Closest(string selectors)

Parameters

selectors string

Returns

Element

The closest ancestor Element or itself, which matches the selectors. If there are no such element, null.

Remarks

-CSS selectors module
-Other Element methods that take selectors: Element.QuerySelector, Element.QuerySelectorAll, and Matches(string).

See also on MDN

ComputedStyleMap()

The computedStyleMap() method of
the Element interface returns a StylePropertyMapReadOnly
interface which provides a read-only representation of a CSS declaration block that is
an alternative to CSSStyleDeclaration.

[Value("computedStyleMap")]
public StylePropertyMapReadOnly ComputedStyleMap()

Returns

StylePropertyMapReadOnly

A StylePropertyMapReadOnly object.Unlike GetComputedStyle(Element, string?), the return value contains computed values, not resolved values. For most properties, they are the same, except a few layout-related properties, where the resolved value is the used value instead of the computed value. See the comparison with getComputedStyle() example for details.

Remarks

-GetComputedStyle(Element, string?)

See also on MDN

FocusableAreas(FocusableAreasOption) 

[Value("focusableAreas")]
public List<Node> FocusableAreas(FocusableAreasOption option = null)

Parameters

option FocusableAreasOption

Returns

List<Node>

GetAttribute(string)

The getAttribute() method of the
Element interface returns the value of a specified attribute on the
element.

[Value("getAttribute")]
public string? GetAttribute(string qualifiedName)

Parameters

qualifiedName string

Returns

string

A string containing the value of attributeName if the attribute exists, otherwise null.

Remarks

If the given attribute does not exist, the value returned will be null.

If you need to inspect the Attr node's properties, you can use the GetAttributeNode(string) method instead.

-HasAttribute(string)
-SetAttribute(string, string)
-RemoveAttribute(string)
-ToggleAttribute(string, bool)

See also on MDN

GetAttributeNS(string?, string)

The getAttributeNS() method of the Element
interface 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 &quot;&quot; (the empty string); see Notes for
details.

[Value("getAttributeNS")]
public string? GetAttributeNS(string? namespace_, string localName)

Parameters

namespace_ string
localName string

Returns

string

The string value of the specified attribute. If the attribute doesn&apos;t exist, the result
is null.

NOTE
Earlier versions of the DOM specification had
this method described as returning an empty string for non-existent attributes, but it
was not typically implemented this way since null makes more sense. The DOM4
specification now says this method should return null for non-existent attributes.

Remarks

If you are working with HTML documents and you don't need to specify the requested attribute as being part of a specific namespace, use the GetAttribute(string) method instead.

-HasAttributeNS(string?, string)
-SetAttributeNS(string?, string, string)
-RemoveAttributeNS(string?, string)

See also on MDN

GetAttributeNames()

The getAttributeNames() method of the
Element interface returns the attribute names of the element as an
Array of strings. If the element has no attributes it returns an empty
array.

[Value("getAttributeNames")]
public List<string> GetAttributeNames()

Returns

List<string>

An (Array) of strings.

Remarks

Using getAttributeNames() along with
GetAttribute(string), is a memory-efficient and
performant alternative to accessing Attributes.

The names returned by getAttributeNames() are qualified attribute names, meaning that attributes with a namespace prefix have their names returned with that namespace prefix (not the actual namespace), followed by a colon, followed by the attribute name (for example, xlink:href), while any attributes which have no namespace prefix have their names returned as-is (for example, href).

See also on MDN

GetAttributeNode(string)

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

[Value("getAttributeNode")]
public Attr? GetAttributeNode(string qualifiedName)

Parameters

qualifiedName string

Returns

Attr

An Attr node for the attribute.

Remarks

This method is useful if you need the attribute&apos;s instance properties.
If you only need the attribute's value, you can use the GetAttribute(string) method instead.

-CreateAttribute(string)
-SetAttributeNode(Attr)
-RemoveAttributeNode(Attr)

See also on MDN

GetAttributeNodeNS(string?, string)

The getAttributeNodeNS() method of the Element interface returns the namespaced Attr node of an element.

[Value("getAttributeNodeNS")]
public Attr? GetAttributeNodeNS(string? namespace_, string localName)

Parameters

namespace_ string
localName string

Returns

Attr

The node for specified attribute.

Remarks

This method is useful if you need the namespaced attribute&apos;s instance properties.
If you only need the namespaced attribute's value, you can use the GetAttributeNS(string?, string) method instead.

If you need the Attr node of an element in HTML documents and the attribute is not namespaced, use the GetAttributeNode(string) method instead.

-CreateAttribute(string)
-CreateAttributeNS(string?, string)
-SetAttributeNodeNS(Attr)

See also on MDN

GetBoundingClientRect()

The Element.getBoundingClientRect() method returns a
DOMRect object providing information about the size of an element and its
position relative to the viewport.

[Value("getBoundingClientRect")]
public DOMRect GetBoundingClientRect()

Returns

DOMRect

The returned value is a DOMRect object which is the smallest rectangle
which contains the entire element, including its padding and border-width. The
left, top, right, bottom,
x, y, width, and height properties
describe the position and size of the overall rectangle in pixels. Properties other than
width and height are relative to the top-left of the viewport.DOMRect object that is the smallest rectangle containing the entire element.The width and height properties of the DOMRect
object returned by the method include the padding and
border-width, not only the content width/height. In the standard box model,
this would be equal to the width or height property of the
element + padding + border-width. But
if box-sizing: border-box is
set for the element this would be directly equal to its width or
height.The returned value can be thought of as the union of the rectangles returned by
GetClientRects() for the element, i.e., the CSS
border-boxes associated with the element.Empty border-boxes are completely ignored. If all the element&apos;s border-boxes are empty,
then a rectangle is returned with a width and height of zero
and where the top and left are the top-left of the border-box
for the first CSS box (in content order) for the element.The amount of scrolling that has been done of the viewport area (or any other
scrollable element) is taken into account when computing the bounding rectangle. This
means that the rectangle&apos;s boundary edges (top, right,
bottom, left) change their values every time the scrolling
position changes (because their values are relative to the viewport and not absolute).If you need the bounding rectangle relative to the top-left corner of the document,
just add the current scrolling position to the top and left
properties (these can be obtained using ScrollY and
ScrollX) to get a bounding rectangle which is independent from the
current scrolling position.

Remarks

-GetClientRects()

See also on MDN

GetClientRects()

The getClientRects() method of the Element
interface returns a collection of DOMRect objects that indicate the
bounding rectangles for each CSS border box in a client.

[Value("getClientRects")]
public DOMRectList GetClientRects()

Returns

DOMRectList

The returned value is a collection of DOMRect objects, one for each CSS
border box associated with the element. Each DOMRect object describes the border box, in pixels, with the top-left
relative to the top-left of the viewport. For tables with captions, the caption is
included even though it&apos;s outside the border box of the table. When called on SVG
elements other than an outer-&lt;svg&gt;, the &quot;viewport&quot; that the resulting
rectangles are relative to is the viewport that the element&apos;s
outer-&lt;svg&gt; establishes (and to be clear, the rectangles are also
transformed by the outer-&lt;svg&gt;&apos;s viewBox transform, if
any).The amount of scrolling that has been done of the viewport area (or any other
scrollable element) is taken into account when computing the rectangles.The returned rectangles do not include the bounds of any child elements that might
happen to overflow.For HTML area elements, SVG elements that do not render anything
themselves, display:none elements, and generally any elements that are not
directly rendered, an empty list is returned.Rectangles are returned even for CSS boxes that have empty border-boxes. The
left, top, right, and bottom
coordinates can still be meaningful.Fractional pixel offsets are possible.

Remarks

Most elements only have one border box each, but a multiline inline-level element (such as a multiline
span element, by default) has a border box around each line.

-GetBoundingClientRect()

See also on MDN

GetElementsByClassName(string)

The Element method
getElementsByClassName() returns a live
HTMLCollection which contains every descendant element which has the
specified class name or names.

[Value("getElementsByClassName")]
public HTMLCollection GetElementsByClassName(string classNames)

Parameters

classNames string

Returns

HTMLCollection

An HTMLCollection providing a live-updating list of every element which
is a member of every class in names.

Remarks

The method GetElementsByClassName(string)
on the Document interface works essentially the same way, except it acts
on the entire document, starting at the document root.

See also on MDN

GetElementsByTagName(string)

The
Element.getElementsByTagName() method returns a live
HTMLCollection of elements with the given tag name.

[Value("getElementsByTagName")]
public HTMLCollection GetElementsByTagName(string qualifiedName)

Parameters

qualifiedName string

Returns

HTMLCollection

A live HTMLCollection of elements with a matching tag name, in the order they appear. If no elements are found, the HTMLCollection is empty.

Remarks

All descendants of the
specified element are searched, but not the element itself. The returned list is
live, which means it updates itself with the DOM tree automatically.
Therefore, there is no need to call Element.getElementsByTagName() with
the same element and arguments repeatedly if the DOM changes in between calls.

When called on an HTML element in an HTML document, getElementsByTagName
lower-cases the argument before searching for it. This is undesirable when trying to
match camel_case SVG elements (such as
&lt;linearGradient&gt;)
in an HTML document. Instead, use GetElementsByTagNameNS(string?, string),
which preserves the capitalization of the tag name.

Element.getElementsByTagName is similar to
GetElementsByTagName(string), except that it only searches for
elements that are descendants of the specified element.

See also on MDN

GetElementsByTagNameNS(string?, string)

The Element.getElementsByTagNameNS() method returns a
live HTMLCollection of elements with the given tag name belonging to the
given namespace. It is similar to GetElementsByTagNameNS(string?, string), except
that its search is restricted to descendants of the specified element.

[Value("getElementsByTagNameNS")]
public HTMLCollection GetElementsByTagNameNS(string? namespace_, string localName)

Parameters

namespace_ string
localName string

Returns

HTMLCollection

A live HTMLCollection of found elements in the order they appear in the tree.

Remarks

See also on MDN

GetHTML(GetHTMLOptions)

The getHTML() method of the Element interface is used to serialize an element's DOM to an HTML string.

[Value("getHTML")]
public string GetHTML(GetHTMLOptions options = null)

Parameters

options GetHTMLOptions

Returns

string

A string that represents the HTML serialization of the element.

Remarks

The method provides an options argument that enables the serialization of child nodes that are shadow roots.
The options can be used to include nested shadow roots that have been set as ShadowRootserializable, and/or a specified array of ShadowRoot objects, which may be either open or closed.

Without arguments, child nodes that are shadow roots are not serialized, and this method behaves in the same way as reading the value of InnerHTML.

Note that some browsers serialize the &lt; and &gt; characters as &lt; and &gt; when they appear in attribute values (see Browser compatibility).
This is to prevent a potential security vulnerability (mutation XSS) in which an attacker can craft input that bypasses a sanitization function, enabling a cross-site scripting (XSS) attack.

See also on MDN

GetSpatialNavigationContainer() 

[Value("getSpatialNavigationContainer")]
public Node GetSpatialNavigationContainer()

Returns

Node

HasAttribute(string)

The Element.hasAttribute() method returns a
Boolean value indicating whether the specified element has the
specified attribute or not.

[Value("hasAttribute")]
public bool HasAttribute(string qualifiedName)

Parameters

qualifiedName string

Returns

bool

A boolean.

Remarks

-HasAttributes()
-GetAttribute(string)
-SetAttribute(string, string)
-RemoveAttribute(string)
-ToggleAttribute(string, bool)

See also on MDN

HasAttributeNS(string?, string)

The hasAttributeNS() method of the Element interface returns a boolean value indicating whether the current element has the specified attribute with the specified namespace.

[Value("hasAttributeNS")]
public bool HasAttributeNS(string? namespace_, string localName)

Parameters

namespace_ string
localName string

Returns

bool

A boolean.

Remarks

If you are working with HTML documents and you don't need to specify the requested attribute as being part of a specific namespace, use the HasAttribute(string) method instead.

-GetAttributeNS(string?, string)
-SetAttributeNS(string?, string, string)
-RemoveAttributeNS(string?, string)

See also on MDN

HasAttributes()

The hasAttributes() method of the Element
interface returns a boolean value indicating whether the current element has any
attributes or not.

[Value("hasAttributes")]
public bool HasAttributes()

Returns

bool

A boolean.

Remarks

-Attributes
-HasAttribute(string)
-GetAttribute(string)
-SetAttribute(string, string)
-RemoveAttribute(string)
-ToggleAttribute(string, bool)

See also on MDN

HasPointerCapture(long)

The hasPointerCapture() method of the
Element interface checks whether the element on which it is invoked has
pointer capture for the pointer identified by the given pointer ID.

[Value("hasPointerCapture")]
public bool HasPointerCapture(long pointerId)

Parameters

pointerId long

Returns

bool

A boolean value — true if the element does have pointer capture for the pointer identified by the given pointer ID, false if it doesn&apos;t.

Remarks

-SetPointerCapture(long)
-ReleasePointerCapture(long)
-{{ domxref(&quot;Pointer_events&quot;,&quot;Pointer Events&quot;, &quot;&quot;, 1) }}

See also on MDN

InsertAdjacentElement(string, Element)

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

[Value("insertAdjacentElement")]
public Element? InsertAdjacentElement(string where, Element element)

Parameters

where string
element Element

Returns

Element

The element that was inserted, or null, if the insertion failed.

Remarks

-InsertAdjacentHTML(string, Union88)
-InsertAdjacentText(string, string)
-InsertBefore(Node, Node?) (similar to beforebegin, with
different arguments)
-AppendChild(Node) (same effect as beforeend)

See also on MDN

InsertAdjacentHTML(string, Union88)

WARNING
This method parses its input as HTML or XML, writing the result into the DOM.
APIs like this are known as injection sinks, and are potentially a vector for cross-site-scripting (XSS) attacks, if the input originally came from an attacker.
[Value("insertAdjacentHTML")]
public GlobalObject.Undefined InsertAdjacentHTML(string position, Union88 string_)

Parameters

position string
string_ Union88

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

You can reduce the risk by assigning TrustedHTML objects instead of strings, and enforcing trusted types using the require-trusted-types-for CSP directive.
This ensures that the input is passed through a transformation function, which has the chance to sanitize the input to remove potentially dangerous markup, such as script elements and event handler attributes.

The insertAdjacentHTML() method of the Element interface parses the specified input as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

-InsertAdjacentElement(string, Element)
-InsertAdjacentText(string, string)
-XMLSerializer: Serialize a DOM tree into an XML string
-Trusted Types API

See also on MDN

InsertAdjacentText(string, string)

The insertAdjacentText() method of the Element interface, given a relative position and a string, inserts a new text node at the given position relative to the element it is called from.

[Value("insertAdjacentText")]
public GlobalObject.Undefined InsertAdjacentText(string where, string data)

Parameters

where string
data string

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-InsertAdjacentElement(string, Element)
-InsertAdjacentHTML(string, Union88)

See also on MDN

Matches(string)

The matches() method of the Element interface tests whether the element would be selected by the specified CSS selector.

[Value("matches")]
public bool Matches(string selectors)

Parameters

selectors string

Returns

bool

true if the Element matches the selectors. Otherwise, false.

Remarks

-CSS selectors module
-Other Element methods that take selectors: Element.QuerySelector, Element.QuerySelectorAll, and Closest(string).

See also on MDN

Pseudo(string) 

[Value("pseudo")]
public CSSPseudoElement? Pseudo(string type)

Parameters

type string

Returns

CSSPseudoElement

ReleasePointerCapture(long)

The releasePointerCapture() method of the
Element interface releases (stops) pointer capture that was
previously set for a specific (PointerEvent) pointer.

[Value("releasePointerCapture")]
public GlobalObject.Undefined ReleasePointerCapture(long pointerId)

Parameters

pointerId long

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-HasPointerCapture(long)
-SetPointerCapture(long)
-Pointer events

See also on MDN

RemoveAttribute(string)

The Element method
removeAttribute() removes the attribute with the
specified name from the element.

[Value("removeAttribute")]
public GlobalObject.Undefined RemoveAttribute(string qualifiedName)

Parameters

qualifiedName string

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-HasAttribute(string)
-GetAttribute(string)
-SetAttribute(string, string)
-ToggleAttribute(string, bool)

See also on MDN

RemoveAttributeNS(string?, string)

The removeAttributeNS() method of the
Element interface removes the specified attribute with the specified namespace from an element.

[Value("removeAttributeNS")]
public GlobalObject.Undefined RemoveAttributeNS(string? namespace_, string localName)

Parameters

namespace_ string
localName string

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

If you are working with HTML and you don't need to specify the requested attribute as being part of a specific namespace, use the RemoveAttribute(string) method instead.

-HasAttributeNS(string?, string)
-GetAttributeNS(string?, string)
-SetAttributeNS(string?, string, string)

See also on MDN

RemoveAttributeNode(Attr)

The removeAttributeNode() method of the Element interface removes the specified Attr node from the element.

[Value("removeAttributeNode")]
public Attr RemoveAttributeNode(Attr attr)

Parameters

attr Attr

Returns

Attr

The attribute node that was removed.

Remarks

If you don't need to inspect the attribute node before removing it, you can use the RemoveAttribute(string) method instead.

-CreateAttribute(string)
-GetAttributeNode(string)
-SetAttributeNode(Attr)

See also on MDN

RequestFullscreen(FullscreenOptions)

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

[Value("requestFullscreen")]
public Task<GlobalObject.Undefined> RequestFullscreen(FullscreenOptions options = null)

Parameters

options FullscreenOptions

Returns

Task<GlobalObject.Undefined>

A Promise which is resolved with a value of undefined when
the transition to full screen is complete.

Remarks

It&apos;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 Elementfullscreenchange event to let it know that
it&apos;s now in full screen mode. If permission is denied, the promise is rejected and the
element receives a Elementfullscreenerror event instead. If the element has been
detached from the original document, then the document receives these events instead.

-Fullscreen API
-ExitFullscreen()
-Fullscreen
-Document.FullscreenElement
-:fullscreen
-allowfullscreen

See also on MDN

RequestPointerLock(PointerLockOptions)

The requestPointerLock() method of the Element interface lets you asynchronously ask for the pointer to be locked on the given element.

[Value("requestPointerLock")]
public Task<GlobalObject.Undefined> RequestPointerLock(PointerLockOptions options = null)

Parameters

options PointerLockOptions

Returns

Task<GlobalObject.Undefined>

A Promise that resolves with GlobalObject.Undefined.

Remarks

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

NOTE

In the current specification, requestPointerLock() only communicates the success or failure of the request by firing Documentpointerlockchange or Documentpointerlockerror events. A proposed update to the specification updates requestPointerLock() to return a Promise which communicates success or failure. This page documents the version that returns a Promise. However, note that this version is not yet a standard and is not implemented by all browsers. See Browser compatibility for more information.

-Document.PointerLockElement
-ExitPointerLock()
-Pointer Lock

See also on MDN

Scroll(ScrollToOptions)

The scroll() method of the Element
interface scrolls the element to a particular set of coordinates inside a given
element.

[Value("scroll")]
public GlobalObject.Undefined Scroll(ScrollToOptions options = null)

Parameters

options ScrollToOptions

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

See also on MDN

Scroll(double, double)

The scroll() method of the Element
interface scrolls the element to a particular set of coordinates inside a given
element.

[Value("scroll")]
public GlobalObject.Undefined Scroll(double x, double y)

Parameters

x double
y double

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

See also on MDN

ScrollBy(ScrollToOptions)

The scrollBy() method of the Element
interface scrolls an element by the given amount.

[Value("scrollBy")]
public GlobalObject.Undefined ScrollBy(ScrollToOptions options = null)

Parameters

options ScrollToOptions

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

See also on MDN

ScrollBy(double, double)

The scrollBy() method of the Element
interface scrolls an element by the given amount.

[Value("scrollBy")]
public GlobalObject.Undefined ScrollBy(double x, double y)

Parameters

x double
y double

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

See also on MDN

ScrollIntoView(Union21)

The Element interface's
scrollIntoView() method scrolls the element&apos;s ancestor
containers such that the element on which scrollIntoView() is called is
visible to the user.

[Value("scrollIntoView")]
public GlobalObject.Undefined ScrollIntoView(Union21 arg = default)

Parameters

arg Union21

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-Element.ScrollIntoViewIfNeeded {{non-standard_inline}}

See also on MDN

ScrollTo(ScrollToOptions)

The scrollTo() method of the Element
interface scrolls to a particular set of coordinates inside a given element.

[Value("scrollTo")]
public GlobalObject.Undefined ScrollTo(ScrollToOptions options = null)

Parameters

options ScrollToOptions

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-ScrollTop, ScrollLeft
-ScrollTo(ScrollToOptions)

See also on MDN

ScrollTo(double, double)

The scrollTo() method of the Element
interface scrolls to a particular set of coordinates inside a given element.

[Value("scrollTo")]
public GlobalObject.Undefined ScrollTo(double x, double y)

Parameters

x double
y double

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-ScrollTop, ScrollLeft
-ScrollTo(ScrollToOptions)

See also on MDN

SetAttribute(string, string)

The setAttribute() method of the Element interface sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

[Value("setAttribute")]
public GlobalObject.Undefined SetAttribute(string qualifiedName, string value)

Parameters

qualifiedName string
value string

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

To get the current value of an attribute, use GetAttribute(string); to remove an attribute, call RemoveAttribute(string).

If you need to work with the Attr node (such as cloning from another element) before adding it, you can use the SetAttributeNode(Attr) method instead.

-HasAttribute(string)
-GetAttribute(string)
-RemoveAttribute(string)
-ToggleAttribute(string, bool)

See also on MDN

SetAttributeNS(string?, string, string)

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

[Value("setAttributeNS")]
public GlobalObject.Undefined SetAttributeNS(string? namespace_, string qualifiedName, string value)

Parameters

namespace_ string
qualifiedName string
value string

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

If you are working with HTML documents and you don't need to specify the requested attribute as being part of a specific namespace, use the SetAttribute(string, string) method instead.

-HasAttributeNS(string?, string)
-GetAttributeNS(string?, string)
-RemoveAttributeNS(string?, string)

See also on MDN

SetAttributeNode(Attr)

The setAttributeNode() method of the Element interface adds a new Attr node to the specified element.

[Value("setAttributeNode")]
public Attr? SetAttributeNode(Attr attr)

Parameters

attr Attr

Returns

Attr

The replaced attribute node, if any, returned by this function.

Remarks

If you don't need to work with the attribute node (such as cloning from another element) before adding it, you can use the SetAttribute(string, string) method instead.

-CreateAttribute(string)
-GetAttributeNode(string)
-RemoveAttributeNode(Attr)

See also on MDN

SetAttributeNodeNS(Attr)

The setAttributeNodeNS() method of the Element interface adds a new namespaced Attr node to an element.

[Value("setAttributeNodeNS")]
public Attr? SetAttributeNodeNS(Attr attr)

Parameters

attr Attr

Returns

Attr

The replaced attribute node, if any, returned by this function.

Remarks

If you don't need to work with the attribute node (such as cloning from another element) before adding it, you can use the SetAttributeNS(string?, string, string) method instead.

If you are working with HTML documents and you don't need to specify the requested attribute as being part of a specific namespace, use the SetAttribute(string, string) method instead.

-CreateAttribute(string)
-CreateAttributeNS(string?, string)
-GetAttributeNodeNS(string?, string)

See also on MDN

SetHTMLUnsafe(Union85)

WARNING
This method parses its input as HTML, writing the result into the DOM.
APIs like this are known as injection sinks, and are potentially a vector for cross-site-scripting (XSS) attacks, if the input originally came from an attacker.
[Value("setHTMLUnsafe")]
public GlobalObject.Undefined SetHTMLUnsafe(Union85 html)

Parameters

html Union85

Returns

GlobalObject.Undefined

None (undefined).

Remarks

You can mitigate this risk by always passing TrustedHTML objects instead of strings and enforcing trusted types.
See Security considerations for more information.

NOTE

Element.SetHTML should almost always be used instead of this method — on browsers where it is supported — as it always removes XSS-unsafe HTML entities.

The setHTMLUnsafe() method of the Element interface is used to parse HTML input into a DocumentFragment, optionally filtering out unwanted elements and attributes, and those that don't belong in the context, and then using it to replace the element's subtree in the DOM.

-SetHTMLUnsafe(Union89)
-InnerHTML
-Document.ParseHTML and ParseHTMLUnsafe(Union57)

See also on MDN

SetPointerCapture(long)

The setPointerCapture() method of the
Element interface is used to designate a specific element as the
capture target of future pointer events. Subsequent events for the pointer will
be targeted at the capture element until capture is released (via
ReleasePointerCapture(long) or the
Elementpointerup event is fired).

[Value("setPointerCapture")]
public GlobalObject.Undefined SetPointerCapture(long pointerId)

Parameters

pointerId long

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

See pointer events for an overview and examples of how pointer capture works.

-HasPointerCapture(long)
-ReleasePointerCapture(long)
-Pointer events

See also on MDN

SpatialNavigationSearch(SpatialNavigationDirection, SpatialNavigationSearchOptions) 

[Value("spatialNavigationSearch")]
public Node? SpatialNavigationSearch(SpatialNavigationDirection dir, SpatialNavigationSearchOptions options = null)

Parameters

dir SpatialNavigationDirection
options SpatialNavigationSearchOptions

Returns

Node

ToggleAttribute(string, bool)

The toggleAttribute() method of the
Element interface toggles a Boolean attribute (removing it if it is
present and adding it if it is not present) on the given element.

[Value("toggleAttribute")]
public bool ToggleAttribute(string qualifiedName, bool force = false)

Parameters

qualifiedName string
force bool

Returns

bool

true if attribute name is eventually
present, and false otherwise.

Remarks

-HasAttribute(string)
-GetAttribute(string)
-RemoveAttribute(string)
-SetAttribute(string, string)

See also on MDN

WebkitMatchesSelector(string) 

[Value("webkitMatchesSelector")]
public bool WebkitMatchesSelector(string selectors)

Parameters

selectors string

Returns

bool
Edit this page