recursal/MDN huggingface dataset:
SVGRectElement
==============

The `SVGRectElement` interface provides access to the properties of `<rect>` elements, as well as methods to manipulate them.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGGeometryElement

SVGRectElementInstance properties
-------------------

*This interface also inherits properties from its parent, `SVGGeometryElement`.*

`SVGRectElement.x` Read only 

Returns an `SVGAnimatedLength` corresponding to the `x` attribute of the given `<rect>` element.

`SVGRectElement.y` Read only 

Returns an `SVGAnimatedLength` corresponding to the `y` attribute of the given `<rect>` element.

`SVGRectElement.width` Read only 

Returns an `SVGAnimatedLength` corresponding to the `width` attribute of the given `<rect>` element.

`SVGRectElement.height` Read only 

Returns an `SVGAnimatedLength` corresponding to the `height` attribute of the given `<rect>` element.

`SVGRectElement.rx` Read only 

Returns an `SVGAnimatedLength` corresponding to the `rx` attribute of the given `<rect>` element.

`SVGRectElement.ry` Read only 

Returns an `SVGAnimatedLength` corresponding to the `ry` attribute of the given `<rect>` element.

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from its parent, `SVGGeometryElement`.*

Examples
--------

### Changing the color of an SVG rectangle

This example sets the fill color of an `SVGRectElement` to a random value whenever the user clicks it.

#### HTML


```html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect
 width="300"
 height="100"
 id="myrect"
 style="fill:rgb(0 0 255);stroke-width:1;stroke:rgb(0 0 0)" />
  <text x="60" y="40" fill="white" font-size="40">Click Me</text>
</svg>
```


#### JavaScript


```js
const myRect = document.querySelector("#myrect");

myRect.addEventListener("click", () => {
  const r = Math.floor(Math.random() \* 255);
  const g = Math.floor(Math.random() \* 255);
  const b = Math.floor(Math.random() \* 255);
  myRect.style.fill = `rgb(${r} ${g} ${b})`;
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGRectElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<rect>`
SubmitEvent
===========

The **`SubmitEvent`** interface defines the object used to represent an HTML form's `submit` event. This event is fired at the `<form>` when the form's submit action is invoked.

Event

SubmitEventConstructor
-----------

`SubmitEvent()`

Creates and returns a new `SubmitEvent` object whose `type` and other options are configured as specified. Note that currently the only valid `type` for a `SubmitEvent` is `submit`.

Instance properties
-------------------

*In addition to the properties listed below, this interface inherits the properties of its parent interface, `Event`.*

`submitter` Read only 

An `HTMLElement` object which identifies the button or other element which was invoked to trigger the form being submitted.

Instance methods
----------------

*While `SubmitEvent` offers no methods of its own, it inherits any specified by its parent interface, `Event`.*

Examples
--------

In this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or maximum shopping card totals established by the payment processors. Each of the submit elements' `id` is used to identify which payment processor the button corresponds to.


```js
let form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  let submitter = event.submitter;
  let handler = submitter.id;

  if (handler) {
    processOrder(form, handler);
  } else {
    showAlertMessage(
      "An unknown or unaccepted payment type was selected. Please try again.",
      "OK",
    );
  }
});
```


The handler ID is obtained by using the `submit` event's `submitter` property to get the submit button, from which we then get the ID. With that in hand, we can call a `processOrder()` function to handle the order, passing along the form and the handler ID.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-submitevent-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGEllipseElement
=================

The **`SVGEllipseElement`** interface provides access to the properties of `<ellipse>` elements.

EventTarget

Node

Element

SVGElement

SVGGraphicsElement

SVGGeometryElement

SVGEllipseElementInstance properties
-------------------

*This interface also inherits properties from its parent interface, `SVGGeometryElement`.*

`SVGEllipseElement.cx` Read only 

This property returns a `SVGAnimatedLength` reflecting the `cx` attribute of the given `<ellipse>` element.

`SVGEllipseElement.cy` Read only 

This property returns a `SVGAnimatedLength` reflecting the `cy` attribute of the given `<ellipse>` element.

`SVGEllipseElement.rx` Read only 

This property returns a `SVGAnimatedLength` reflecting the `rx` attribute of the given `<ellipse>` element.

`SVGEllipseElement.ry` Read only 

This property returns a `SVGAnimatedLength` reflecting the `ry` attribute of the given `<ellipse>` element.

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGGeometryElement`.*

Example
-------

### SVG


```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse
 cx="100"
 cy="100"
 rx="100"
 ry="60"
 id="ellipse"
 onclick="outputSize();" />
</svg>
```

### JavaScript


```js
function outputSize() {
  const ellipse = document.getElementById("ellipse");

  // Outputs "horizontal radius: 100 vertical radius: 60"
  console.log(
    `horizontal radius: ${ellipse.rx.baseVal.valueAsString}`,
    `vertical radius: ${ellipse.ry.baseVal.valueAsString}`,
  );
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGEllipseElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<ellipse>` SVG Element
WindowSharedStorage
===================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`WindowSharedStorage`** interface of the Shared Storage API represents the shared storage for a particular origin within a standard browsing context.

`WindowSharedStorage` is accessed via `Window.sharedStorage`.

SharedStorage

WindowSharedStorageInstance properties
-------------------

`worklet` 
Experimental

Contains the `SharedStorageWorklet` instance representing the shared storage worklet for the current origin. `SharedStorageWorklet` includes the `addModule()` method, which is used to add a module to the shared storage worklet.

Instance methods
----------------

*`WindowSharedStorage` inherits properties from its parent interface, `SharedStorage`.*

`run()` 
Experimental

Executes a Run output gate operation that has been registered in a module added to the `SharedStorageWorklet` of the current origin.

`selectURL()` 
Experimental

Executes a URL Selection output gate operation that has been registered in a module added to the `SharedStorageWorklet` of the current origin.

Examples
--------


```js
// Randomly assigns a user to a group 0 or 1
function getExperimentGroup() {
  return Math.round(Math.random());
}

async function injectContent() {
  // Add the module to the shared storage worklet
  await window.sharedStorage.worklet.addModule("ab-testing-worklet.js");

  // Assign user to a random group (0 or 1) and store it in shared storage
  window.sharedStorage.set("ab-testing-group", getExperimentGroup(), {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation
  const fencedFrameConfig = await window.sharedStorage.selectURL(
    "ab-testing",
    [
      { url: `https://your-server.example/content/default-content.html` },
      { url: `https://your-server.example/content/experiment-content-a.html` },
    ],
    {
      resolveToConfig: true,
    },
  );

  // Render the chosen URL into a fenced frame
  document.getElementById("content-slot").config = fencedFrameConfig;
}

injectContent();
```


See the Shared Storage API landing page for a walkthrough of this example and links to other examples.

Specifications
--------------

| Specification |
| --- |
| Shared Storage API # windowsharedstorage |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Shared Storage API
SVGMaskElement
==============

The **`SVGMaskElement`** interface provides access to the properties of `<mask>` elements, as well as methods to manipulate them.

EventTarget

Node

Element

SVGElement

SVGMaskElementInstance properties
-------------------

*This interface also inherits properties from its parent, `SVGElement`.*

`SVGMaskElement.maskUnits` Read only 

An `SVGAnimatedEnumeration` corresponding to the `maskUnits` attribute of the given `<mask>` element. Takes one of the constants defined in `SVGUnitTypes`.

`SVGMaskElement.maskContentUnits` Read only 

An `SVGAnimatedEnumeration` corresponding to the `maskContentUnits` attribute of the given `<mask>` element. Takes one of the constants defined in `SVGUnitTypes`.

`SVGMaskElement.x` Read only 

An `SVGAnimatedLength` corresponding to the `x` attribute of the given `<mask>` element.

`SVGMaskElement.y` Read only 

An `SVGAnimatedLength` corresponding to the `y` attribute of the given `<mask>` element.

`SVGMaskElement.width` Read only 

An `SVGAnimatedLength` corresponding to the `width` attribute of the given `<mask>` element.

`SVGMaskElement.height` Read only 

An `SVGAnimatedLength` corresponding to the `height` attribute of the given `<mask>` element.

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.*

Specifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # InterfaceSVGMaskElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `<mask>`
DecompressionStream
===================

The **`DecompressionStream`** interface of the Compression Streams API is an API for decompressing a stream of data.

Constructor
-----------

`DecompressionStream()`

Creates a new `DecompressionStream`

Instance properties
-------------------

`DecompressionStream.readable`

Returns the `ReadableStream` instance controlled by this object.

`DecompressionStream.writable`

Returns the `WritableStream` instance controlled by this object.

Examples
--------

In this example a blob is decompressed using gzip compression.


```js
const ds = new DecompressionStream("gzip");
const decompressedStream = blob.stream().pipeThrough(ds);
```

Specifications
--------------

| Specification |
| --- |
| Compression Streams # decompression-stream |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DragEvent
=========

The **`DragEvent`** interface is a `DOM event` that represents a drag and drop interaction. The user initiates a drag by placing a pointer device (such as a mouse) on the touch surface and then dragging the pointer to a new location (such as another DOM element). Applications are free to interpret a drag and drop interaction in an application-specific way.

This interface inherits properties from `MouseEvent` and `Event`.

Event

UIEvent

MouseEvent

DragEventInstance properties
-------------------

`DragEvent.dataTransfer` Read only 

The data that is transferred during a drag and drop interaction.

Constructors
------------

Although this interface has a constructor, it is not possible to create a useful DataTransfer object from script, since `DataTransfer` objects have a processing and security model that is coordinated by the browser during drag-and-drops.

`DragEvent()`

Creates a synthetic and untrusted DragEvent.

Event types
-----------

`drag`

This event is fired when an element or text selection is being dragged.

`dragend`

This event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).

`dragenter`

This event is fired when a dragged element or text selection enters a valid drop target.

`dragleave`

This event is fired when a dragged element or text selection leaves a valid drop target.

`dragover`

This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than `mouseover` ).

`dragstart`

This event is fired when the user starts dragging an element or text selection.

`drop`

This event is fired when an element or text selection is dropped on a valid drop target.

Example
-------

An Example of each property, constructor, event type and global event handlers is included in their respective reference page.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # the-dragevent-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Drag and drop
* Drag Operations
* Recommended Drag Types
* DataTransfer test - Paste or Drag
ClipboardItem
=============

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`ClipboardItem`** interface of the Clipboard API represents a single item format, used when reading or writing clipboard data using `clipboard.read()` and `clipboard.write()` respectively.

The benefit of having the **`ClipboardItem`** interface to represent data, is that it enables developers to cope with the varying scope of file types and data.

**Note:** To work with text see the `Clipboard.readText()` and `Clipboard.writeText()` methods of the `Clipboard` interface.

Constructor
-----------

`ClipboardItem()`

Creates a new **`ClipboardItem`** object, with the MIME type as the key and `Blob` as the value.

Instance properties
-------------------

*This interface provides the following properties.*

`types` Read only 

Returns an `Array` of MIME types available within the **`ClipboardItem`**.

`presentationStyle` Read only 

Returns one of the following: `"unspecified"`, `"inline"` or `"attachment"`.

Instance methods
----------------

*This interface defines the following methods.*

`getType()`

Returns a `Promise` that resolves with a `Blob` of the requested MIME type, or an error if the MIME type is not found.

Examples
--------

### Writing to the clipboard

Here we're writing a new `ClipboardItem()` to the system clipboard by requesting a PNG image using the `Fetch API`, and in turn, the `responses' blob()` method, to create the new `ClipboardItem`.


```js
async function writeClipImg() {
  try {
    const imgURL = "/myimage.png";
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    console.log("Fetched image copied.");
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

### Reading from the clipboard

 Here we're returning all items on the clipboard via the `clipboard.read()` method.
 Then utilizing the `ClipboardItem.types` property to set the `getType()` argument and return the corresponding blob object.


```js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Clipboard API and events # clipboarditem |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Clipboard API
* Image support for Async Clipboard article
SyncEvent
=========

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`SyncEvent`** interface of the Background Synchronization API represents a sync action that is dispatched on the `ServiceWorkerGlobalScope` of a ServiceWorker.

This interface inherits from the `ExtendableEvent` interface.

Event

ExtendableEvent

SyncEventConstructor
-----------

`SyncEvent()` 
Experimental

Creates a new `SyncEvent` object.

Instance properties
-------------------

*Inherits properties from its parent, `ExtendableEvent` and `Event`*.

`SyncEvent.tag` Read only  
Experimental

Returns the developer-defined identifier for this `SyncEvent`.

`SyncEvent.lastChance` Read only  
Experimental

Returns `true` if the user agent will not make further synchronization attempts after the current attempt.

Instance methods
----------------

*Inherits methods from its parent, `ExtendableEvent` and `Event`*.

None.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVGAnimatedLengthList
=====================

SVG animated length list interface
----------------------------------

The `SVGAnimatedLengthList` interface is used for attributes of type `SVGLengthList` which can be animated.

### Interface overview

|  |  |
| --- | --- |
| Also implement | *None* |
| Methods | *None* |
| Properties | * readonly `SVGLengthList`
`baseVal`
* readonly `SVGLengthList`
`animVal`
 |
| Normative document | SVG 1.1 (2nd Edition) |

Instance properties
-------------------

| Name | Type | Description |
| --- | --- | --- |
| `baseVal` | `SVGLengthList` | The base value of the given attribute before applying any animations. |
| `animVal` | `SVGLengthList` | 
 A read only `SVGLengthList` representing the
 current animated value of the given attribute. If the given attribute is
 not currently being animated, then the
 `SVGLengthList` will have the same contents as
 `baseVal`. The object referenced by `animVal` will
 always be distinct from the one referenced by `baseVal`, even
 when the attribute is not animated.
  |

Instance methods
----------------

The `SVGAnimatedLengthList` interface do not provide any specific methods.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ChannelSplitterNode
===================

The `ChannelSplitterNode` interface, often used in conjunction with its opposite, `ChannelMergerNode`, separates the different channels of an audio source into a set of mono outputs. This is useful for accessing each channel separately, e.g. for performing channel mixing where gain must be separately controlled on each channel.

![Default channel splitter node with a single input splitting to form 6 mono outputs.](/en-US/docs/Web/API/ChannelSplitterNode/webaudiosplitter.png)

If your `ChannelSplitterNode` always has one single input, the amount of outputs is defined by a parameter on its constructor and the call to `AudioContext.createChannelSplitter()`. In the case that no value is given, it will default to `6`. If there are fewer channels in the input than there are outputs, supernumerary outputs are silent.

EventTarget

AudioNode

ChannelSplitterNode

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | variable; default to `6`. |
| Channel count mode | `"explicit"` Older implementations, as per earlier versions
 of the spec use `"max"`.
  |
| Channel count | 
 Fixed to the number of outputs. Older implementations, as per earlier
 versions of the spec use `2` (not used in the default count
 mode).
  |
| Channel interpretation | `"discrete"` |

Constructor
-----------

`ChannelSplitterNode()`

Creates a new `ChannelSplitterNode` object instance.

Instance properties
-------------------

*No specific property; inherits properties from its parent, `AudioNode`*.

Instance methods
----------------

*No specific method; inherits methods from its parent, `AudioNode`*.

Example
-------

See `BaseAudioContext.createChannelSplitter()` for example code.

Specifications
--------------

| Specification |
| --- |
| Web Audio API # ChannelSplitterNode |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using the Web Audio API
HTMLLabelElement
================

The **`HTMLLabelElement`** interface gives access to properties specific to `<label>` elements. It inherits methods and properties from the base `HTMLElement` interface.

EventTarget

Node

Element

HTMLElement

HTMLLabelElementInstance properties
-------------------

*Inherits properties from its parent, `HTMLElement`.*

`HTMLLabelElement.control` Read only 

A `HTMLElement` representing the control with which the label is associated.

`HTMLLabelElement.form` Read only 

A `HTMLFormElement` object representing the form with which the labeled control is associated, or `null` if there is no associated control, or if that control isn't associated with a form. In other words, this is just a shortcut for `HTMLLabelElement.control.form`.

`HTMLLabelElement.htmlFor`

A string containing the ID of the labeled control. This reflects the `for` attribute.


**Note:** To programmatically set the `for` attribute, use `htmlFor`.

Instance methods
----------------

*No specific methods; inherits methods from its parent, `HTMLElement`.*

Specifications
--------------

| Specification |
| --- |
| HTML Standard # htmllabelelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The HTML element implementing this interface: `<label>`
* `<form>`
* `HTMLFormElement`