recursal/MDN huggingface dataset:
Document: hasStorageAccess() method
===================================

The **`hasStorageAccess()`** method of the `Document` interface returns a `Promise` that resolves with a boolean value indicating whether the document has access to third-party, unpartitioned cookies.

This method is part of the Storage Access API.

Syntax
------


```js
hasStorageAccess()
```

### Parameters

None.

### Return value

A `Promise` that resolves with a boolean value indicating whether the document has access to third-party cookies — `true` if it does, and `false` if not.

The result returned by this method can be inaccurate in a couple of circumstances:

1. The user may have active browser settings that block third-party cookies; in this case, `true` may be returned even though third-party cookies are still inaccessible. To handle such a situation, you should gracefully handle any errors resulting in cookie values being unretrievable; for example, inform the user that access to their personalized settings is blocked and invite them to sign in again to use them.
2. The browser might not block third-party cookie access by default; in this case, `false` may be returned even though third-party cookies are accessible, and storage access wouldn't need to be requested (i.e., via `Document.requestStorageAccess()`). To get around this issue, you could query `Document.cookie` to find out whether your cookies are accessible, and call `Document.requestStorageAccess()` if they are not.

**Note:** If the promise gets resolved and a user gesture event was being processed when the function was originally called, the resolve handler will run as if a user gesture was being processed, so it will be able to call APIs that require user activation.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the current `Document` is not yet active.

Examples
--------


```js
document.hasStorageAccess().then((hasAccess) => {
  if (hasAccess) {
    // storage access has been granted already.
  } else {
    // storage access hasn't been granted already;
    // you may want to call requestStorageAccess().
  }
});
```


**Note:** See Using the Storage Access API for a more complete example.

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

| Specification |
| --- |
| The Storage Access API # dom-document-hasstorageaccess |

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

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

See also
--------

* `Document.requestStorageAccess()`, `Document.requestStorageAccessFor()`
* Using the Storage Access API
* Introducing Storage Access API (WebKit blog)
Document: adoptNode() method
============================

**`Document.adoptNode()`** transfers a node from another document into the method's
 document. The adopted node and its subtree are removed from their original document (if
 any), and their `ownerDocument` is changed to the
 current document. The node can then be inserted into the current document.

Syntax
------


```js
adoptNode(externalNode)
```

### Parameters

`externalNode`

The node from another document to be adopted.

### Return value

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

 After calling this method, `importedNode` and
 `externalNode` are the same object.


**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 iframeImages = iframe.contentDocument.querySelectorAll("img");
const newParent = document.getElementById("images");

iframeImages.forEach((imgEl) => {
  newParent.appendChild(document.adoptNode(imgEl));
});
```

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

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

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

See also
--------

* `document.importNode()`
Document: linkColor 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.linkColor`** property gets/sets the color of
 links within the document.

 This property is deprecated. As an alternative, you can set the CSS
 `color` property on either HTML anchor links (`<a>`) or on
 `:link` pseudo-classes. Another alternative is
 `document.body.link`, although this is deprecated in HTML 4.01.

Value
-----

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

Examples
--------


```js
document.linkColor = "blue";
```

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

HTML5

`Document.linkColor` is deprecated in DOM Level 2 HTML.

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

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

 The default value for this property in Mozilla Firefox is blue (`#0000ee` in
 hexadecimal).

See also
--------

* `document.vlinkColor`
* `document.alinkColor`
Document: pictureInPictureEnabled property
==========================================

 The read-only
 **`pictureInPictureEnabled`** property of the
 `Document` interface indicates whether or not picture-in-picture mode is
 available.

 Picture-in-Picture mode is available by default unless specified
 otherwise by a Permissions-Policy.

 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 will be ignored.

Value
-----

 A boolean value, which is `true` if a video can enter
 picture-in-picture and be displayed in a floating window by calling
 `HTMLVideoElement.requestPictureInPicture()`. If picture-in-picture mode isn't
 available, this value is `false`.

Examples
--------

 In this example, before attempting to enter picture-in-picture mode for a
 `<video>` element the value of `pictureInPictureEnabled` is
 checked, to avoid making the call if the feature is not available.


```js
function requestPictureInPicture() {
  if (document.pictureInPictureEnabled) {
    videoElement.requestPictureInPicture();
  } else {
    console.log("Your browser cannot use picture-in-picture right now");
  }
}
```

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

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-document-pictureinpictureenabled |

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

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

See also
--------

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
Document: scrollingElement property
===================================

 The **`scrollingElement`** read-only property of the
 `Document` interface returns a reference to the `Element` that
 scrolls the document. In standards mode, this is the root element of the
 document, `document.documentElement`.

 When in quirks mode, the `scrollingElement` attribute returns the HTML
 `body` element if it exists and is potentially scrollable, otherwise it returns null.

Value
-----

The `Element` that scrolls the document, usually the root element (unless not in standard mode).

Examples
--------


```js
const scrollElm = document.scrollingElement;
scrollElm.scrollTop = 0;
```

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

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

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

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

 The **`Document.replaceChildren()`** method replaces the
 existing children of a `Document` with a specified new set of children.

Syntax
------


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

### Parameters

`param1`, …, `paramN`

 A set of `Node` or string objects to replace the
 `Document`'s existing children with. If no replacement objects are
 specified, then the `Document` is emptied of all child nodes.


### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown if the constraints of the node tree are violated.

Examples
--------

### Emptying a document

`replaceChildren()` provides a very convenient mechanism for emptying a document
 of all its children. You call it on the document without any argument specified:


```js
document.replaceChildren();
document.children; // HTMLCollection []
```

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

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

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

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

See also
--------

* `Document.prepend()`
* `Document.append()`
Document: preferredStyleSheetSet 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 **`preferredStyleSheetSet`** property returns the preferred style sheet set as set by the page
 author.

Value
-----

 The author's preferred style sheet set. This is determined from the order of style sheet declarations and the
 `Default-Style` HTTP header.

If there isn't a preferred style sheet set defined by the author, the empty string (`""`) is returned.

Examples
--------


```js
if (document.preferredStyleSheetSet) {
  console.log(
    `The preferred style sheet set is: ${document.preferredStyleSheetSet}`,
  );
} else {
  console.log("There is no preferred style sheet.");
}
```

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

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

See also
--------

* `document.lastStyleSheetSet`
* `document.selectedStyleSheetSet`
* `document.styleSheetSets`
* `document.enableStyleSheetsForSet()`
Document: plugins property
==========================

 The **`plugins`** read-only property of the
 `Document` interface returns an `HTMLCollection` object
 containing one or more `HTMLEmbedElement`s representing the
 `<embed>` elements in the current document.


**Note:** For a list of installed plugins, use Navigator.plugins
 instead.


Value
-----

An `HTMLCollection`.

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

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

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

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

See also
--------

* MSDN documentation
Document: activeElement property
================================

 The **`activeElement`** read-only property
 of the `Document` interface returns the `Element` within the DOM that currently has focus.

 Often `activeElement` will return a `HTMLInputElement` or
 `HTMLTextAreaElement` object if it has the text selection at the time. If
 so, you can get more detail by using the object's `selectionStart` and `selectionEnd` properties.
 Other times the focused element might be a `<select>` element (menu) or
 an `<input>` element.

 Typically a user can press the tab key to move the focus around the page among
 focusable elements, and use the space bar to activate one (that is, to press a button or
 toggle a radio button). Which elements are focusable varies depending on the platform
 and the browser's current configuration. For example, on macOS systems, elements that
 aren't text input elements are not typically focusable by default.


**Note:** Focus (which element is receiving user input events) is not
 the same thing as selection (the currently highlighted part of the document). You can
 get the current selection using `window.getSelection()`.


Value
-----

 The `Element` which currently has focus, `<body>` or
 `null` if there is no focused element.

Examples
--------

### HTML


```html
<p>Select some text from one of the text areas below:</p>

<form>
  <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">
This is Text Area One. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea
 >
  <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">
This is Text Area Two. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.</textarea
 >
</form>

<p>Active element ID: <em id="output-element"></em></p>
<p>Selected text: <em id="output-text"></em></p>
```

### JavaScript


```js
function onMouseUp(e) {
  const activeTextarea = document.activeElement;
  const selection = activeTextarea.value.substring(
    activeTextarea.selectionStart,
    activeTextarea.selectionEnd,
  );

  const outputElement = document.getElementById("output-element");
  const outputText = document.getElementById("output-text");
  outputElement.innerHTML = activeTextarea.id;
  outputText.innerHTML = selection;
}

const textarea1 = document.getElementById("ta-example-one");
const textarea2 = document.getElementById("ta-example-two");
textarea1.addEventListener("mouseup", onMouseUp, false);
textarea2.addEventListener("mouseup", onMouseUp, false);
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-documentorshadowroot-activeelement-dev |

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

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

See also
--------

* `Document.hasFocus`
Document: elementFromPoint() method
===================================

 The **`elementFromPoint()`**
 method, available on the `Document` object, returns the topmost `Element` at the specified coordinates
 (relative to the viewport).

 If the element at the specified point belongs to another document (for example, the
 document of an `<iframe>`), that document's parent element is returned
 (the `<iframe>` itself). If the element at the given point is anonymous
 or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous
 ancestor element (for example, the textbox) is returned.

 Elements with `pointer-events` set to `none` will be ignored,
 and the element below it will be returned.

 If the method is run on another document (like an `<iframe>`'s
 subdocument), the coordinates are relative to the document where the method is being
 called.

 If the specified point is outside the visible bounds of the document or either
 coordinate is negative, the result is `null`.

 If you need to find the specific position inside the element, use
 `Document.caretPositionFromPoint()`.

Syntax
------


```js
elementFromPoint(x, y)
```

### Parameters

`x`

 The horizontal coordinate of a point, relative to the left edge of the current
 viewport.


`y`

 The vertical coordinate of a point, relative to the top edge of the current
 viewport.


### Return value

The topmost `Element` object located at the specified coordinates.

Examples
--------

 This example creates two buttons which let you set the current color of the paragraph
 element located under the coordinates `(2, 2)`.

### JavaScript


```js
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
```


 The `changeColor()` method obtains the element located at the specified
 point, then sets that element's current foreground `color` property to the
 color specified by the `newColor` parameter.

### HTML


```html
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">Blue</button>
<button onclick="changeColor('red');">Red</button>
```


 The HTML provides the paragraph whose color will be affected, as well as two buttons:
 one to change the color to blue, and another to change the color to red.

### Result

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

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

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

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

See also
--------

* `Document.elementsFromPoint()`
Document: URL property
======================

 The **`URL`** read-only property of the `Document`
 interface returns the document location as a string.

Value
-----

A string containing the URL of the document.

Examples
--------

### JavaScript


```js
document.getElementById("url").textContent = document.URL;
```

### HTML


```html
<p id="urlText">
  URL:<br />
  <span id="url">URL goes here</span>
</p>
```

### Result

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

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

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

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

See also
--------

* The `document.documentURI` property which returns the same value.
Document: exitPictureInPicture() method
=======================================

 The **`exitPictureInPicture()`** method of the `Document` interface
 requests that a video contained
 in this document, which is currently floating, be taken out of picture-in-picture
 mode, restoring the previous state of the screen. This usually reverses the
 effects of a previous call to `HTMLVideoElement.requestPictureInPicture()`.

Syntax
------


```js
exitPictureInPicture()
```

### Parameters

None.

### Return value

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

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `document.pictureInPictureElement` is `null`.

Examples
--------

 This example causes the current document to exit picture-in-picture mode whenever the
 mouse button is clicked within it.


```js
document.onclick = (event) => {
  if (document.pictureInPictureElement) {
    document
      .exitPictureInPicture()
      .then(() => console.log("Document Exited from Picture-in-Picture mode"))
      .catch((err) => console.error(err));
  } else {
    video.requestPictureInPicture();
  }
};
```


Note that if you want to track which video on your page is currently playing in picture-in-picture mode, you should listen to the `enterpictureinpicture` and `exitpictureinpicture` events on the `HTMLVideoElement` element(s) in question. Alternatively, you can check whether `Document.pictureInPictureElement` refers to the current `HTMLVideoElement` element.

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

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-document-exitpictureinpicture |

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

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

See also
--------

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
* Picture-in-Picture events
Document: createComment() method
================================

**`createComment()`** creates a new comment node, and returns
 it.

Syntax
------


```js
createComment(data)
```

### Parameters

`data`

A string containing the data to be added to the Comment.

### Return value

A new `Comment` object.

Examples
--------


```js
const docu = new DOMParser().parseFromString("<xml></xml>", "application/xml");
const comment = docu.createComment(
  "This is a not-so-secret comment in your document",
);

docu.querySelector("xml").appendChild(comment);

console.log(new XMLSerializer().serializeToString(docu));
// Displays: <xml><!--This is a not-so-secret comment in your document--></xml>
```

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

This method compiles an `XPathExpression` which can then be used for (repeated) evaluations.

You must call this method on the same document that you run the expression against.

Syntax
------


```js
createExpression(xpathText, namespaceURLMapper)
```

### Parameters

`xpathText`

A string which is the XPath expression to be compiled.

`namespaceURLMapper`

 A function which maps a namespace prefix to a
 namespace URL (or null if none needed).


### Return value

`XPathExpression`Examples
--------


```js
const xpathExpr = document.createExpression("//div");
const xpathResult = xpathExpr.evaluate(document); // returns an XPathResult object
const nodeContext = document.querySelector("nav");
// Re-using the XPathExpression "xpathExpr"
const otherResult = xpathExpr.evaluate(nodeContext); // returns an XPathResult object
```

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

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

See also
--------

* `Document.evaluate()`
* `XPathExpression`