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

 The **`scripts`** property of the `Document`
 interface returns a list of the `<script>`
 elements in the document. The returned object is an
 `HTMLCollection`.

Value
-----

 An `HTMLCollection`. You can use this just like an array to get all the
 elements in the list.

Examples
--------

This example looks to see if the page has any `<script>` elements.


```js
let scripts = document.scripts;

if (scripts.length) {
  alert("This page has scripts!");
}
```

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

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

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

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

 The **`Document.createAttribute()`** method creates a new
 attribute node, and returns it. The object created is a node implementing the
 `Attr` interface. The DOM does not enforce what sort of attributes can be
 added to a particular element in this manner.

**Note:** The string given in parameter is converted to lowercase.

Syntax
------


```js
createAttribute(name)
```

### Parameters

* `name` is a string containing the name of the attribute.
### Return value

A `Attr` node.

### Exceptions

`InvalidCharacterError` `DOMException`

Thrown if the `name` value is not a valid XML name; for example, it starts with a number, hyphen, or period, or contains characters other than alphanumeric characters, underscores, hyphens, or periods.

Examples
--------


```js
const node = document.getElementById("div1");
const a = document.createAttribute("my\_attrib");
a.value = "newVal";
node.setAttributeNode(a);
console.log(node.getAttribute("my\_attrib")); // "newVal"
```

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

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

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

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

See also
--------

* `Document.createAttributeNS()`
* `Document.createElement()`
* `Element.setAttribute()`
* `Element.setAttributeNode()`
Document: rootElement 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.

**`Document.rootElement`** returns the `Element`
 that is the root element of the `document` if it is an
 `<svg>` element, otherwise `null`. It is deprecated in favor of
 `Document.documentElement`, which returns the root element for all
 documents.

Value
-----

For SVG elements, the `Element` that is the root element of the `document`; otherwise `null`.

 If the document is a non-empty SVG document, then the `rootElement` will be
 an `SVGSVGElement`, identical to the `documentElement`.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGDocument\_\_rootElement |

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

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

**Warning:** Many methods used with `createEvent`, such as `initCustomEvent`, are deprecated.
 Use event constructors instead.


 Creates an event of the type specified. The
 returned object should be first initialized and can then be passed to
 `EventTarget.dispatchEvent`.

Syntax
------


```js
createEvent(type)
```

### Parameters

`type`

A string that represents the type of event to be created. Possible event types include `"UIEvents"`, `"MouseEvents"`, `"MutationEvents"`, and `"HTMLEvents"`. See Notes section for details.

### Return value

An Event object.

Examples
--------


```js
// Create the event.
const event = document.createEvent("Event");

// Define that the event name is 'build'.
event.initEvent("build", true, true);

// Listen for the event.
elem.addEventListener(
  "build",
  (e) => {
    // e.target matches elem
  },
  false,
);

// Target can be any Element or other EventTarget.
elem.dispatchEvent(event);
```

Notes
-----

 Event type strings suitable for passing to `createEvent()` are listed in the
 DOM standard — see the table in step 2. Bear in mind that most event objects now have constructors, which
 are the modern recommended way to create event object instances.

Gecko supports some non-standard event object aliases, which are listed below.

| Event Module | Standard event object | Gecko also supports |
| --- | --- | --- |
| Text event module | `TextEvent` | `TextEvents` |
| Keyboard event module | `KeyboardEvent` | `KeyEvents` |
| Basic events module | `Event` | `Events` |

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

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

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

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

See also
--------

* Creating and triggering events
Document: pictureInPictureElement property
==========================================

 The read-only **`pictureInPictureElement`** property of the `Document`
 interface returns the `Element` that is currently being
 presented in picture-in-picture mode in this document, or `null` if
 picture-in-picture 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 will be ignored.

Value
-----

 A reference to the `Element` object that's currently in
 picture-in-picture mode; if picture-in-picture mode isn't currently in use by the
 `document`, the returned value is `null`.

Examples
--------

 This example presents a function, `exitPictureInPicture()`,
 which tests the value returned by `pictureInPictureElement`. If the document
 is in picture-in-picture mode (`pictureInPictureElement` isn't
 `null`), `Document.exitPictureInPicture()` is run to exit
 picture-in-picture mode.


```js
function exitPictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
}
```

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

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-documentorshadowroot-pictureinpictureelement①⑤ |

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.exitPictureInPicture()`
* `:picture-in-picture`
Document: Document() constructor
================================

 The **`Document`** constructor creates a new
 `Document` object that is a web page loaded in the browser and serving as
 an entry point into the page's content.

Syntax
------


```js
new Document()
```

### Parameters

None.

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

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

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

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

 The **`Document.hidden`** read-only property returns a Boolean
 value indicating if the page is considered hidden or not.

The `Document.visibilityState` property provides an alternative way to determine whether the page is hidden.

Value
-----

A Boolean value, `true` if the page is hidden, and `false` otherwise.

Examples
--------


```js
document.addEventListener("visibilitychange", () => {
  console.log(document.hidden);
  // Modify behavior…
});
```

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

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

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

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

See also
--------

* `Document.visibilityState`
Document: fullscreenerror event
===============================

The `fullscreenerror` event is fired when the browser cannot switch to fullscreen mode.

As with the `fullscreenchange` event, two `fullscreenerror` events are fired; the first is sent to the `Element` which failed to change modes, and the second is sent to the `Document` which owns that element.

For some reasons that switching into fullscreen mode might fail, see the guide to the Fullscreen API.

This event is not cancelable.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------


```js
const requestor = document.querySelector("div");

function handleError(event) {
  console.error("an error occurred changing into fullscreen");
  console.log(event);
}

document.addEventListener("fullscreenerror", handleError);
// or
document.onfullscreenerror = handleError;

requestor.requestFullscreen();
```

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

| Specification |
| --- |
| Fullscreen API Standard # handler-document-onfullscreenerror |

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

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

See also
--------

* `fullscreenchange`
* `Element`: `fullscreenerror` event
* Fullscreen API
* Guide to the Fullscreen API
Document: forms property
========================

 The **`forms`** read-only property of
 the `Document` interface returns an `HTMLCollection` listing
 all the `<form>` elements contained in the document.


**Note:** Similarly, you can access a list of a form's component user
 input elements using the `HTMLFormElement.elements` property.


Value
-----

 An `HTMLCollection` object listing all of the document's forms. Each item
 in the collection is a `HTMLFormElement` representing a single
 `<form>` element.

If the document has no forms, the returned collection is empty, with a length of zero.

Examples
--------

### Getting form information


```html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form id="robby">
      <input
 type="button"
 onclick="alert(document.forms[0].id);"
 value="robby's form" />
    </form>

    <form id="dave">
      <input
 type="button"
 onclick="alert(document.forms[1].id);"
 value="dave's form" />
    </form>

    <form id="paul">
      <input
 type="button"
 onclick="alert(document.forms[2].id);"
 value="paul's form" />
    </form>
  </body>
</html>
```

### Getting an element from within a form


```js
const selectForm = document.forms[index];
const selectFormElement = document.forms[index].elements[index];
```

### Named form access


```html
<!doctype html>
<html lang="en">
  <head>
    <title>document.forms example</title>
  </head>

  <body>
    <form name="login">
      <input name="email" type="email" />
      <input name="password" type="password" />
      <button type="submit">Log in</button>
    </form>

    <script>
 const loginForm = document.forms.login; // Or document.forms['login']
 loginForm.elements.email.placeholder = "test@example.com";
 loginForm.elements.password.placeholder = "password";
 </script>
  </body>
</html>
```

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

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

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

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

See also
--------

* HTML forms
* `<form>` and the `HTMLFormElement` interface
Document: createTextNode() method
=================================

 Creates a new `Text` node. This method can be used to escape HTML
 characters.

Syntax
------


```js
createTextNode(data)
```

### Parameters

`data`

A string containing the data to be put in the text node.

### Return value

A `Text` node.

Examples
--------


```html
<!doctype html>
<html lang="en">
  <head>
    <title>createTextNode example</title>
    <script>
 function addTextNode(text) {
 const newtext = document.createTextNode(text);
 const p1 = document.getElementById("p1");

 p1.appendChild(newtext);
 }
 </script>
  </head>

  <body>
    <button onclick="addTextNode('YES! ');">YES!</button>
    <button onclick="addTextNode('NO! ');">NO!</button>
    <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>

    <hr />

    <p id="p1">First line of paragraph.</p>
  </body>
</html>
```

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

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

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

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

**`document.designMode`** controls whether the entire document
 is editable. Valid values are `"on"` and `"off"`. According to the
 specification, this property is meant to default to `"off"`. Firefox follows
 this standard. The earlier versions of Chrome and IE default to `"inherit"`.
 Starting in Chrome 43, the default is `"off"` and `"inherit"` is
 no longer supported. In IE6-10, the value is capitalized.

Value
-----

 A string indicating whether `designMode` is (or should be) set to on or off.
 Valid values are `on` and `off`.

Examples
--------

Make an `<iframe>`'s document editable:


```js
iframeNode.contentDocument.designMode = "on";
```

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

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

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

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

See also
--------

* `HTMLElement.contentEditable`
Document: all 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` interface's read-only **`all`** property returns an `HTMLAllCollection` rooted at the document node.

Rather than using `document.all` to return an `HTMLAllCollection` of all the document's elements in document order, you can use `Document.querySelectorAll` to return a `NodeList` of all the document's elements in document order:


```js
const allElements = document.querySelectorAll("\*");
```

Value
-----

An `HTMLAllCollection` which contains every element in the document.

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

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

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

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

 The **`Document.contentType`** read-only property returns the
 MIME type that the document is being rendered as. This may come from HTTP headers or
 other sources of MIME information, and might be affected by automatic type conversions
 performed by either the browser or extensions.


**Note:** This property is unaffected by `<meta>`
 elements.


Value
-----

`contentType` is a read-only property.

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

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

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

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

 The **`Document.body`** property represents the
 `<body>` or `<frameset>` node of the current document, or
 `null` if no such element exists.

Value
-----

One of the following:

* `<body>`
* `<frameset>`
* `null`
Examples
--------


```js
// Given this HTML: <body id="oldBodyElement"></body>
alert(document.body.id); // "oldBodyElement"

const aNewBodyElement = document.createElement("body");

aNewBodyElement.id = "newBodyElement";
document.body = aNewBodyElement;
alert(document.body.id); // "newBodyElement"
```

Notes
-----

`document.body` is the element that contains the content for the document.
 In documents with `<body>` contents, returns the
 `<body>` element, and in frameset documents, this returns the outermost
 `<frameset>` element.

 Though the `body` property is settable, setting a new body on a document
 will effectively remove all the current children of the existing
 `<body>` element.

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

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

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

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

See also
--------

* `document.head`
Document: securitypolicyviolation event
=======================================

The **`securitypolicyviolation`** event is fired when a Content Security Policy is violated.

The event is fired on the global scope when violates the policy and will bubble to the `Window` object. The event may also bubble from nodes contained in the document tree.

The handler can be assigned using the `onsecuritypolicyviolation` event handler property or using `EventTarget.addEventListener()`.

**Note:** It is recommended to add the handler for this event to a top level object (i.e. `Window` or `Document`). While the property exists in HTML elements, you can't assign a handler to the property until the elements have been loaded, by which time this event will already have fired.

Syntax
------

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


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

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

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

A `SecurityPolicyViolationEvent`. Inherits from `Event`.

Event

SecurityPolicyViolationEventExamples
--------

The code below shows how you might add an event handler function using the `onsecuritypolicyviolation` event handler property or `addEventListener()` on the `Document`.


```js
document.onsecuritypolicyviolation = (e) => {
  // Handle SecurityPolicyViolationEvent e here
};

document.addEventListener("securitypolicyviolation", (e) => {
  // Handle SecurityPolicyViolationEvent e here
});
```

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

| Specification |
| --- |
| HTML Standard # handler-onsecuritypolicyviolation |

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

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

See also
--------

* The `securitypolicyviolation` event of the `Element` interface
* The `securitypolicyviolation` event of the `WorkerGlobalScope` interface
* HTTP > Content Security Policy
Document: getAnimations() method
================================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback

 The `getAnimations()` method of the `Document` interface
 returns an array of all `Animation` objects currently in effect whose
 target elements are descendants of the document. This array includes CSS Animations, CSS Transitions, and Web Animations.

Syntax
------


```js
getAnimations()
```

### Parameters

None.

### Return value

 An `Array` of `Animation` objects, each representing one
 animation currently associated with elements which are descendants of the
 `Document` on which it's called.

Examples
--------

 The following code snippet will slow down all animations on a page by halving their
 `Animation.playbackRate`.


```js
document.getAnimations().forEach((animation) => {
  animation.playbackRate \*= 0.5;
});
```

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

| Specification |
| --- |
| Web Animations # dom-documentorshadowroot-getanimations |

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

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

See also
--------

* Web Animations API
* CSS Animations
* CSS Transitions
* `Element.getAnimations()` - Fetch only the animations on a single
 `Element` and its descendants.
* `Animation`
Document: defaultView property
==============================

 In browsers, **`document.defaultView`** returns the
 `window` object associated with a
 document, or `null` if none is available.

This property is read-only.

Value
-----

The `window` object.

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

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

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

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

The **`styleSheets`** read-only property of the `Document` interface returns a `StyleSheetList` of `CSSStyleSheet` objects, for stylesheets explicitly linked into or embedded in a document.

Value
-----

The returned list is ordered as follows:

* StyleSheets retrieved from `Link` headers are placed first, sorted in header order.
* StyleSheets retrieved from the DOM are placed after, sorted in tree order.
Examples
--------


```js
function getStyleSheet(unique\_title) {
  for (const sheet of document.styleSheets) {
    if (sheet.title === unique_title) {
      return sheet;
    }
  }
}
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

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

 The **`Document.visibilityState`**
 read-only property returns the visibility of the document. It can be used to check whether the document is in the background or in a minimized window, or is otherwise not visible to the user.

When the value of this property changes, the `visibilitychange` event is sent to the `Document`.

The `Document.hidden` property provides an alternative way to determine whether the page is hidden.

Value
-----

A string with one of the following values:

`visible`

 The page content may be at least partially visible. In practice this means that the
 page is the foreground tab of a non-minimized window.


`hidden`

 The page content is not visible to the user. In practice this means that the
 document is either a background tab or part of a minimized window, or the OS screen
 lock is active.


Examples
--------


```js
document.addEventListener("visibilitychange", () => {
  console.log(document.visibilityState);
  // Modify behavior…
});
```

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

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

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

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

See also
--------

* `Document.hidden`