recursal/MDN huggingface dataset:
ExtendableCookieChangeEvent: deleted property
=============================================

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

The **`deleted`** read-only property of the `ExtendableCookieChangeEvent` interface returns any cookies that have been deleted by the given `ExtendableCookieChangeEvent` instance.

**Note:** This feature is available in Web Workers

Value
-----

An array of objects containing the deleted cookie(s). Each object contains the following properties:

`name`

A string containing the name of the cookie.

`value`

A string containing the value of the cookie.

`domain`

A string containing the domain of the cookie.

`path`

A string containing the path of the cookie.

`expires`

A timestamp, given as Unix time in milliseconds, containing the expiration date of the cookie.

`secure`

A `boolean` indicating whether the cookie is from a site with a secure context (HTTPS rather than HTTP).

`sameSite`

One of the following `SameSite` values:

`"strict"`

Cookies will only be sent in a first-party context and not be sent with requests initiated by third party websites.

`"lax"`

Cookies are not sent on normal cross-site subrequests (for example to load images or frames into a third party site), but are sent when a user is navigating within the origin site (i.e. when following a link).

`"none"`

Cookies will be sent in all contexts.


`partitioned`

A boolean indicating whether the cookie is a partitioned cookie (`true`) or not (`false`). See Cookies Having Independent Partitioned State (CHIPS) for more information.

Examples
--------

In this example when the cookie is deleted the event listener logs the first item in the `deleted` property to the console. It contains an object representing the cookie that has just been deleted.


```js
self.addEventListener("cookiechange", (event) => {
  console.log(event.deleted[0]);
});
```

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

| Specification |
| --- |
| Cookie Store API # dom-extendablecookiechangeevent-deleted |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MediaRecorderErrorEvent: MediaRecorderErrorEvent() constructor
==============================================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The
 **`MediaRecorderErrorEvent()`** constructor creates a new `MediaRecorderErrorEvent` object
 that represents an error that occurred during the recording of media
 by the MediaStream Recording API.


**Note:** In general, you won't create these yourself; they are delivered to your
 implementation of `onerror` when errors occur while
 recording media.


Syntax
------


```js
new MediaRecorderErrorEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `error`.


`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`error`

 A `DOMException` that describes the error that occurred. This
 object's `name` property should indicate the
 name of the error that occurred. The other fields may or may not be present.




**Note:** Some user agents add to the `error` object
 other properties that provide information such as stack dumps, the name of the
 JavaScript file and the line number where the error occurred, and other debugging
 aids, but you should not rely on this information in a production environment.


### Return value

A new `MediaRecorderErrorEvent` object.

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

This feature is no longer part of any specification, and longer on track to become standard.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebGLContextEvent: WebGLContextEvent() constructor
==================================================

The **`WebGLContextEvent()`** constructor creates a new `WebGLContextEvent` object.

**Note:** You typically don't need to call this constructor; the browser creates these objects automatically when WebGL context events get fired. To manually trigger a `webglcontextlost` event, use `WEBGL_lose_context.loseContext()`.

Syntax
------


```js
new WebGLContextEvent(type, options)
```

### Parameters

`type`

 A string indicating the type of the event.
 It is case-sensitive and should be one of `webglcontextcreationerror`, `webglcontextlost`, or `webglcontextrestored`.


`options` Optional

An object that, *in addition to the properties defined in `Event()`*, has the following properties:

`statusMessage` Optional

A string with additional status information. It defaults to the empty string (`""`).


### Return value

A new `WebGLContextEvent` object.

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

| Specification |
| --- |
| WebGL Specification # 5.15 |

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

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

See also
--------

* `webglcontextlost`
* `webglcontextrestored`
* `webglcontextcreationerror`
WebGLContextEvent: statusMessage property
=========================================

The read-only **`WebGLContextEvent.statusMessage`** property contains additional event status information, or is an empty string if no additional information is available.

Examples
--------

The `statusMessage` property can contain a platform dependent string with details of an event. This can occur, for example, if the `webglcontextcreationerror` event is fired.


```js
const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

canvas.addEventListener(
  "webglcontextcreationerror",
  (e) => {
    console.log(
      `WebGL context creation failed: ${e.statusMessage || "Unknown error"}`,
    );
  },
  false,
);
```

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

| Specification |
| --- |
| WebGL Specification # 5.15.1 |

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

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

See also
--------

* webglcontextcreationerror
CSSTransformComponent: toMatrix() method
========================================

 The **`toMatrix()`** method of the
 `CSSTransformComponent` interface returns a `DOMMatrix`
 object.

All transform functions can be represented mathematically as a 4x4 transformation matrix. This is explained in detail in Understanding the CSS Transforms matrix.

**Note:** The `is2D` property affects what transform, and therefore type of matrix that will be returned. CSS 2D and 3D transforms are different for legacy reasons. A brief explanation of 2D vs. 3D transforms can be found in Using CSS transforms.

Syntax
------


```js
toMatrix()
```

### Parameters

None.

### Return value

A `DOMMatrix` object

### Exceptions

`TypeError`

 Raised if any lengths involved in generating the matrix are not compatible units
 with px (such as relative lengths or percentages).


Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstransformcomponent-tomatrix |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSTransformComponent: toString() method
========================================

The **`toString()`** method of the `CSSTransformComponent` interface is a stringifier returning a CSS Transforms function.

Syntax
------


```js
toString()
```

### Parameters

None.

### Return value

A string in the form of a CSS `Transforms function`.

This will use the value of `is2D` to return either a 2D or 3D transform. For example if the component represents `CSSRotate` and `is2D` is false then the string returned will be in the form of the CSS transformation `rotate3D()` function. If true the string returned will be in the form of the 2-dimensional `rotate3D()` function.

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # CSSTransformComponent-stringification-behavior |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSTransformComponent: is2D property
====================================

The **`is2D`** read-only property of the `CSSTransformComponent` interface indicates where the transform is 2D or 3D.

Value
-----

 A boolean. True indicating the transform is a 2D transform, false if it is a 3D
 transform.

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-csstransformcomponent-is2d |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ReadableByteStreamController: desiredSize property
==================================================

The **`desiredSize`** read-only property of the `ReadableByteStreamController` interface returns the number of bytes required to fill the stream's internal queue to its "desired size".

 The value is used by the stream to indicate a preferred flow rate to the underlying source.
 Sources that support throttling or pausing their inflow of data (not all do!) should control the inflow such that `desiredSize` of the stream buffer is kept positive and as close to zero as possible.

The `desiredSize` is used to apply backpressure from downstream consumers.

Value
-----

An integer. Note that this can be negative if the queue is over-full.

The value will be `null` if the stream has errored and `0` if it is closed.

Examples
--------

The A readable stream with an underlying push source and backpressure support example in the spec provides a good example of using `desiredSize` to manually detect when the stream is full and apply backpressure.

While the example uses a default source, the concepts are exactly the same as for readable byte sources.

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

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-desired-size② |

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

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

See also
--------

* Using readable byte streams
* `ReadableByteStreamController`
ReadableByteStreamController: byobRequest property
==================================================

The **`byobRequest`** read-only property of the `ReadableByteStreamController` interface returns the current BYOB request, or `null` if there are no pending requests.

 An underlying byte source should check this property, and use it to write data to the stream if it exists (rather than using `ReadableByteStreamController.enqueue()`).
 This will result in an efficient zero-byte transfer of the data to the consumer.

Value
-----

A `ReadableStreamBYOBRequest` object instance, or `null`.

Examples
--------

The example in Using readable byte streams > Creating a readable socket push byte stream shows how you use a `byobRequest` to transfer data (if it exists), or otherwise copy the data to the stream's internal queues using `ReadableByteStreamController.enqueue()`.

 The relevant code is reproduced below.
 If the `byobRequest` exists, data is read into `controller.byobRequest.view`, and then `ReadableStreamBYOBRequest.respond()` is called to signal the amount of data that is ready to transfer.


```js
if (controller.byobRequest) {
  const v = controller.byobRequest.view;
  bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
  if (bytesRead === 0) {
    controller.close();
  }
  controller.byobRequest.respond(bytesRead);
} else {
  // Write to data using enqueue().
}
```

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

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-byob-request② |

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

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

See also
--------

* Using readable byte streams
* `ReadableByteStreamController`
ReadableByteStreamController: error() method
============================================

The **`error()`** method of the `ReadableByteStreamController` interface causes any future interactions with the associated stream to error with the specified reason.

 This is commonly called by an underlying source to surface an error from the interface where it gets its data (such as a file-read or socket error).
 It can also be called from elsewhere to trigger a stream error, for example if another part of the system that the stream relies on fails.

Syntax
------


```js
error(errorObject)
```

### Parameters

`errorObject`

Any object that you want future interactions to fail with.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

Thrown if the source object is not a `ReadableByteStreamController`, or the stream is not readable for some other reason.

Examples
--------

The example in Using readable byte streams > Creating a readable socket push byte stream shows how you might use `error()` to manually trigger a stream error if another part of the system it relies on fails.

 Specifically, the underlying source `start()` method calls `readRepeatedly()` to perform all setup operations and to make a request for data.
 This returns a promise.
 If there are any errors thrown when reading the data they will be caught by the chained `catch()` function.
 In `catch()` we then call `error()` on the controller, passing the reason from the underlying source.


```js
function start(controller) {
  readRepeatedly().catch((e) => controller.error(e));
}

function readRepeatedly() {
  return socket.select2().then(() => {
    // …
  });
}
```

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

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-error① |

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

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

See also
--------

* Using readable byte streams
ReadableByteStreamController: close() method
============================================

The **`close()`** method of the `ReadableByteStreamController` interface closes the associated stream.

This might be called by the underlying source when its data source has been exhausted/completed.

**Note:** Readers will still be able to read any previously-enqueued chunks from the stream, but once those are read, the stream will become closed.
 However if there is an outstanding and partially written `byobRequest` when `close()` is called, the stream will be errored.


Syntax
------


```js
close()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

Thrown if the source object is not a `ReadableByteStreamController`, it is already closed, or the stream is not readable for some other reason.

Examples
--------

The example in Using readable byte streams > Creating a readable socket push byte stream how we might close the stream when there is no more data.

 The relevant code is reproduced below.
 This relies on the hypothetical `readInto()` method returning 0 bytes only when there is no more data.


```js
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
if (bytesRead === 0) {
  controller.close();
}
```


 After calling close, the stream will be closed, and any consumers signalled.
 For example if using a `ReadableStreamBYOBReader` any `read()` requests would resolve with `done: true` and the promise from `ReadableStreamBYOBReader.closed` would also be resolved.

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

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-close① |

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

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

See also
--------

* Using readable byte streams
* `ReadableByteStreamController`
ReadableByteStreamController: enqueue() method
==============================================

The **`enqueue()`** method of the `ReadableByteStreamController` interface enqueues a given chunk on the associated readable byte stream (the chunk is copied into the stream's internal queues).

This should only be used to transfer data to the queue when `byobRequest` is `null`.

Syntax
------


```js
enqueue(chunk)
```

### Parameters

`chunk`

The chunk to enqueue.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

 Thrown if the source object is not a `ReadableByteStreamController`, or the stream cannot be read for some other reason, or the chunk is not an object, or the chunk's internal array buffer is non-existent, zero-length, or detached.
 It is also thrown if the stream has been closed.


Examples
--------

 The example in Using readable byte streams > Creating a readable socket push byte stream shows how you can use `enqueue()` to copy data to the stream if there is no outstanding `byobRequest`.
 If there is a `byobRequest` then it should be used!

The code below shows data being read into an `ArrayBuffer` using a "hypothetical" `socket.readInto()` method and then enqueued (but only if data was actually copied):


```js
const buffer = new ArrayBuffer(DEFAULT\_CHUNK\_SIZE);
bytesRead = socket.readInto(buffer, 0, DEFAULT\_CHUNK\_SIZE);
if (bytesRead === 0) {
  controller.close();
} else {
  controller.enqueue(new Uint8Array(buffer, 0, bytesRead));
}
```

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

| Specification |
| --- |
| Streams Standard # ref-for-rbs-controller-enqueue① |

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

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

See also
--------

* Using readable byte streams
* `ReadableByteStreamController`
CanvasCaptureMediaStreamTrack: canvas property
==============================================

The **`canvas`** read-only property of the `CanvasCaptureMediaStreamTrack` interface returns the `HTMLCanvasElement` from which frames are being captured.

Value
-----

An `HTMLCanvasElement` indicating the canvas, which is the source of the frames being captured.

Example
-------


```js
// Find the canvas element to capture
const canvasElt = document.querySelector("canvas");

// Get the stream
const stream = canvasElt.captureStream(25); // 25 FPS

// Do things to the stream
// …

// Obtain the canvas associated with the stream
const canvas = stream.canvas;
```

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

| Specification |
| --- |
| Media Capture from DOM Elements # dom-canvascapturemediastreamtrack-canvas |

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

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

See also
--------

* `HTMLCanvasElement.captureStream()` to create a stream to capture a
 given canvas element.
* `<canvas>`
CanvasCaptureMediaStreamTrack: requestFrame() method
====================================================

The **`requestFrame()`** method of the `CanvasCaptureMediaStreamTrack` interface requests that a frame be captured from the canvas and sent to the stream.

 Applications that need to carefully control
 the timing of rendering and frame capture can use `requestFrame()` to
 directly specify when it's time to capture a frame.

 To prevent automatic capture of frames, so that frames are only captured when
 `requestFrame()` is called, specify a value of 0 for the
 `captureStream()` method when creating
 the stream.

Syntax
------


```js
requestFrame()
```

### Return value

None (`undefined`).

Usage notes
-----------

 There is currently an issue flagged in the specification pointing out that at this
 time, no exceptions are being thrown if the canvas isn't origin-clean. This may change
 in the future, so it would be wise to plan ahead and watch for exceptions such as
 `SecurityError` (although the specific error that might be thrown is not
 mentioned in the spec, this is a likely candidate).

Example
-------


```js
// Find the canvas element to capture
const canvasElt = document.querySelector("canvas");

// Get the stream
const stream = canvasElt.captureStream(25); // 25 FPS

// Send the current state of the canvas as a frame to the stream
stream.getVideoTracks()[0].requestFrame();
```

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

| Specification |
| --- |
| Media Capture from DOM Elements # dom-canvascapturemediastreamtrack-requestframe |

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

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

See also
--------

* `CanvasCaptureMediaStreamTrack`, the interface it belongs to.
* `<canvas>`
How to create a DOM tree
========================

This page describes how to use the DOM API in JavaScript to create XML documents.

Consider the following XML document:


```xml
<?xml version="1.0"?>
<people>
  <person first-name="eric" middle-initial="H" last-name="jung">
    <address street="321 south st" city="denver" state="co" country="usa"/>
    <address street="123 main st" city="arlington" state="ma" country="usa"/>
  </person>

  <person first-name="jed" last-name="brown">
    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
    <address street="123 west st" city="seattle" state="wa" country="usa"/>
    <address street="321 south avenue" city="denver" state="co" country="usa"/>
  </person>
</people>
```


You can use the DOM API to create an in-memory representation of this document:


```js
const doc = document.implementation.createDocument("", "", null);
const peopleElem = doc.createElement("people");

const personElem1 = doc.createElement("person");
personElem1.setAttribute("first-name", "eric");
personElem1.setAttribute("middle-initial", "h");
personElem1.setAttribute("last-name", "jung");

const addressElem1 = doc.createElement("address");
addressElem1.setAttribute("street", "321 south st");
addressElem1.setAttribute("city", "denver");
addressElem1.setAttribute("state", "co");
addressElem1.setAttribute("country", "usa");
personElem1.appendChild(addressElem1);

const addressElem2 = doc.createElement("address");
addressElem2.setAttribute("street", "123 main st");
addressElem2.setAttribute("city", "arlington");
addressElem2.setAttribute("state", "ma");
addressElem2.setAttribute("country", "usa");
personElem1.appendChild(addressElem2);

const personElem2 = doc.createElement("person");
personElem2.setAttribute("first-name", "jed");
personElem2.setAttribute("last-name", "brown");

const addressElem3 = doc.createElement("address");
addressElem3.setAttribute("street", "321 north st");
addressElem3.setAttribute("city", "atlanta");
addressElem3.setAttribute("state", "ga");
addressElem3.setAttribute("country", "usa");
personElem2.appendChild(addressElem3);

const addressElem4 = doc.createElement("address");
addressElem4.setAttribute("street", "123 west st");
addressElem4.setAttribute("city", "seattle");
addressElem4.setAttribute("state", "wa");
addressElem4.setAttribute("country", "usa");
personElem2.appendChild(addressElem4);

const addressElem5 = doc.createElement("address");
addressElem5.setAttribute("street", "321 south avenue");
addressElem5.setAttribute("city", "denver");
addressElem5.setAttribute("state", "co");
addressElem5.setAttribute("country", "usa");
personElem2.appendChild(addressElem5);

peopleElem.appendChild(personElem1);
peopleElem.appendChild(personElem2);
doc.appendChild(peopleElem);
```


DOM trees can be:

* Queried using XPath expressions.
* Converted to strings using XMLSerializer.
* Posted to a web server using the Fetch API.
* Transformed using XSLT or XLink.
See also
--------

* XML
* XPath
* Parsing and serializing XML
* Fetch API