recursal/MDN huggingface dataset:
Document: enableStyleSheetsForSet() 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.

 Enables the style sheets matching the specified name in the current style sheet set,
 and disables all other style sheets (except those without a title, which are always
 enabled).

Syntax
------


```js
enableStyleSheetsForSet(name)
```

### Parameters

`name`

 The name of the style sheets to enable. All style sheets with a title that match
 this name will be enabled, while all others that have a title will be disabled.
 Specify an empty string for the *name* parameter to disable all alternate and
 preferred style sheets (but not the persistent style sheets; that is, those with no
 `title` attribute).


### Return value

None (`undefined`).

Notes
-----

* Title matches are case-sensitive.
* Calling this method with a `null` *name* has no effect; if you
 want to disable all alternate and preferred style sheets, you **must**
 pass "", the empty string.
* Stylesheets that don't have a title are never affected by this method.
* This method never affects the values of `document.lastStyleSheetSet` or
 `document.preferredStyleSheetSet`.
Examples
--------


```js
document.enableStyleSheetsForSet("Some style sheet set name");
```

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

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

See also
--------

* `Stylesheet`
* `Document.styleSheets`
* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.enableStyleSheetsForSet()`
Document: head property
=======================

 The **`head`** read-only property of
 the `Document` interface returns the `<head>` element of
 the current document.

Value
-----

An `HTMLHeadElement`.

Examples
--------


```html
<!doctype html>
<head id="my-document-head">
  <title>Example: using document.head</title>
</head>

<script>
 const theHead = document.head;

 console.log(theHead.id); // "my-document-head";

 console.log(theHead === document.querySelector("head")); // true
</script>
```

Notes
-----

`document.head` is read-only. Trying to assign a value to this property will
 fail silently or, in Strict Mode, throws a `TypeError` .

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

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

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

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

See also
--------

* `document.body`
Document: pointerlockerror event
================================

The **`pointerlockerror`** event is fired when locking the pointer failed (for technical reasons or because the permission was denied).

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

Using `addEventListener()`:


```js
const para = document.querySelector("p");

document.addEventListener("pointerlockerror", (event) => {
  console.log("Error locking pointer");
});
```


Using the `onpointerlockerror` event handler property:


```js
document.onpointerlockerror = (event) => {
  console.log("Error locking pointer");
};
```

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

| Specification |
| --- |
| Pointer Lock 2.0 # pointerlockchange-and-pointerlockerror-events |
| Pointer Lock 2.0 # dom-document-onpointerlockerror |

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

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

See also
--------

* Using Pointer Lock API
Document: startViewTransition() method
======================================

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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`startViewTransition()`** method of the
 View Transitions API starts a new view transition and returns a `ViewTransition` object to represent it.

When `startViewTransition()` is invoked, a sequence of steps is followed as explained in The view transition process.

Syntax
------


```js
startViewTransition(callback)
```

### Parameters

`callback`

A callback function typically invoked to update the DOM during the view transition process, which returns a `Promise`. The callback is invoked once the API has taken a screenshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned.

### Return value

A `ViewTransition` object instance.

Examples
--------

### Basic usage

In our Basic View Transitions demo, the `updateView()` function handles both browsers that do and don't support the View Transitions API. In supporting browsers, we invoke `startViewTransition()` to set off the view transition process without worrying about the return value.


```js
function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("\_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}
```

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

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |

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

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

See also
--------

* Smooth and simple transitions with the View Transitions API
Document: prepend() method
==========================

 The **`Document.prepend()`** method
 inserts a set of `Node` objects or string objects before
 the first child of the document. String objects
 are inserted as equivalent `Text` nodes.

This method prepends a child to a `Document`. To prepend to an arbitrary element in the tree, see `Element.prepend()`.

Syntax
------


```js
prepend(param1)
prepend(param1, param2)
prepend(param1, param2, /\* …, \*/ paramN)
```

### Parameters

`param1`, …, `paramN`

A set of `Node` or string objects to insert.

### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples
--------

### Prepending a root element to a document

 If you try to prepend an element to an existing HTML document,
 it might throw a `HierarchyRequestError' `DOMException` given a `<html>` element already exists.


```js
let html = document.createElement("html");
document.prepend(html);
// HierarchyRequestError: The operation would yield an incorrect node tree.
```


If you are creating a new document without any existing element, you can prepend a root HTML element (or a root SVG element):


```js
let doc = new Document();
let html = document.createElement("html");
doc.prepend(html);

doc.children; // HTMLCollection [<html>]
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-prepend① |

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

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

See also
--------

* `Document.append()`
* `Element.prepend()`
Document: beforescriptexecute event
===================================

**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 `beforescriptexecute` event fires when a static `<script>` is about to start executing. It does not fire if the element is added dynamically, such as with `appendChild()`.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------


```js
function starting(e) {
  logMessage(`Starting script with ID: ${e.target.id}`);
}

document.addEventListener("beforescriptexecute", starting, true);
// or
document.onbeforescriptexecute = starting;
```


View Live Example

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

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

See also
--------

* `Document.afterscriptexecute_event`
* `Document.currentScript`
Document: featurePolicy property
================================

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

The **`featurePolicy`** read-only property of the `Document` interface returns the `FeaturePolicy` interface which provides a simple API for inspecting the Permissions Policies applied to a specific document.

Value
-----

A `FeaturePolicy` object that can be used to inspect the Permissions Policy settings applied to the document.

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

#### No specification found

No specification data found for `api.Document.featurePolicy`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

 The read-only **`fullscreenEnabled`**
 property on the `Document` interface indicates whether or not fullscreen
 mode is available.

 fullscreen mode is available only for a page that has no
 windowed plug-ins in any of its documents, and if all `<iframe>` elements
 which contain the document have their `allowfullscreen`
 attribute set.

 Although this property is read-only, it will not throw if it is modified (even in
 strict mode); the setter is a no-operation and it will be ignored.

Value
-----

 A boolean value which is `true` if the document and the
 elements within can be placed into fullscreen mode by calling
 `Element.requestFullscreen()`. If fullscreen mode isn't available, this
 value is `false`.

Examples
--------

 In this example, before attempting to request fullscreen mode for a
 `<video>` element, the value of `fullscreenEnabled` is
 checked, in order to avoid making the attempt when not available.


```js
function requestFullscreen() {
  if (document.fullscreenEnabled) {
    videoElement.requestFullscreen();
  } else {
    console.log("Your browser cannot use fullscreen right now");
  }
}
```

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

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

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.exitFullscreen()`
* `Document.fullscreenElement`
* `:fullscreen` and `::backdrop`
* The `<iframe>` `allowfullscreen`
 attribute
Document: releaseCapture() 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 **`releaseCapture()`** method releases mouse capture if
 it's currently enabled on an element within this document.
 Once mouse capture is released, mouse events will no longer all be directed to the element on which capture is enabled.

Enabling mouse capture on an element is done by calling `element.setCapture()`.

Syntax
------


```js
releaseCapture()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

 See the example for
 `element.setCapture()`.

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

* `element.setCapture()`
Document: close() method
========================

 The **`Document.close()`** method finishes writing to a
 document, opened with `Document.open()`.

Syntax
------


```js
close()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
// Open a document to write to it
document.open();

// Write the content of the document
document.write("<p>The one and only content.</p>");

// Close the document
document.close();
```

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

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

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

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

 The `Document` object's **`importNode()`** method creates a copy of a
 `Node` or `DocumentFragment` from another document, to be
 inserted into the current document later.

 The imported node is not yet included in the document tree. To include it, you need to
 call an insertion method such as `appendChild()` or
 `insertBefore()` with a node that *is*
 currently in the document tree.

 Unlike `document.adoptNode()`, the original node is not removed from its
 original document. The imported node is a clone of the original.

Syntax
------


```js
importNode(externalNode)
importNode(externalNode, deep)
```

### Parameters

`externalNode`

 The external `Node` or `DocumentFragment` to import into
 the current document.


`deep` Optional

 A boolean flag, whose default value is `false`,
 which controls whether to include the entire DOM subtree
 of the `externalNode` in the import.


* If `deep` is set to `true`, then
 `externalNode` and all of its descendants are copied.
* If `deep` is set to `false`, then only
 `externalNode` is imported — the new node has no children.

### Return value

The copied `importedNode` in the scope of the importing document.

**Note:** `importedNode`'s `Node.parentNode` is `null`, since it has not yet been inserted into the document tree!

Examples
--------


```js
const iframe = document.querySelector("iframe");
const oldNode = iframe.contentWindow.document.getElementById("myNode");
const newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
```

Notes
-----

Before they can be inserted into the current document, nodes from external documents should either be:

* cloned using `document.importNode()`; or
* adopted using `document.adoptNode()`.

**Note:** Although Firefox doesn't currently enforce this rule, we encourage you to follow this rule for improved future compatibility.

For more on the `Node.ownerDocument` issues, see the W3C DOM FAQ.

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

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

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

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

See also
--------

* `document.adoptNode()`, which behaves very similar to this method
* `Node.appendChild()`
* `Node.insertBefore()`
Document: fgColor 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.

**`fgColor`** gets/sets the foreground color, or text 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.fgColor = "white";
document.bgColor = "darkblue";
```

Notes
-----

 The default value for this property in Mozilla Firefox is black (`#000000`
 in hexadecimal).

`document.fgColor` is deprecated in DOM Level 2 HTML. The recommended alternative is the CSS property `color`
 (e.g., `document.body.style.color = "red"`).

Another alternative is `document.body.text`, although this is deprecated in HTML 4.01 in favor of the CSS alternative above.

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

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

The **`readystatechange`** event is fired when the `readyState` attribute of a document has changed.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

### Live example

#### HTML


```html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="30"
 id="eventLog"></textarea>
</div>
```


#### CSS
```

body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}
```


#### JavaScript


```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent = `${log.textContent}load\n`;
});

document.addEventListener("readystatechange", (event) => {
  log.textContent = `${log.textContent}readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent = `${log.textContent}DOMContentLoaded\n`;
});
```


#### Result

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

| Specification |
| --- |
| HTML Standard # event-readystatechange |

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

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

See also
--------

* Related events: `DOMContentLoaded`, `load`, `beforeunload`, `unload`
Document: selectionchange event
===============================

The **`selectionchange`** event of the Selection API is fired when the current `Selection` of a `Document` is changed.

This event is not cancelable and does not bubble.

The event can be handled by adding an event listener for `selectionchange` or using the `onselectionchange` event handler.

**Note:** This event is not quite the same as the `selectionchange` events fired when the text selection in an `<input>` or `<textarea>` element is changed. See `HTMLInputElement.selectionchange_event` for more details.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------


```js
// addEventListener version
document.addEventListener("selectionchange", () => {
  console.log(document.getSelection());
});

// onselectionchange version
document.onselectionchange = () => {
  console.log(document.getSelection());
};
```

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

| Specification |
| --- |
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |

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

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

See also
--------

* `selectstart`
* `Document.getSelection()`
* `Selection`
Document: childElementCount property
====================================

 The **`Document.childElementCount`** read-only property
 returns the number of child elements of the document.

To get the number of children of a specific element, see `Element.childElementCount`.

Value
-----

A number.

Examples
--------


```js
document.children;
// HTMLCollection, usually containing an <html> element, the document's only child

document.childElementCount;
// 1
```

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

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

See also
--------

* `Element.childElementCount`
* `DocumentFragment.childElementCount`