recursal/MDN huggingface dataset:
Document: bgColor property
==========================

**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.

 The deprecated `bgColor` property gets or sets the background color of the
 current document.

Value
-----

A string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "`#ff0000`").

Examples
--------


```js
document.bgColor = "darkblue";
```

Notes
-----

 The default value for this property in Firefox is white (`#ffffff` in
 hexadecimal).

`document.bgColor` is deprecated in DOM Level 2 HTML. The recommended alternative is use of the CSS style
 `background-color` which can be accessed through the DOM with
 `document.body.style.backgroundColor`. Another alternative is
 `document.body.bgColor`, although this is also deprecated in HTML 4.01 in
 favor of the CSS alternative.

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

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

The **`exitPointerLock()`** method of the `Document` interface asynchronously releases a pointer lock previously requested through `Element.requestPointerLock`.

**Note:** While the **`exitPointerLock()`** method is called on the document, the **`requestPointerLock()`** method is called on an element.

To track the success or failure of the request, it is necessary to listen for the `pointerlockchange` and `pointerlockerror` events.

Syntax
------


```js
exitPointerLock()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| Pointer Lock 2.0 # dom-document-exitpointerlock |

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

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

See also
--------

* `Document.pointerLockElement`
* `Element.requestPointerLock()`
* Pointer Lock
Document: createProcessingInstruction() method
==============================================

`createProcessingInstruction()` generates a new processing instruction node and returns it.

The new node usually will be inserted into an XML document in order to accomplish anything with it, such as with `node.insertBefore`.

Syntax
------


```js
createProcessingInstruction(target, data)
```

### Parameters

* `piNode` is the resulting `ProcessingInstruction` node.
* `target` is a string containing the first part of the processing instruction (i.e., `<?target … ?>`)
* `data` is a string containing any information the processing instruction should carry, after the target. The data is up to you, but it can't contain `?>`, since that closes the processing instruction.
### Return value

None (`undefined`).

### Exceptions

`InvalidCharacterError` `DOMException`

Thrown if either of the following are true:

* The `target` value is not a valid XML name; for example, it starts with a number, hyphen, or period, or contains characters other than alphanumeric characters, underscores, hyphens, or periods.
* The *closing processing instruction sequence* (`?>`) is part of the `data` value.

Examples
--------


```js
const doc = new DOMParser().parseFromString("<foo />", "application/xml");
const pi = doc.createProcessingInstruction(
  "xml-stylesheet",
  'href="mycss.css"',
);

doc.insertBefore(pi, doc.firstChild);

console.log(new XMLSerializer().serializeToString(doc));
// Displays: <?xml-stylesheet href="mycss.css" type="text/css"?><foo/>
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createprocessinginstruction① |

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

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

**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 **`caretRangeFromPoint()`** method of the
 `Document` interface returns a `Range` object for the document
 fragment under the specified coordinates.

This method is the WebKit-proprietary implementation of the `Document.caretPositionFromPoint` method.

Syntax
------


```js
caretRangeFromPoint(x, y)
```

### Parameters

`x`

A horizontal position within the current viewport.

`y`

A vertical position within the current viewport.

### Return value

One of the following:

* A `Range`.
* `Null`, if *x* or *y* are negative, outside viewport,
 or there is no text entry node.
Examples
--------

Visit the `Document.caretPositionFromPoint` page to view a live sample of this method.

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

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

 The `Document` method
 **`exitFullscreen()`** requests that the element on this
 document which is currently being presented in fullscreen mode be taken out of
 fullscreen mode, restoring the previous state of the screen. This usually
 reverses the effects of a previous call to `Element.requestFullscreen()`.

Syntax
------


```js
exitFullscreen()
```

### Parameters

None.

### Return value

 A `Promise` which is resolved once the user agent has
 finished exiting fullscreen mode. If an error occurs while attempting to exit
 fullscreen mode, the `catch()` handler for the promise is called.

Examples
--------

 This example causes the current document to toggle in and out of a fullscreen
 presentation whenever the mouse button is clicked within it.


```js
document.onclick = (event) => {
  if (document.fullscreenElement) {
    document
      .exitFullscreen()
      .then(() => console.log("Document Exited from Full screen mode"))
      .catch((err) => console.error(err));
  } else {
    document.documentElement.requestFullscreen();
  }
};
```


**Note:** For a more complete example, see the
 `Element.requestFullscreen()` examples.


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

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-exitfullscreen① |

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

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

See also
--------

* Fullscreen API
* Guide to the Fullscreen API
* `Element.requestFullscreen()`
* `Document.fullscreenElement`
* `:fullscreen` and `::backdrop`
* The `<iframe>` `allowfullscreen`
 attribute
Document: clear() 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.

The **`Document.clear()`** method does nothing, but doesn't raise any error.

Syntax
------


```js
clear()
```

### Parameters

None.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| HTML Standard # dom-document-clear |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: visibilitychange event
================================

The `visibilitychange` event is fired at the document when the contents of its tab have become visible or have been hidden.

The event is not cancelable.

Syntax
------

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


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

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

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

A generic `Event`.

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

The event doesn't include the document's updated visibility status, but you can get that information from the document's `visibilityState` property.

This event fires with a `visibilityState` of `hidden` when a user navigates to a new page, switches tabs, closes the tab, minimizes or closes the browser, or, on mobile, switches from the browser to a different app. Transitioning to `hidden` is the last event that's reliably observable by the page, so developers should treat it as the likely end of the user's session (for example, for sending analytics data).

The transition to `hidden` is also a good point at which pages can stop making UI updates and stop any tasks that the user doesn't want to have running in the background.

Examples
--------

### Pausing music on transitioning to hidden

This example begins playing a music track when the document becomes visible, and pauses the music when the document is no longer visible.


```js
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});
```

### Sending end-of-session analytics on transitioning to hidden

 This example treats the transition to `hidden` as the end of the user's session, and sends the appropriate analytics using the `Navigator.sendBeacon()`
 API:


```js
document.onvisibilitychange = () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};
```

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

| Specification |
| --- |
| HTML Standard # event-visibilitychange |
| HTML Standard # handler-onvisibilitychange |

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

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

See also
--------

* Page Visibility API
* `Document.visibilityState`
* Don't lose user and app state, use Page Visibility explains in detail why you should use `visibilitychange`, not `beforeunload`/`unload`.
* Page Lifecycle API gives best-practices guidance on handling page lifecycle behavior in your web applications.
Document: getSelection() method
===============================

 The **`getSelection()`** method of
 the `Document` interface returns a `Selection`
 object representing the range of text selected by the user, or the current position of
 the caret.

Syntax
------


```js
getSelection()
```

### Parameters

None.

### Return value

A `Selection` object.

Examples
--------

### Getting a Selection object


```js
let selection = document.getSelection();
let selRange = selection.getRangeAt(0);
// do stuff with the range

console.log(selection); // Selection object
```

### String representation of the Selection object

 Some functions (like `Window.alert()`) call `toString()`
 automatically and the returned value is passed to the function. As a consequence, this will return the selected text
 and not the `Selection` object:


```js
alert(selection);
```


 However, not all functions call `toString()` automatically.
 To use a `Selection` object as a string, call its `toString()` method directly:


```js
let selectedText = selection.toString();
```

Related objects
---------------

 You can call `Window.getSelection()`, which works identically to
 `Document.getSelection()`.

 It is worth noting that currently `getSelection()` doesn't work on the
 content of `<input>` elements in Firefox.
 `HTMLInputElement.setSelectionRange()`) could be used to work around this.

 Notice also the difference between *selection* and *focus*.
 `Document.activeElement` returns the focused element.

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

| Specification |
| --- |
| Selection API # dom-document-getselection |

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

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

 The **`Document.compatMode`** read-only property indicates
 whether the document is rendered in Quirks mode or
 Standards mode.

Value
-----

An enumerated value that can be:

* "`BackCompat`" if the document is in quirks mode.
* "`CSS1Compat`" if the document is in no-quirks (also known as
 "standards") mode or limited-quirks (also known as "almost standards") mode.

**Note:** All these modes are now standardized, so the older "standards"
 and "almost standards" names are nonsensical and no longer used in standards.


Examples
--------


```js
if (document.compatMode === "BackCompat") {
  // in Quirks mode
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-compatmode① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: createTouchList() 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 **`Document.createTouchList()`** method creates and returns a new `TouchList` object.

Syntax
------


```js
createTouchList(touch1)
createTouchList(touch1, touch2)
createTouchList(touch1, touch2, /\* …, \*/ touchN)
```

### Parameters

`touch1`, …, `touchN`

 Zero or more `Touch` objects. **Note:** Firefox also
 accepts an array of
 `Touch` objects.


### Return value

`list`

 A `TouchList` object containing the `Touch` objects
 specified by the `touches` parameter.


Examples
--------

 This example illustrates using the `Document.createTouchList()` method to
 create `TouchList` objects.

 In following code snippet, some `Touch` objects are created for the
 `target` element and those touch points are then used to create some
 `TouchList` objects.


```js
const target = document.getElementById("target");

// Create some touch points
const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);

// Create an empty TouchList objects
const list0 = document.createTouchList();

// Create a TouchList with only one Touch object
const list1 = document.createTouchList(touch1);

// Create a list with two Touch objects
const list2 = document.createTouchList(touch1, touch2);
```

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

This feature is not part of any current specification. It is no longer on track to become a standard.

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

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

See also
--------

* Touch events
* `Touch`
* `TouchEvent`
* `TouchList`
* `Document.createTouch()`
Document: implementation property
=================================

 The **`Document.implementation`** property returns a
 `DOMImplementation` object associated with the current document.

Value
-----

A `DOMImplementation` object.

Examples
--------


```js
const modName = "HTML";
const modVer = "2.0";
const conformTest = document.implementation.hasFeature(modName, modVer);

console.log(`DOM ${modName} ${modVer} supported?: ${conformTest}`);

// Log: "DOM HTML 2.0 supported?: true" (hasFeature always returns true)
```


**Warning:** Do not use this for feature detection. The `hasFeature()` method always returns true.

Notes
-----

 The W3C's DOM Level 1 Recommendation only specified the `hasFeature` method,
 which is one way to determine if a DOM module is supported by a browser (see example
 above and What does your user agent claim to support?). If available, other `DOMImplementation`
 methods provide services for controlling things outside of a single document. For
 example, the `DOMImplementation` interface includes a
 `createDocumentType` method with which DTDs can be created for one or more
 documents managed by the implementation.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-implementation① |

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

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

**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 **`Document.mozSetImageElement()`** method changes the
 element being used as the CSS background for a background with a given background
 element ID.

Syntax
------


```js
mozSetImageElement(imageElementId, imageElement)
```

### Parameters

* `imageElementId` is a string indicating the name of an element that has
 been specified as a background image using the `-moz-element` CSS
 function.
* `imageElement` is the new element to use as the background corresponding
 to that image element string. Specify `null` to remove the background
 element.
### Return value

None (`undefined`).

Examples
--------

 This example changes the background of a `<div>` block each time the
 block is clicked by the user.

View this example live.


```html
<style>
 #mybox {
 background-image: -moz-element(#canvasbg);
 text-align: center;
 width: 400px;
 height: 400px;
 cursor: pointer;
 }
</style>
```


The CSS defined by the `<style>` block above is used by our `<div>` to use an element with the id "canvasbg" as its background.


```js
let c = 0x00;
function clicked() {
  const canvas = document.createElement("canvas");
  canvas.setAttribute("width", 100);
  canvas.setAttribute("height", 100);

  const ctx = canvas.getContext("2d");
  ctx.fillStyle = `#${c.toString(16)}0000`;
  ctx.fillRect(25, 25, 75, 75);

  c += 0x11;
  if (c > 0xff) {
    c = 0x00;
  }

  document.mozSetImageElement("canvasbg", canvas);
}
```


 The code here is called each time the user clicks the `<div>` element.
 It creates a new `<canvas>` with the width and height set to 100
 pixels, then draws into it a 50 by 50 pixel square. Each time the function is called,
 the square is a different color (its red component is increased each time), so each time
 the user clicks the element, the background is filled with a brighter and brighter
 pattern of red tiles.

 Once the canvas is drawn, `document.mozSetImageElement()` is called to set
 the background for any CSS using the ID "canvasbg" as its background element ID to be
 our new canvas.

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

Not part of any specification.

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

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

See also
--------

* `-moz-element`
Document: createRange() method
==============================

 The **`Document.createRange()`** method returns a new
 `Range` object.

Syntax
------


```js
createRange()
```

### Parameters

None.

### Return value

The created `Range` object.

Examples
--------


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

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
```

Notes
-----

 Once a `Range` is created, you need to set its boundary points before you
 can make use of most of its methods.

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

| Specification |
| --- |
| DOM Standard # dom-document-createrange |

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

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

 The **`lastModified`** property of the `Document`
 interface returns a string containing the date and local time on which the current document
 was last modified.

Value
-----

A string.

Examples
--------

### Simple usage

This example alerts the value of `lastModified`.


```js
alert(document.lastModified);
// returns: Tuesday, December 16, 2017 11:09:42
```

### Transforming lastModified into a Date object

This example transforms `lastModified` into a `Date` object.


```js
let oLastModif = new Date(document.lastModified);
```

### Transforming lastModified into milliseconds

 This example transforms `lastModified` into the number of milliseconds since
 January 1, 1970, 00:00:00, local time.


```js
let nLastModif = Date.parse(document.lastModified);
```

Notes
-----

 Note that as a string, `lastModified` cannot *easily* be used for
 comparing the modification dates of documents. Here is a possible example of how to show
 an alert message when the page changes (see also: JavaScript cookies API):


```js
// Match 'timestamp' in 'last\_modif=timestamp'
// e.g. '1687964614822' in 'last\_modif=1687964614822'
const pattern = /last\_modif\s\*=\s\*([^;]\*)/;

if (
  Date.parse(document.lastModified) >
  (parseFloat(document.cookie.match(pattern)?.[1]) || 0)
) {
  document.cookie = `last\_modif=${Date.now()}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=${
 location.pathname
 }`;
  alert("This page has changed!");
}
```


…the same example, but skipping the first visit:


```js
const pattern = /last\_modif\s\*=\s\*([^;]\*)/;

const lastVisit = parseFloat(document.cookie.replace(pattern, "$1"));
const lastModif = Date.parse(document.lastModified);

if (Number.isNaN(lastVisit) || lastModif > lastVisit) {
  document.cookie = `last\_modif=${Date.now()}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=${
 location.pathname
 }`;

  if (isFinite(lastVisit)) {
    alert("This page has been changed!");
  }
}
```


If you want to know whether an *external* page has changed, you can make a `HEAD` request using the `fetch()` API, and examine the `Last-Modified` response header.

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

| Specification |
| --- |
| HTML Standard # dom-document-lastmodified-dev |

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

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

 The **`Document.location`** read-only property returns a
 `Location` object, which contains information about the URL of the document
 and provides methods for changing that URL and loading another URL.

 Though `Document.location` is a *read-only* `Location`
 object, you can also assign a string to it. This means that you can
 work with document.location as if it were a string in most cases:
 `document.location = 'http://www.example.com'` is a synonym of
 `document.location.href = 'http://www.example.com'`. If you assign another
 string to it, browser will load the website you assigned.

 To retrieve just the URL as a string, the read-only `document.URL`
 property can also be used.

 If the current document is not in a browsing context, the returned value is
 `null`.

Value
-----

A `Location` object.

Examples
--------


```js
console.log(document.location);
// Prints a Location object to the console
```

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

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

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

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

See also
--------

* The interface of the returned value, `Location`
* A similar information, but attached to the browsing context,
 `Window.location`