recursal/MDN huggingface dataset:
Storage: getItem() method
=========================

 The **`getItem()`** method of the `Storage`
 interface, when passed a key name, will return that key's value, or `null` if
 the key does not exist, in the given `Storage` object.

Syntax
------


```js
getItem(keyName)
```

### Parameters

`keyName`

 A string containing the name of the key you want to retrieve the
 value of.


### Return value

 A string containing the value of the key. If the key does not exist,
 `null` is returned.

Examples
--------

 The following function retrieves three data items from local storage, then uses them to
 set custom styles on a page.


```js
function setStyles() {
  const currentColor = localStorage.getItem("bgcolor");
  const currentFont = localStorage.getItem("font");
  const currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = `#${currentColor}`;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**Note:** To see this used within a real-world example, see our Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-getitem-dev |

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

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

See also
--------

* Storage.setItem()
* Using the Web Storage API
Storage: length property
========================

 The **`length`** read-only property of the
 `Storage` interface returns the number of data items stored in a given
 `Storage` object.

Value
-----

The number of items stored in the `Storage` object.

Examples
--------

 The following function adds three data items to the local storage for the current
 domain, then returns the number of items in the storage:


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "yellow");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "cats.png");

  return localStorage.length; // Should return 3
}
```


**Note:** For a real-world example, see our Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-length-dev |

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

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

See also
--------

* Using the Web Storage API
Storage: clear() method
=======================

 The **`clear()`** method of the `Storage`
 interface clears all keys stored in a given `Storage` object.

Syntax
------


```js
clear()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

 The following function creates three data entries in local storage, and then deletes
 them by using `clear()`.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "miGato.png");

  localStorage.clear();
}
```


**Note:** For a real-world example, see our Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-clear-dev |

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

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

See also
--------

Using the Web Storage API
TextTrack: cuechange event
==========================

The **`cuechange`** event fires when a `TextTrack` has changed the currently displaying cues. The event is fired on both the `TextTrack` and the `HTMLTrackElement` in which it's being presented, if any.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("cuechange", (event) => {});

oncuechange = (event) => {};
```

Event type
----------

A generic `Event` with no added properties.

Examples
--------

You can set up a listener for the `cuechange` event on a `TextTrack` using the `addEventListener()` method:


```js
track.addEventListener("cuechange", () => {
  const cues = track.activeCues; // array of current cues
  // …
});
```


Or you can set the `oncuechange` event handler property:


```js
track.oncuechange = (event) => {
  let cues = track.activeCues; // array of current cues
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-cuechange |
| HTML Standard # handler-texttrack-oncuechange |

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

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

See also
--------

* WebVTT
* The same event on `HTMLTrackElement`: `cuechange`
TextTrack: kind property
========================

The **`kind`** read-only property of the `TextTrack` interface returns the kind of text track this object represents. This decides how the track will be handled by a user agent.

Value
-----

A string. One of:

`"subtitles"`

The cues are overlaid on the video. Positioning of the cues is controlled using the properties of an object that inherits from `TextTrackCue`, for example `VTTCue`.

`"captions"`

The cues are overlaid on the video. Positioning of the cues is controlled using the properties of an object that inherits from `TextTrackCue`, for example `VTTCue`.

`"descriptions"`

The cues are made available in a non-visual fashion.

`"chapters"`

The user agent will make available a mechanism to navigate by selecting a cue.

`"metadata"`

Additional data related to the media data, which could be used for interactive views.

Examples
--------

In the following example the value of `kind` is printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.kind);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-kind-dev |

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

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

The **`activeCues`** read-only property of the `TextTrack` interface returns a `TextTrackCueList` object listing the currently active cues.

Value
-----

A `TextTrackCueList` object.

Examples
--------

The following example adds a new `TextTrack` to a video. The `activeCues` are printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.activeCues);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-activecues-dev |

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

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

The **`removeCue()`** method of the `TextTrack` interface removes a cue from the list of cues.

Syntax
------


```js
removeCue(cue)
```

### Parameters

`cue`

A `TextTrackCue`.

### Return value

Undefined.

### Exceptions

`NotFoundError` `DOMException`

Thrown if the given cue is not found in the list of cues.


**Note:** The `TextTrackCue` interface is an abstract class used as the parent for other cue interfaces such as `VTTCue`. Therefore, when removing a cue you will be passing in one of the cue types that inherit from `TextTrackCue`.

Examples
--------

In the following example a cue is added to a video text track using `addCue()`, then removed using `removeCue`.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
let cue = new VTTCue(0, 0.9, "Hildy!");
track.addCue(cue);
track.removeCue(cue);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-removecue-dev |

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

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

The **`cues`** read-only property of the `TextTrack` interface returns a `TextTrackCueList` object containing all of the track's cues.

Value
-----

A `TextTrackCueList` object.

Examples
--------

In the following example two cues are added to a video text track using `addCue()`. The value of `cues` is printed to the console. The returned `TextTrackCueList` object contains the two cues.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
console.log(track.cues);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-cues-dev |

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

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

The **`inBandMetadataTrackDispatchType`** read-only property of the `TextTrack` interface returns the text track's in-band metadata dispatch type of the text track represented by the `TextTrack` object.

An in-band metadata dispatch type is a string extracted from a media resource specifically for in-band metadata tracks. An example of a media resource that might have such tracks is a TV station streaming a broadcast on the web. Text Tracks may be used to include metadata for ad targeting, additional information such as recipe data during a cooking show, or trivia game data during a game show.

The value of this attribute could be used to attach these tracks to dedicated script modules as they are loaded.

Value
-----

A string containing the `inBandMetadataTrackDispatchType`, or an empty string.

Examples
--------

In the following example the value of `inBandMetadataTrackDispatchType` is printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.inBandMetadataTrackDispatchType);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-label-dev |

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

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

The **`addCue()`** method of the `TextTrack` interface adds a new cue to the list of cues.

Syntax
------


```js
addCue(cue)
```

### Parameters

`cue`

A `TextTrackCue`.


**Note:** The `TextTrackCue` interface is an abstract class used as the parent for other cue interfaces such as `VTTCue`. Therefore, when adding a cue you will be using one of the cue types that inherit from `TextTrackCue`.

### Return value

Undefined.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the rules for this `TextTrackList` do not match those that are appropriate for the incoming `TextTrackCue`.

Examples
--------

In the following example two cues are added to a video text track using `addCue()`.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-addcue-dev |

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

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

The **`language`** read-only property of the `TextTrack` interface returns the language of the text track.

This uses the same values as the HTML `lang` attribute. These values are documented in RFC 5646: Tags for Identifying Languages (also known as BCP 47).

Value
-----

A string containing a language identifier. For example, `"en-US"` for United States English or `"pt-BR"` for Brazilian Portuguese.

Examples
--------

In the following example the value of `language` is printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en-US");
track.mode = "showing";
console.log(track.language);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-language-dev |

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

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

The **`id`** read-only property of the `TextTrack` interface returns the ID of the track if it has one.

Value
-----

A string containing the ID, or an empty string.

Examples
--------

In the following example the value of `id` is printed to the console.


```js
const video = document.querySelector("video");
const track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.id);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-id-dev |

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

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

The **`label`** read-only property of the `TextTrack` interface returns a human-readable label for the text track, if it is available.

Value
-----

A string containing the `label`, or an empty string.

Examples
--------

In the following example the value of `label` is printed to the console.


```js
let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
console.log(track.label);
```

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

| Specification |
| --- |
| HTML Standard # dom-texttrack-label-dev |

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

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

 The read-only `XRViewport` interface's
 **`x`** property indicates the offset from the left edge of
 the destination surface (typically a `XRWebGLLayer` to the left edge of
 the viewport within the surface into which WebXR content is to be rendered. The
 viewport's `y` property identifies the `y`
 component of the origin, and its is given by the `width` and `height` properties.

Value
-----

 The offset from the left edge of the rendering surface to the left edge of the
 viewport, in pixels.

Examples
--------

See the main `XRViewport` page for examples.

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

| Specification |
| --- |
| WebXR Device API # dom-xrviewport-x |

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

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

 The read-only `XRViewport` property
 **`height`** specifies the height, in pixels, of the viewport
 onto the drawing surface within which the WebXR view is to be rendered. Along
 with `width` and the origin point given by
 `x` and `y`, this defines the
 area within which rendered content will be drawn.

Value
-----

The viewport's height in pixels.

Examples
--------

See the main `XRViewport` page for examples.

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

| Specification |
| --- |
| WebXR Device API # dom-xrviewport-height |

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

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

 The read-only `XRViewport` interface's
 **`y`** property indicates the offset from the bottom edge of
 the destination surface (typically a `XRWebGLLayer` to the bottom edge of
 the viewport within the surface into which WebXR content is to be rendered. The
 viewport's `x` property identifies the `x`
 component of the origin, and its is given by the `width` and `height` properties.

Value
-----

 The offset from the bottom edge of the rendering surface to the bottom edge of the
 viewport, in pixels.


**Note:** Although other web APIs typically consider the `y`
 axis to begin at the top and grow larger progressing downward, WebGL reverses this,
 with `y` growing larger as it goes upward on the screen.


Examples
--------

See the main `XRViewport` page for examples.

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

| Specification |
| --- |
| WebXR Device API # dom-xrviewport-y |

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

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

 The read-only `XRViewport` property
 **`width`** specifies the width of the viewport, in pixels,
 onto the drawing surface the 3D scene is to be rendered into. This is defined
 using this property along with the viewport's `height`
 and its origin given by its properties `x` and
 `y`.

Value
-----

The viewport's width in pixels.

Examples
--------

See the main `XRViewport` page for examples.

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

| Specification |
| --- |
| WebXR Device API # dom-xrviewport-width |

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

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

 The **`Range()`** constructor returns a newly created
 `Range` object whose start and end is the global `Document`
 object.

Syntax
------


```js
new Range()
```

### Parameters

None.

Examples
--------

 In this example we create a new range with the `Range()` constructor, and
 set its beginning and end positions using the `Range.setStartBefore()` and
 `Range.setEndAfter()` methods. We then select the range using
 `window.getSelection()` and `Selection.addRange()`.

### HTML


```html
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
```

### JavaScript


```js
const paragraphs = document.querySelectorAll("p");

// Create new range
const range = new Range();

// Start range at second paragraph
range.setStartBefore(paragraphs[1]);

// End range at third paragraph
range.setEndAfter(paragraphs[2]);

// Get window selection
const selection = window.getSelection();

// Add range to window selection
selection.addRange(range);
```

### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-range② |

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

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

See also
--------

* The DOM interfaces index
* `Document.createRange()`
Range: getClientRects() method
==============================

 The **`Range.getClientRects()`** method returns a list of `DOMRect` objects representing the area of the screen occupied by the range. This is created by aggregating the results of calls to
 `Element.getClientRects()` for all the elements in the range.

Syntax
------


```js
getClientRects()
```

### Parameters

None.

### Return value

An iterable sequence of `DOMRect` objects.

Examples
--------

### Logging selected client rect sizes

#### HTML


```html
<div></div>
<pre id="output"></pre>
```


#### CSS


```css
div {
  height: 80px;
  width: 200px;
  background-color: blue;
}
```


#### JavaScript


```js
const range = document.createRange();
range.selectNode(document.querySelector("div"));
rectList = range.getClientRects();

const output = document.querySelector("#output");
for (const rect of rectList) {
  output.textContent = `${output.textContent}\n${rect.width}:${rect.height}`;
}
```


#### Result

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

| Specification |
| --- |
| CSSOM View Module # dom-range-getclientrects |

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

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

See also
--------

* `Range`
Range: toString() method
========================

 The **`Range.toString()`** method is a stringifier returning
 the text of the `Range`.

 Alerting the contents of a `Range` makes an implicit
 `toString()` call, so comparing range and text through an alert dialog is
 ineffective.

Syntax
------


```js
toString()
```

### Parameters

None.

### Return value

A string.

Examples
--------

### HTML


```html
<p>
  This example logs <em>everything</em> between the emphasized <em>words</em>.
  Look at the output below.
</p>
<p id="log"></p>
```

### JavaScript


```js
const range = document.createRange();

range.setStartBefore(document.getElementsByTagName("em").item(0), 0);
range.setEndAfter(document.getElementsByTagName("em").item(1), 0);
document.getElementById("log").textContent = range.toString();
```

### Result

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

| Specification |
| --- |
| DOM Standard # dom-range-stringifier |

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

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

See also
--------

* The DOM interfaces index
Range: compareNode() method
===========================

**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 **`Range.compareNode()`** returns a constant indicating the
 position of the `Node`.

The possible values are:

`NODE_BEFORE` (`0`)

Node starts before the Range

`NODE_AFTER` (`1`)

Node ends after the Range

`NODE_BEFORE_AND_AFTER` (`2`)

Node starts before and ends after the Range

`NODE_INSIDE` (`3`)

 Node starts after and ends before the Range, i.e. the Node is completely selected by
 the Range.




**Warning:** This method has been removed from Gecko 1.9 and
 will not exist in future versions of Firefox, which was the only browser implementing
 it; you should switch to `Range.compareBoundaryPoints()` as soon as
 possible.


The following function can be used as replacement:


```js
function rangeCompareNode(range, node) {
  const nodeRange = node.ownerDocument.createRange();
  try {
    nodeRange.selectNode(node);
  } catch (e) {
    nodeRange.selectNodeContents(node);
  }
  const nodeIsBefore =
    range.compareBoundaryPoints(Range.START\_TO\_START, nodeRange) === 1;
  const nodeIsAfter =
    range.compareBoundaryPoints(Range.END\_TO\_END, nodeRange) === -1;

  if (nodeIsBefore && !nodeIsAfter) return 0;
  if (!nodeIsBefore && nodeIsAfter) return 1;
  if (nodeIsBefore && nodeIsAfter) return 2;

  return 3;
}
```

Syntax
------


```js
compareNode(referenceNode)
```

### Parameters

`referenceNode`

The `Node` to compare with the `Range`.

### Return value

A constant indicating the position of the `Node`.

Examples
--------


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
returnValue = range.compareNode(document.getElementsByTagName("p").item(0));
```

Notes
-----

 This method is obsolete; you should use the W3C DOM
 `Range.compareBoundaryPoints()` method.

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

This method is not standard and therefore not part of any specification.

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

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

See also
--------

* The DOM interfaces index