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

**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 **`selectedStyleSheetSet`** property indicates the name of the style sheet set that's currently in use.

Value
-----

The name of the style sheet set currently in use. You can also set the current style sheet set using this property.

 Setting the value of this property is equivalent to calling
 `document.enableStyleSheetsForSet()` with the value of
 `currentStyleSheetSet`, then setting the value of
 `lastStyleSheetSet` to that value as well.


**Note:** This attribute's value is live; directly changing
 the `disabled` attribute on style sheets will affect the value of this
 attribute.


Examples
--------


```js
console.log(`Current style sheet set: ${document.selectedStyleSheetSet}`);

document.selectedStyleSheetSet = "Some other style sheet";
```

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

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

See also
--------

* `document.lastStyleSheetSet`
* `document.preferredStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()`
Document: children property
===========================

 The read-only **`children`** property returns a live `HTMLCollection`
 which contains all of the child `elements` of the document upon which it was called.

For HTML documents, this is usually only the root `<html>` element.

See `Element.children` for child elements of specific HTML elements within the document.

Value
-----

 An `HTMLCollection` which is a live, ordered collection of the DOM
 elements which are children of the current document. You can access the
 individual child nodes in the collection by using either the
 `item()` method on the collection, or by using
 JavaScript array-style notation.

 If the document has no element children, then `children` is an empty list with a
 `length` of `0`.

Examples
--------


```js
document.children;
// HTMLCollection [<html>]
// Usually only contains the root <html> element, the document's only direct child
```


See `Element.children` for child elements of specific HTML elements within the document.

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

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

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

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

See also
--------

* `Element.children`
* `Node.childNodes`
Document: vlinkColor 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 **`Document.vlinkColor`** property gets/sets the color of
 links that the user has visited in the document.

Value
-----

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

Notes
-----

* The default value for this property in Mozilla Firefox is purple
 (`#551a8b` in hexadecimal).
* `Document.vlinkColor` is deprecated in DOM Level 2 HTML.
* The recommended alternative is to get/set the color of the CSS `:visited` pseudo-class on HTML `<a>` elements (e.g.,
 `a:visited {color:red;}`).
* Another alternative is `document.body.vLink`, although this is 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: firstElementChild property
====================================

 The **`Document.firstElementChild`** read-only property
 returns the document's first child `Element`, or `null` if there
 are no child elements.

For HTML documents, this is usually the only child, the root `<html>` element.

See `Element.firstElementChild` for the first child element of specific elements within a document.

Value
-----

A `Element` object, or `null`.

Examples
--------


```js
document.firstElementChild;
// returns the root <html> element, the only child of the document
```

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

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

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

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

See also
--------

* `Element.firstElementChild`
Document: lastElementChild property
===================================

 The **`Document.lastElementChild`** read-only property
 returns the document's last child `Element`, or `null` if there
 are no child elements.

For HTML documents, this is usually the only child, the root `<html>` element.

See `Element.lastElementChild` for the last child element of specific elements within a document.

Value
-----

The root `<html>` element.

Examples
--------


```js
document.lastElementChild;
// returns the root <html> element, the only child of the document
```

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

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

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

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

See also
--------

* `Element.lastElementChild`
Document: documentElement property
==================================

**`Document.documentElement`** returns the
 `Element` that is the root element of the `document` (for
 example, the `<html>` element for HTML documents).

Value
-----

A `Element` object.

Examples
--------


```js
const rootElement = document.documentElement;
const firstTier = rootElement.childNodes;
// firstTier is a NodeList of the direct children of the root element
// such as <head> and <body>

for (const child of firstTier) {
  // do something with each direct child of the root element
}
```

Notes
-----

 For any non-empty HTML document, `documentElement` will always be an
 `<html>` element. For any non-empty XML document,
 `documentElement` will always be whatever element is the root element of the
 document.

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

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

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

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

**Warning:** Use of the `document.writeln()` method is strongly discouraged.

As the HTML spec itself warns:

> 
> 
>  This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string "`<plaintext>`" or "`<!--`"). In other cases, the call can clear the current page first, as if `document.open()` had been called. In yet more cases, the method is simply ignored, or throws an exception. Users agents are explicitly allowed to avoid executing `script` elements inserted via this method. And to make matters even worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.
>  Therefore, avoid using `document.writeln()` — and if possible, update any existing code that is still using it.
>  
> 
> 
> 

Writes a string of text followed by a newline character to a document.

Syntax
------


```js
writeln(line)
```

### Parameters

* `line` is string containing a line of text.
### Return value

None (`undefined`).

Examples
--------


```js
document.writeln("<p>enter password:</p>");
```

Notes
-----

**document.writeln** is the same as `document.write` but adds a newline.

**Note:** **document.writeln** (like **document.write**) does not work in XHTML documents (you'll get a "Operation is not supported" (`NS_ERROR_DOM_NOT_SUPPORTED_ERR`) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the W3C XHTML FAQ.

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

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

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

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

 The **`scroll`** event fires when the document view has been scrolled.
 To detect when scrolling has completed, see the `Document: scrollend event`.
 For element scrolling, see `Element: scroll event`.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

### Scroll event throttling

Since `scroll` events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using `requestAnimationFrame()`, `setTimeout()`, or a `CustomEvent`, as follows.

Note, however, that input events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary. This example optimizes the `scroll` event for `requestAnimationFrame`.


```js
let lastKnownScrollPosition = 0;
let ticking = false;

function doSomething(scrollPos) {
  // Do something with the scroll position
}

document.addEventListener("scroll", (event) => {
  lastKnownScrollPosition = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(() => {
      doSomething(lastKnownScrollPosition);
      ticking = false;
    });

    ticking = true;
  }
});
```

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

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

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

See also
--------

* Document: `scrollend` event
* Element: `scroll` event
* Element: `scrollend` event
Document: fullscreen 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 obsolete `Document` interface's **`fullscreen`** read-only property reports whether or not the document is currently displaying content in fullscreen mode.

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.

**Note:** Since this property is deprecated, you can determine if fullscreen mode is active on the document by checking to see if `Document.fullscreenElement` is not `null`.

Value
-----

A Boolean value which is `true` if the document is currently displaying an element in fullscreen mode; otherwise, the value is `false`.

Examples
--------

This simple function reports whether or not fullscreen mode is currently active, using the obsolete `fullscreen` property.


```js
function isDocumentInFullScreenMode() {
  return document.fullscreen;
}
```


This next example, on the other hand, uses the current `fullscreenElement` property to determine the same thing:


```js
function isDocumentInFullScreenMode() {
  return document.fullscreenElement !== null;
}
```


If `fullscreenElement` isn't `null`, this returns `true`, indicating that fullscreen mode is in effect.

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

| Specification |
| --- |
| Fullscreen API Standard # dom-document-fullscreen |

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
* `Document.fullscreenEnabled`
Document: characterSet property
===============================

 The **`Document.characterSet`**
 read-only property returns the character encoding of the
 document that it's currently rendered with.


**Note:** A "character set" and a "character encoding" are related, but different. Despite the
 name of this property, it returns the *encoding*.


 Users can override the developer-specified encoding inside the Content-Type header or inline
 like `<meta charset="utf-8">`, such as with Firefox's `View → Text
Encoding` menu. This override is provided to fix incorrect developer-specified
 encodings that result in garbled text.


**Note:** The properties `document.charset` and `document.inputEncoding`
 are legacy aliases for `document.characterSet`. Do not use them any more.


Value
-----

A string.

Examples
--------


```html
<button onclick="console.log(document.characterSet);">
  Log character encoding
</button>
<!-- displays document's character encoding in the dev console, such as "ISO-8859-1" or "UTF-8" -->
```

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

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

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

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

**`createCDATASection()`** creates a new CDATA section node,
 and returns it.

Syntax
------


```js
createCDATASection(data)
```

### Parameters

`data`

A string containing the data to be added to the CDATA Section.

### Return value

A CDATA Section node.

Examples
--------


```js
const docu = new DOMParser().parseFromString("<xml></xml>", "application/xml");
const cdata = docu.createCDATASection("Some <CDATA> data & then some");
docu.querySelector("xml").appendChild(cdata);
console.log(new XMLSerializer().serializeToString(docu));
// Displays: <xml><![CDATA[Some <CDATA> data & then some]]></xml>
```

Notes
-----

* This will only work with XML, not HTML documents (as HTML documents do not support
 CDATA sections); attempting it on an HTML document will throw
 `NOT_SUPPORTED_ERR`.
* Will throw a `NS_ERROR_DOM_INVALID_CHARACTER_ERR` exception if one tries
 to submit the closing CDATA sequence ("`]]>`") as part of the data, so
 unescaped user-provided data cannot be safely used without this method getting this
 exception (`createTextNode()` can often be used
 in its place).
Specifications
--------------

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: afterscriptexecute 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 `afterscriptexecute` event fires when a static `<script>` element finishes executing its script. 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("afterscriptexecute", (event) => {});

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

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

A generic `Event`.

Examples
--------


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

document.addEventListener("afterscriptexecute", finished, true);
// or
document.onafterscriptexecute = finished;
```


View Live Example

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

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

See also
--------

* `Document.beforescriptexecute_event`
* `Document.currentScript`
Document: readyState property
=============================

 The **`Document.readyState`** property describes the loading state of the `document`.
 When the value of this property changes, a `readystatechange` event fires on the `document` object.

Value
-----

The `readyState` of a document can be one of following:

`loading`

The `document` is still loading.

`interactive`

 The document has finished loading and the document has been parsed but sub-resources
 such as scripts, images, stylesheets and frames are still loading. The state indicates that
 the `DOMContentLoaded` event is about to fire.


`complete`

 The document and all sub-resources have finished loading. The state indicates that
 the `load` event is about to fire.


Examples
--------

### Different states of readiness


```js
switch (document.readyState) {
  case "loading":
    // The document is loading.
    break;
  case "interactive": {
    // The document has finished loading and we can access DOM elements.
    // Sub-resources such as scripts, images, stylesheets and frames are still loading.
    const span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  }
  case "complete":
    // The page is fully loaded.
    console.log(
      `The first CSS rule is: ${document.styleSheets[0].cssRules[0].cssText}`,
    );
    break;
}
```

### readystatechange as an alternative to DOMContentLoaded event


```js
// Alternative to DOMContentLoaded event
document.onreadystatechange = () => {
  if (document.readyState === "interactive") {
    initApplication();
  }
};
```

### readystatechange as an alternative to load event


```js
// Alternative to load event
document.onreadystatechange = () => {
  if (document.readyState === "complete") {
    initApplication();
  }
};
```

### readystatechange as event listener to insert or modify the DOM before DOMContentLoaded


```js
document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "interactive") {
    initLoader();
  } else if (event.target.readyState === "complete") {
    initApp();
  }
});
```

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

| Specification |
| --- |
| HTML Standard # current-document-readiness |

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

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

See also
--------

* Related events:
    + `readystatechange`
    + `DOMContentLoaded`
    + `load`
Document: pointerLockElement property
=====================================

 The **`pointerLockElement`** read-only property of the `Document` interface provides the element set as the target for mouse events while the pointer is locked.
 It is `null` if lock is pending, pointer is unlocked, or the target is in another document.

Value
-----

An `Element` or `null`.

Examples
--------

### Checking pointer lock status

This example contains a `<div>` element that in turn contains a `<button>`. Clicking the button requests pointer lock for the `<div>`.

The example also listens for the `pointerlockchange` event: when this event is fired, the event handler disables the "Lock" button if an element in the document has the pointer lock, and enables the button otherwise.

The effect of this is that if you click the "Lock" button, the pointer is locked and the button is disabled: if you then exit pointer lock (for example, by pressing the `Escape` key), the button is enabled again.

#### HTML


```html
<div id="container">
  <button id="lock">Lock</button>
</div>
```


#### CSS


```css
div {
  height: 100px;
  width: 200px;
  border: 2px solid blue;
}
```


#### JavaScript


```js
const lock = document.querySelector("#lock");
const container = document.querySelector("#container");

lock.addEventListener("click", () => {
  container.requestPointerLock();
});

document.addEventListener("pointerlockchange", () => {
  const locked = document.pointerLockElement;
  lock.disabled = Boolean(locked);
});
```


#### Result

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

| Specification |
| --- |
| Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |

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

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

See also
--------

* `Document.exitPointerLock()`
* `Element.requestPointerLock()`
* Pointer Lock
Document: elementsFromPoint() method
====================================

 The **`elementsFromPoint()`** method
 of the `Document` interface returns an array of all elements
 at the specified coordinates (relative to the viewport).
 The elements are ordered from the topmost to the bottommost box of the viewport.

It operates in a similar way to the `elementFromPoint()` method.

Syntax
------


```js
elementsFromPoint(x, y)
```

### Parameters

`x`

The horizontal coordinate of a point.

`y`

The vertical coordinate of a point.

### Return value

An array of `Element` objects, ordered from the topmost to the bottommost box of the viewport.

Examples
--------

### HTML


```html
<div>
  <p>Some text</p>
</div>
<p>Elements at point 30, 20:</p>
<div id="output"></div>
```

### JavaScript


```js
let output = document.getElementById("output");
if (document.elementsFromPoint) {
  let elements = document.elementsFromPoint(30, 20);
  elements.forEach((elt, i) => {
    output.textContent += elt.localName;
    if (i < elements.length - 1) {
      output.textContent += " < ";
    }
  });
} else {
  output.innerHTML =
    '<span style="color: red;">' +
    "Browser does not support <code>document.elementsFromPoint()</code>" +
    "</span>";
}
```

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

| Specification |
| --- |
| CSSOM View Module # dom-document-elementsfrompoint |

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

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

See also
--------

* `Document.elementFromPoint()`