recursal/MDN huggingface dataset:
HTMLAreaElement: target property
================================

The **`target`** property of the `HTMLAreaElement` interface is a string that indicates where to display the linked resource.

It reflects the `target` attribute of the `<area>` element.

Value
-----

A string representing the target. Its value can be:

* The name of a `<frame>`.
* One of the keyword with specific values:`_blank`, `_self`, `_parent`, or `_top`.
Example
-------


```html
<map name="image-map">
  <area href="www.example.com" target="\_top" alt="left" />
</map>
```



```js
const areaElement = document.getElementsByName("image-map")[0].areas[0];
console.log(areaElement.target); // Output: "\_top"
```

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

| Specification |
| --- |
| HTML Standard # dom-area-target |

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

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

See also
--------

* `HTMLBaseElement.target` property
* `HTMLFormElement.target` property
* `HTMLAnchorElement.target` property
HTMLAreaElement: rel property
=============================

The **`HTMLAreaElement.rel`** property reflects the `rel` attribute. It is a string containing a space-separated list of link types indicating the relationship between the resource represented by the `<area>` element and the current document.

Value
-----

A string.

Examples
--------


```js
const areas = document.getElementsByTagName("area");
for (const area of areas) {
  console.log(`Rel: ${area.rel}`);
}
```

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

| Specification |
| --- |
| HTML Standard # dom-area-rel |

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

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

See also
--------

* The equivalent property on `<a>` and `<link>`,
 `HTMLAnchorElement.rel` and `HTMLLinkElement.rel`.
* The very same list but as tokens: `HTMLAreaElement.relList`
HTMLAreaElement: pathname property
==================================

 The **`HTMLAreaElement.pathname`** property is a
 string containing an initial `'/'` followed by the path of
 the URL not including the query string or fragment (or the empty string if there is no
 path).

Value
-----

A string.

Examples
--------


```js
// An <area id="myArea" href="/en-US/docs/HTMLAreaElement"> element is in the document
const area = document.getElementById("myArea");
area.pathname; // returns '/en-US/docs/HTMLAreaElement'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-pathname-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: search property
================================

 The **`HTMLAreaElement.search`** property is a search
 string, also called a *query string*, that is a string containing
 a `'?'` followed by the parameters of the URL.

 Modern browsers provide
 `URLSearchParams`
 and
 `URL.searchParams`
 to make it easy to parse out the parameters from the querystring.

Value
-----

A string.

Examples
--------

### Getting the search string from an area link


```js
// An <area id="myArea" href="/en-US/docs/HTMLAreaElement?q=123"> element is in the document
const area = document.getElementById("myArea");
area.search; // returns '?q=123'
```

### Advanced parsing using URLSearchParams

Alternatively, `URLSearchParams` can be used:


```js
let params = new URLSearchParams(queryString);
let q = parseInt(params.get("q")); // returns the number 123
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-search-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: hash property
==============================

 The
 **`HTMLAreaElement.hash`** property returns a
 string containing a `'#'` followed by the fragment
 identifier of the URL.

 The fragment is not URL decoded. If the URL does not
 have a fragment identifier, this property contains an empty string, `""`.

Value
-----

A string.

Examples
--------

### Getting the hash from an area link

Given this HTML


```html
<map name="infographic">
  <area
 id="mdn-circle"
 shape="circle"
 coords="130,136,60"
 href="https://developer.mozilla.org/#ExampleSection"
 alt="MDN" />
</map>

<img
 usemap="#infographic"
 src="/media/examples/mdn-info.png"
 alt="MDN infographic" />
```


you can get the hash of the area link like this:


```js
const area = document.getElementById("mdn-circle");
area.hash; // returns '#ExampleSection'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-hash-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: toString() method
==================================

 The **`HTMLAreaElement.toString()`** stringifier
 method returns a string containing the whole URL. It is a read-only
 version of `HTMLAreaElement.href`.

Syntax
------


```js
toString()
```

### Parameters

None.

### Return value

A string containing the element's complete URL.

Examples
--------

### Calling toString on an area element


```js
// An <area id="myArea" href="/en-US/docs/HTMLAreaElement"> element is in the document
const area = document.getElementById("myArea");
area.toString(); // returns 'https://developer.mozilla.org/en-US/docs/HTMLAreaElement'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-href-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: relList property
=================================

The **`HTMLAreaElement.relList`** read-only property reflects the `rel` attribute. It is a live `DOMTokenList` containing the set of link types indicating the relationship between the resource represented by the `<area>` element and the current document.

 The property itself is read-only, meaning you can't substitute the
 `DOMTokenList` by another one, but the content of the returned list can be
 changed.

Value
-----

A live `DOMTokenList` of strings.

Examples
--------


```js
const areas = document.getElementsByTagName("area");
const length = areas.length;

for (const area of areas) {
  console.log("New area found.");
  area.relList.forEach((relValue) => {
    console.log(relValue);
  });
}
```

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

| Specification |
| --- |
| HTML Standard # dom-area-rellist |

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

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

See also
--------

* The equivalent property on `<a>` and `<link>`,
 `HTMLAnchorElement.relList` and `HTMLLinkElement.relList`.
* The very same list but as a space-separated tokens in a string:
 `HTMLAreaElement.rel`
HTMLAreaElement: username property
==================================

 The **`HTMLAreaElement.username`** property is a
 string containing the username specified before the domain name.

Value
-----

A string.

Examples
--------

### Getting the username from an area link


```js
// An <area id="myArea" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAreaElement"> element is in the document
const area = document.getElementByID("myArea");
area.username; // returns 'anonymous'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-username-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: protocol property
==================================

 The
 **`HTMLAreaElement.protocol`**
 property is a string representing the protocol scheme of the URL,
 including the final `':'`.

Value
-----

A string.

Examples
--------

### Getting the protocol of an area link


```js
// An <area id="myArea" href="https://developer.mozilla.org/en-US/HTMLAreaElement"> element is in the document
const area = document.getElementById("myArea");
area.protocol; // returns 'https:'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-protocol-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: referrerPolicy property
========================================

 The
 **`HTMLAreaElement.referrerPolicy`**
 property reflect the HTML `referrerpolicy` attribute of the
 `<area>` element defining which referrer is sent when fetching the
 resource.

Value
-----

A string; one of the following:

`no-referrer`

 The `Referer` header will be omitted entirely. No referrer
 information is sent along with requests.


`no-referrer-when-downgrade`

 The URL is sent
 as a referrer when the protocol security level stays the same (e.g.HTTP→HTTP,
 HTTPS→HTTPS), but isn't sent to a less secure destination (e.g. HTTPS→HTTP).


`origin`

 Only send the origin of the document as the referrer in all cases.
 The document `https://example.com/page.html` will send the referrer
 `https://example.com/`.


`origin-when-cross-origin`

 Send a full URL when performing a same-origin request, but only send the origin of
 the document for other cases.


`same-origin`

 A referrer will be sent for same-site origins, but
 cross-origin requests will contain no referrer information.


`strict-origin`

 Only send the origin of the document as the referrer when the protocol security
 level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure
 destination (e.g. HTTPS→HTTP).


`strict-origin-when-cross-origin` (default)

 This is the user agent's default behavior if no policy is specified. Send a full URL when performing a same-origin request, only send the origin when the
 protocol security level stays the same (e.g. HTTPS→HTTPS), and send no header to a
 less secure destination (e.g. HTTPS→HTTP).


`unsafe-url`

 Send a full URL when performing a same-origin or cross-origin request. This policy
 will leak origins and paths from TLS-protected resources to insecure origins.
 Carefully consider the impact of this setting.


Examples
--------


```html
<img usemap="#mapAround" width="100" height="100" src="/img/logo@2x.png" />
<map id="myMap" name="mapAround" />>
```



```js
const elt = document.createElement("area");
elt.href = "/img2.png";
elt.shape = "rect";
elt.referrerPolicy = "no-referrer";
elt.coords = "0,0,100,100";
const map = document.getElementById("myMap");

map.appendChild(elt);
// When clicked, the area's link will not send a referrer header.
```

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

| Specification |
| --- |
| HTML Standard # dom-area-referrerpolicy |

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

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

See also
--------

* `HTMLImageElement.referrerPolicy`,
 `HTMLAnchorElement.referrerPolicy`, and
 `HTMLIFrameElement.referrerPolicy`.
WebTransportError: source property
==================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`source`** read-only property of the `WebTransportError` interface returns an enumerated value indicating the source of the error.

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

Value
-----

An enumerated value; can be either `stream` or `session`.

Examples
--------


```js
const url = "notaurl";

async function initTransport(url) {
  try {
    // Initialize transport connection
    const transport = new WebTransport(url);

    // The connection can be used once ready fulfills
    await transport.ready;

    // ...
  } catch (error) {
    const msg = `Transport initialization failed.
 Reason: ${error.message}.
 Source: ${error.source}.
 Error code: ${error.streamErrorCode}.`;
    console.log(msg);
  }
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransporterror-source |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransportError: WebTransportError() constructor
==================================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`WebTransportError()`** constructor creates a new `WebTransportError` object instance.

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

Syntax
------


```js
new WebTransportError(init)
```

### Parameters

`init` Optional

An object containing the following properties:

`message`

A string describing the error that has occurred.

`streamErrorCode`

A number in the range 0-255 indicating the application protocol error code for this error.


Examples
--------

A developer would not use this constructor manually. A new `WebTransportError` object is constructed when an error related to WebTransport occurs, for example a server error or network connection problem.


```js
const url = "notaurl";

async function initTransport(url) {
  try {
    // Initialize transport connection
    const transport = new WebTransport(url);

    // The connection can be used once ready fulfills
    await transport.ready;

    // ...
  } catch (error) {
    const msg = `Transport initialization failed.
 Reason: ${error.message}.
 Source: ${error.source}.
 Error code: ${error.streamErrorCode}.`;
    console.log(msg);
  }
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransporterror-webtransporterror |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
WebTransportError: streamErrorCode property
===========================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`streamErrorCode`** read-only property of the `WebTransportError` interface returns a number in the range 0-255 indicating the application protocol error code for this error, or `null` if one is not available.

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

Value
-----

A number, or `null`.

Examples
--------


```js
const url = "notaurl";

async function initTransport(url) {
  try {
    // Initialize transport connection
    const transport = new WebTransport(url);

    // The connection can be used once ready fulfills
    await transport.ready;

    // ...
  } catch (error) {
    const msg = `Transport initialization failed.
 Reason: ${error.message}.
 Source: ${error.source}.
 Error code: ${error.streamErrorCode}.`;
    console.log(msg);
  }
}
```

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

| Specification |
| --- |
| WebTransport # dom-webtransporterror-streamerrorcode |

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

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

See also
--------

* Using WebTransport
* WebSockets API
* Streams API
* WebTransport over HTTP/3
Path2D: Path2D() constructor
============================

 The **`Path2D()`** constructor returns a newly instantiated
 `Path2D` object, optionally with another path as an argument (creates a
 copy), or optionally with a string consisting of SVG path data.

Syntax
------


```js
new Path2D()
new Path2D(path)
new Path2D(d)
```

### Parameters

`path` Optional

 When invoked with another `Path2D` object, a copy of the
 `path` argument is created.


`d` Optional

 When invoked with a string consisting of SVG path data, a new path is created
 from that description.


Examples
--------

### Creating and copying paths

This example creates and copies a `Path2D` path.
```

<canvas id="canvas"></canvas>
```



```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let path1 = new Path2D();
path1.rect(10, 10, 100, 100);

let path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 \* Math.PI);

ctx.stroke(path2);
```

### Using SVG paths

 This example creates a `Path2D` path using SVG path data. The path will move to
 point (`M10 10`) and then move horizontally 80 points to the right
 (`h 80`), then 80 points down (`v 80`), then 80 points to the left
 (`h -80`), and then back to the start (`Z`).
```

<canvas id="canvas"></canvas>
```



```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);
```

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

| Specification |
| --- |
| HTML Standard # dom-path2d-dev |

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

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

See also
--------

* `Path2D`, the interface this constructor belongs to
Path2D: addPath() method
========================

 The **`Path2D.addPath()`** method
 of the Canvas 2D API adds one `Path2D` object to another
 `Path2D` object.

Syntax
------


```js
addPath(path)
addPath(path, transform)
```

### Parameters

`path`

A `Path2D` path to add.

`transform` Optional

 A `DOMMatrix` to be used as the transformation matrix for the path that
 is added. (Technically a `DOMMatrixInit` object).


### Return value

None (`undefined`).

Examples
--------

### Adding a path to an existing path

This example adds one path to another.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript

 First, we create two separate `Path2D` objects, each of which contains a
 rectangle made using the `rect()`
 method. We then create a matrix using `DOMMatrix()`. We then add the second path to the first using
 `addPath()`, also applying the matrix to move the second path to the right.
 Finally, we draw the first path (which now contains both rectangles) using
 `fill()`.


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create first path and add a rectangle
let p1 = new Path2D();
p1.rect(0, 0, 100, 150);

// Create second path and add a rectangle
let p2 = new Path2D();
p2.rect(0, 0, 100, 75);

// Create transformation matrix that moves 200 points to the right
let m = new DOMMatrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = 200;
m.f = 0;

// Add second path to the first path
p1.addPath(p2, m);

// Draw the first path
ctx.fill(p1);
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-path2d-addpath-dev |

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

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

See also
--------

* The interface defining this method: `Path2D`
WaveShaperNode: oversample property
===================================

The `oversample` property of the `WaveShaperNode` interface is an enumerated value indicating if oversampling must be used. Oversampling is a technique for creating more samples (up-sampling) before applying a distortion effect to the audio signal.

Once applied, the number of samples is reduced to its initial numbers. This leads to better results by avoiding some aliasing, but comes at the expense of a lower precision shaping curve.

The possible `oversample` values are:

| Value | Effect |
| --- | --- |
| `'none'` | Do not perform any oversampling. |
| `'2x'` | Double the amount of samples before applying the shaping curve. |
| `'4x'` | Multiply by 4 the amount of samples before applying the shaping curve. |

Value
-----

One of `'none'`, `'2x'`, or `'4x'`.

Examples
--------

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

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

| Specification |
| --- |
| Web Audio API # dom-waveshapernode-oversample |

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

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

See also
--------

* Using the Web Audio API
WaveShaperNode: WaveShaperNode() constructor
============================================

 The **`WaveShaperNode()`** constructor
 of the Web Audio API creates a new
 `WaveShaperNode` object which is an `AudioNode` that
 represents a non-linear distorter.

Syntax
------


```js
new WaveShaperNode(context, options)
```

### Parameters

`context`

A reference to an `AudioContext`.

`options` Optional

Options are as follows:

`curve`

 The shaping curve used for the waveshaping effect. The input
 signal is nominally within the range [-1;1].


`oversample`

 Specifies what type of oversampling (if any) should be
 used when applying the shaping curve. Valid values are '`none`',
 '`2x`', or '`4x`'. The default is '`none`'.


`channelCount`

 Represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node. (See
 `AudioNode.channelCount` for more information.) Its usage and precise
 definition depend on the value of `channelCountMode`.


`channelCountMode`

 Represents an enumerated value describing the way channels must be matched between
 the node's inputs and outputs. (See `AudioNode.channelCountMode` for more
 information including default values.)


`channelInterpretation`

 Represents an enumerated value describing the meaning of the channels. This
 interpretation will define how audio up-mixing and down-mixing will happen.
 The possible values are `"speakers"` or `"discrete"`. (See
 `AudioNode.channelCountMode` for more information including default
 values.)



### Return value

A new `WaveShaperNode` object instance.

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

| Specification |
| --- |
| Web Audio API # dom-waveshapernode-waveshapernode |

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

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

The `curve` property of the `WaveShaperNode` interface is a `Float32Array` of numbers describing the distortion to apply.

The mid-element of the array is applied to any signal value of `0`, the first one to signal values of `-1`, and the last to signal values of `1`; values lower than `-1` or greater than `1` are treated like `-1` or `1` respectively.

If necessary, intermediate values of the distortion curve are linearly interpolated.

**Note:** The array can be a `null` value: in that case, no distortion is applied to the input signal.

Value
-----

A `Float32Array`.

Examples
--------

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

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

| Specification |
| --- |
| Web Audio API # dom-waveshapernode-curve |

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

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

See also
--------

* Using the Web Audio API