recursal/MDN huggingface dataset:
Document: queryCommandState() 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 **`queryCommandState()`** method will tell you if the current selection has a certain `Document.execCommand()` command applied.

Syntax
------


```js
queryCommandState(command)
```

### Parameters

`command` is a command from `Document.execCommand()`

### Return value

`queryCommandState()` can return a boolean value or `null` if the state is unknown.

Example
-------

### HTML


```html
<div contenteditable="true">Select a part of this text!</div>
<button onclick="makeBold();">Test the state of the 'bold' command</button>

<hr />

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


```
hr,
button {
  margin: 1rem 0;
}
```

### JavaScript


```js
function makeBold() {
  const state = document.queryCommandState("bold");
  let message;
  switch (state) {
    case true:
      message = "The bold formatting will be removed from the selected text.";
      break;
    case false:
      message = "The selected text will be displayed in bold.";
      break;
    default:
      message = "The state of the 'bold' command is indeterminable.";
      break;
  }
  document.querySelector("#output").textContent = `Output: ${message}`;
  document.execCommand("bold");
}
```

### Result

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

* `HTMLElement.contentEditable`
* `document.designMode`
* Browser bugs related to `queryCommandState()`: Scribe's "Browser Inconsistencies" documentation
Document: append() method
=========================

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

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

Syntax
------


```js
append(param1)
append(param1, param2)
append(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
--------

### Appending a root element to a document

 If you try to append 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.append(html);
// HierarchyRequestError: The operation would yield an incorrect node tree.
```


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


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

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

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

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

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

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

See also
--------

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

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

The **`prerenderingchange`** event is fired on a prerendered document when it is activated (i.e. the user views the page).

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

The following code sets up an event listener to run a function once prerendering has finished, on a prerendered page (the prerendering is detected via `Document.prerendering`), or runs it immediately on a non-prerendered page:


```js
if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
} else {
  initAnalytics();
}
```


**Note:** See the Speculation Rules API landing page and particularly the Unsafe speculative loading conditions section for more information on the kinds of activities you might wish to delay until after prerendering has finished.

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

| Specification |
| --- |
| Prerendering Revamped # eventdef-document-prerenderingchange |
| Prerendering Revamped # dom-document-onprerenderingchange |

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

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

See also
--------

* Speculation Rules API
* `prerendering` property
Document: applets 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 **`applets`** property of the `Document` returns an empty `HTMLCollection`. This property is kept only for compatibility reasons; in older versions of browsers, it returned a list of the applets within a document.

**Note:** Support for the `<applet>` element has been removed by all browsers. Therefore, calling `document.applets` always
 returns an empty collection.


Value
-----

An empty `HTMLCollection`.

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

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

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

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

 The **`getElementsByName()`** method
 of the `Document` object returns a `NodeList` Collection of
 elements with a given `name` attribute in the document.

Syntax
------


```js
getElementsByName(name)
```

### Parameters

`name`

The value of the `name` attribute of the element(s) we are looking for.

### Return value

A live `NodeList` collection, meaning it automatically updates as new elements with the same `name` are added to, or removed from, the document.

Examples
--------


```html
<!doctype html>
<html lang="en">
  <head>
    <title>Example: using document.getElementsByName</title>
  </head>
  <body>
    <input type="hidden" name="up" />
    <input type="hidden" name="down" />
  </body>
</html>
```



```js
const up_names = document.getElementsByName("up");
console.log(up_names[0].tagName); // displays "INPUT"
```

Notes
-----

 The `name` attribute can only be applied in (X)HTML
 documents.

 The returned `NodeList` Collection contains *all* elements with the
 given `name`, such as `<meta>`, `<object>`, and
 even elements which do not support the `name` attribute at all.

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

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

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

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

See also
--------

* `document.getElementById()` to return a reference to an element by its
 unique `id`
* `document.getElementsByTagName()` to return references to elements with
 the same tag name
* `document.querySelector()` to return references to elements via CSS
 selectors like `'div.myclass'`
Document: paste event
=====================

The **`paste`** event fires when the user initiates a paste action through the browser's user interface.

The original target for this event is the `Element` that was the intended target of the paste action. You can listen for this event on the `Document` interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Element: paste event.

Syntax
------

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


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

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

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

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventExamples
--------

To be informed when a user pastes data to the webpage from their clipboard, you can add a handler to your `Document` instance using `addEventListener()`, like this:


```js
document.addEventListener("paste", (event) => {
  /\* the session has shut down \*/
});
```


Alternatively, you can use the `Document.onpaste` event handler property to establish a handler for the `paste` event:


```js
document.onpaste = (event) => {
  /\* the session has shut down \*/
};
```

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

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

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

See also
--------

* Related events: `copy`, `cut`
* This event on `Element` targets: `paste`
* This event on `Window` targets: `paste`
Document: images property
=========================

 The **`images`** read-only property of
 the `Document` interface returns a collection of the images in the current HTML document.

Value
-----

 An `HTMLCollection` providing a live list of all of the images contained
 in the current document. Each entry in the collection is an
 `HTMLImageElement` representing a single image element.

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

 You can use either JavaScript array notation or the `item()` method on the returned collection to access the items in the collection. The
 following are equivalent:


```js
firstImage = imageCollection.item(0);

firstImage = imageCollection[0];
```

Examples
--------

 This example looks through the list of images and finds one whose name is
 `"banner.gif"`.


```js
for (const image of document.images) {
  if (image.src === "banner.gif") {
    console.log("Found the banner");
  }
}
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: alinkColor 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.

 Returns or sets the color of an active link in the document body. A link is active
 during the time between `mousedown` and `mouseup` events.

Value
-----

A string containing the name of the color (e.g., `blue`, `darkblue`, etc.) or the hexadecimal value of the color (e.g., `#0000FF`).

Notes
-----

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

`document.alinkColor` is deprecated in DOM Level 2 HTML. One alternative is the CSS selector `:active`.

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

 Firefox supports both `alinkColor`/`:active` and `:focus`. Internet
 Explorer 6 and 7 support `alinkColor`/`:active` only for HTML anchor (<a>) links and the
 behavior is the same as `:focus` under Gecko. There is no support for
 `:focus` in IE.

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

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

 The
 **`Document.fullscreenElement`** read-only
 property returns the `Element` that is currently being presented in
 fullscreen mode in this document, or `null` if fullscreen mode is not
 currently in use.

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

 The `Element` object that's currently in fullscreen mode; if fullscreen
 mode isn't currently in use by the `document`, the returned
 value is `null`.

Examples
--------

 This example presents a function, `isVideoInFullscreen()`, which looks at
 the value returned by `fullscreenElement`; if the document is in fullscreen
 mode (`fullscreenElement` isn't `null`) and the fullscreen
 element's `nodeName` is `VIDEO`, indicating a
 `<video>` element, the function returns `true`, indicating
 that the video is in fullscreen mode.


```js
function isVideoInFullscreen() {
  if (document.fullscreenElement?.nodeName === "VIDEO") {
    return true;
  }
  return false;
}
```

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

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

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()`
* `:fullscreen` and `::backdrop`
* The `<iframe>` `allowfullscreen`
 attribute
Document: fonts property
========================

The **`fonts`** property of the `Document` interface returns the `FontFaceSet` interface of the document.

This feature is part of the CSS Font Loading API.

Value
-----

 The returned value is the `FontFaceSet` interface of the document.
 The `FontFaceSet` interface is useful for loading new fonts, checking the status of previously loaded fonts etc.

Examples
--------

### Doing operation after fonts are loaded


```js
document.fonts.ready.then((fontFaceSet) => {
  // Any operation that needs to be done only after all used fonts
  // have finished loading can go here.
  const fontFaces = [...fontFaceSet];
  console.log(fontFaces);
  // some fonts may still be unloaded if they aren't used on the site
  console.log(fontFaces.map((f) => f.status));
});
```


The promise fulfils when loading and layout operations of all used fonts are done. The set of used fonts can be different from the set of *declared* fonts, e.g. if optional fonts (i.e. fonts declared via `font-display: optional`) were not able to load in time.

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

| Specification |
| --- |
| CSS Font Loading Module Level 3 # FontFaceSet-interface |

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

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

See also
--------

* `FontFaceSet` interface
* `FontFace`
Document: xmlEncoding 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.

Returns the encoding as determined by the XML declaration. Should be `null` if unspecified or unknown.

**Warning:** Do not use this attribute; it has been removed from the DOM Level 4 specification and is no longer supported in Firefox 10.0.

Consider the following XML Declaration:


```xml
<?xml version="1.0" encoding="UTF-16"?>
```


Then, the result should be "UTF-16".

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document: styleSheetSets 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 **`styleSheetSets`** read-only property returns a live list of all of the currently-available style sheet sets.

Value
-----

A list of style sheet sets that are available.

Examples
--------

 Given an `<ul>` (list) element with the ID "sheetList", you can populate
 it with the names of all the available style sheet sets with code like this:


```js
const list = document.getElementById("sheetList");
const sheets = document.styleSheetSets;

list.textContent = "";

for (const sheet of sheets) {
  const item = document.createElement("li");
  item.textContent = sheet;
  list.appendChild(item);
}
```

Notes
-----

 The list of available style sheet sets is constructed by enumerating all the style
 sheets available for the document, in the order in which they're listed in the
 `Document.styleSheets` attribute, adding the `title` of each
 style sheet that has a title to the list. Duplicates are dropped from the list (using a
 case-sensitive comparison).

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: caretPositionFromPoint() method
=========================================

 The **`caretPositionFromPoint()`**
 method of the `Document` interface returns a
 `CaretPosition` object, containing the DOM node, along with the caret and
 caret's character offset within that node.

Syntax
------


```js
caretPositionFromPoint(x, y)
```

### Parameters

`x`

The horizontal coordinate of a point.

`y`

The vertical coordinate of a point.

### Return value

A `CaretPosition` object.

Examples
--------

Click anywhere in the **Demo** paragraph below to insert a line break at the point where you click. The code for it is below the demo.

### Demo

The code below first checks for `document.caretPositionFromPoint` support, but if the browser doesn't support that, the code then checks for `document.caretRangeFromPoint`, and uses that instead.

### JavaScript


```js
function insertBreakAtPoint(e) {
  let range;
  let textNode;
  let offset;

  if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.clientX, e.clientY);
    textNode = range.offsetNode;
    offset = range.offset;
  } else if (document.caretRangeFromPoint) {
    // Use WebKit-proprietary fallback method
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
    textNode = range.startContainer;
    offset = range.startOffset;
  } else {
    // Neither method is supported, do nothing
    return;
  }
  // Only split TEXT\_NODEs
  if (textNode?.nodeType === 3) {
    let replacement = textNode.splitText(offset);
    let br = document.createElement("br");
    textNode.parentNode.insertBefore(br, replacement);
  }
}

let paragraphs = document.getElementsByTagName("p");
for (const paragraph of paragraphs) {
  paragraph.addEventListener("click", insertBreakAtPoint, false);
}
```


```
let message = document.getElementById("message");
if (document.caretPositionFromPoint) {
  message.textContent =
    "This browser supports the standard document.caretPositionFromPoint";
  message.classList.add("supported");
} else if (document.caretRangeFromPoint) {
  message.textContent =
    "This browser supports the non-standard document.caretRangeFromPoint";
  message.classList.add("supported");
}
```

### HTML
```

<div id="message">
  This browser supports neither document.caretRangeFromPoint nor
  document.caretPositionFromPoint
</div>
```



```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
```


```
#message {
  color: red;
  font-weight: bold;
}

#message.fallback {
  color: darkorange;
}

#message.supported {
  color: green;
}
```

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

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

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

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

See also
--------

* `CaretPosition`
Document: copy event
====================

The **`copy`** event fires when the user initiates a copy action through the browser's user interface.

The original target for this event is the `Element` that was the intended target of the copy action. You can listen for this event on the `Document` interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Element: copy event.

Syntax
------

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


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

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

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

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventExamples
--------

To be informed when a user copies data from the webpage to their clipboard, you can add a handler to your `Document` instance using `addEventListener()`, like this:


```js
document.addEventListener("copy", (event) => {
  /\* the session has shut down \*/
});
```


Alternatively, you can use the `Document.oncopy` event handler property to establish a handler for the `copy` event:


```js
document.oncopy = (event) => {
  /\* the session has shut down \*/
};
```

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

See also
--------

* Related events: `cut`, `paste`
* This event on `Element` targets: `copy`
* This event on `Window` targets: `copy`