recursal/MDN huggingface dataset:
Range: createContextualFragment() method
========================================

 The **`Range.createContextualFragment()`** method returns a
 `DocumentFragment` by invoking the HTML fragment parsing algorithm or the
 XML fragment parsing algorithm with the start of the range (the *parent* of the
 selected node) as the context node. The HTML fragment parsing algorithm is used if the
 range belongs to a `Document` whose HTMLness bit is set. In the HTML case, if
 the context node would be `html`, for historical reasons the fragment parsing
 algorithm is invoked with `body` as the context instead.

Syntax
------


```js
createContextualFragment(tagString)
```

### Parameters

`tagString`

Text that contains text and tags to be converted to a document fragment.

### Return value

A `DocumentFragment` object.

Examples
--------


```js
const tagString = "<div>I am a div node</div>";
const range = document.createRange();

// Make the parent of the first div in the document become the context node
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);
```

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

| Specification |
| --- |
| DOM Parsing and Serialization # ref-for-dom-range-createcontextualfragment-2 |

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

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

See also
--------

* The DOM interfaces index
Range: setStartBefore() method
==============================

 The **`Range.setStartBefore()`** method sets the start position
 of a `Range` relative to another `Node`. The parent
 `Node` of the start of the `Range` will be the same as that
 for the `referenceNode`.

Syntax
------


```js
setStartBefore(referenceNode)
```

### Parameters

`referenceNode`

The `Node` before which the `Range` should start.

### Return value

None (`undefined`).

Examples
--------


```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setStartBefore(referenceNode);
```

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

| Specification |
| --- |
| DOM Standard # dom-range-setstartbefore |

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

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

See also
--------

* The DOM interfaces index
Range: setEndAfter() method
===========================

 The **`Range.setEndAfter()`** method sets the end position of a
 `Range` relative to another `Node`. The parent
 `Node` of end of the `Range` will be the same as that for the
 `referenceNode`.

Syntax
------


```js
setEndAfter(referenceNode)
```

### Parameters

`referenceNode`

The `Node` to end the `Range` after.

### Return value

None (`undefined`).

Examples
--------


```js
const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);

range.setEndAfter(referenceNode);
```

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

| Specification |
| --- |
| DOM Standard # dom-range-setendafter |

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

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

See also
--------

* The DOM interfaces index
Range: commonAncestorContainer property
=======================================

 The **`Range.commonAncestorContainer`** read-only property
 returns the deepest — or furthest down the document tree — `Node` that
 contains both boundary points of the `Range`. This means that if
 `Range.startContainer` and `Range.endContainer` both refer to
 the same node, this node is the **common ancestor container**.

 Since a `Range` need not be continuous, and may also partially select nodes,
 this is a convenient way to find a `Node` which encloses a
 `Range`.

 This property is read-only. To change the ancestor container of a `Node`,
 consider using the various methods available to set the start and end positions of the
 `Range`, such as `Range.setStart()` and
 `Range.setEnd()`.

Value
-----

A `Node` object.

Examples
--------

 In this example, we create an event listener to handle `pointerup` events on
 a list. The listener gets the common ancestors of each piece of selected text and
 triggers an animation to highlight them.

### HTML


```html
<ul>
  <li>
    Strings
    <ul>
      <li>Cello</li>
      <li>
        Violin
        <ul>
          <li>First Chair</li>
          <li>Second Chair</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    Woodwinds
    <ul>
      <li>Clarinet</li>
      <li>Oboe</li>
    </ul>
  </li>
</ul>
```

### CSS

 The `.highlight` class created below uses a set of CSS
 `@keyframes` to animate a fading outline.


```css
.highlight {
  animation: highlight linear 1s;
}

@keyframes highlight {
  from {
    outline: 1px solid #f00f;
  }
  to {
    outline: 1px solid #f000;
  }
}
```


```
body {
  padding: 1px;
}
```

### JavaScript


```js
document.addEventListener("pointerup", (e) => {
  const selection = window.getSelection();

  if (selection.type === "Range") {
    for (let i = 0; i < selection.rangeCount; i++) {
      const range = selection.getRangeAt(i);
      playAnimation(range.commonAncestorContainer);
    }
  }
});

function playAnimation(el) {
  if (el.nodeType === Node.TEXT\_NODE) {
    el = el.parentNode;
  }

  el.classList.remove("highlight");
  setTimeout(() => {
    el.classList.add("highlight");
  }, 0);
}
```

### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-commonancestorcontainer② |

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

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

See also
--------

* The DOM interfaces index
Range: detach() method
======================

 The **`Range.detach()`** method does nothing. It used to
 disable the `Range` object and enable the browser to release associated
 resources. The method has been kept for compatibility.

Syntax
------


```js
detach()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
const range = document.createRange();

range.selectNode(document.getElementsByTagName("div").item(0));
range.detach();
```

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

| Specification |
| --- |
| DOM Standard # dom-range-detach |

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

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

See also
--------

* The DOM interfaces index
Range: comparePoint() method
============================

 The **`Range.comparePoint()`** method returns `-1`,
 `0`, or `1` depending on whether the `referenceNode` is
 before, the same as, or after the `Range`.

 If the *reference node* is a `Node` of type `Text`,
 `Comment`, or `CDATASection`, then offset is the number of
 characters from the start of *reference node*. For other `Node`
 types, offset is the number of child nodes between the start of the *reference
node*.

Syntax
------


```js
comparePoint(referenceNode, offset)
```

### Parameters

`referenceNode`

The `Node` to compare with the `Range`.

`offset`

 An integer greater than or equal to zero representing the offset inside the
 *referenceNode*.


### Return value

Returns `-1`, `0`, or `1`.

Examples
--------


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
returnValue = range.comparePoint(document.getElementsByTagName("p").item(0), 1);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-comparepoint① |

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

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

See also
--------

* The DOM interfaces index
Range: startContainer property
==============================

 The **`Range.startContainer`** read-only property returns the
 `Node` within which the `Range` starts. To change the start
 position of a node, use one of the `Range.setStart()` methods.

Value
-----

A `Node` object.

Examples
--------


```js
range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
startRangeNode = range.startContainer;
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-startcontainer① |

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

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

See also
--------

* The DOM interfaces index
Range: collapsed property
=========================

 The **`Range.collapsed`** read-only property returns a
 boolean flag indicating whether the start and end points of the
 `Range` are at the same position. It returns `true` if the start
 and end boundary points of the `Range` are the same point in the DOM,
 `false` if not.

 A collapsed `Range` is empty (containing no content), and specifies a
 single point in a DOM tree. To collapse a range, see the `Range.collapse()`
 method.

Value
-----

A boolean.

Examples
--------


```js
let range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
isCollapsed = range.collapsed;
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-collapsed① |

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

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

See also
--------

* The DOM interfaces index
Range: deleteContents() method
==============================

 The **`Range.deleteContents()`** method removes the contents of
 the `Range` from the `Document`.

 Unlike `Range.extractContents()`, this method does not return a
 `DocumentFragment` containing the deleted content.

Syntax
------


```js
deleteContents()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
range.deleteContents();
```

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

| Specification |
| --- |
| DOM Standard # dom-range-deletecontents |

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

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

See also
--------

* The DOM interfaces index
Range: isPointInRange() method
==============================

 The **`Range.isPointInRange()`** method returns a boolean
 indicating whether the given point is in the `Range`. It returns
 `true` if the point (cursor position) at `offset` within
 `ReferenceNode` is within this range.

Syntax
------


```js
isPointInRange(referenceNode, offset)
```

### Parameters

`referenceNode`

The `Node` to compare with the `Range`.

`offset`

 The offset into `Node` of the point to compare with the
 `Range`.


### Return value

A boolean.

Examples
--------


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
bool = range.isPointInRange(document.getElementsByTagName("p").item(0), 1);
```

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

| Specification |
| --- |
| DOM Standard # dom-range-ispointinrange |

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

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

See also
--------

* The DOM interfaces index
Range: endContainer property
============================

 The **`Range.endContainer`** read-only property returns the
 `Node` within which the `Range` ends. To change the end
 position of a node, use the `Range.setEnd()` method or a similar one.

Value
-----

A `Node` object.

Examples
--------


```js
const range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
endRangeNode = range.endContainer;
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-range-endcontainer① |

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

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

See also
--------

* The DOM interfaces index
Range: cloneRange() method
==========================

 The **`Range.cloneRange()`** method returns a
 `Range` object with boundary points identical to the cloned
 `Range`.

 The returned clone is copied by value, not reference, so a change in either
 `Range` does not affect the other.

Syntax
------


```js
cloneRange()
```

### Parameters

None.

### Return value

A `Range` object.

Examples
--------


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
clone = range.cloneRange();
```

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

| Specification |
| --- |
| DOM Standard # dom-range-clonerange |

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

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

See also
--------

* The DOM interfaces index
Range: cloneContents() method
=============================

 The **`Range.cloneContents()`** returns a `DocumentFragment` copying the objects of type `Node`
 included in the `Range`.

 Event listeners added using `addEventListener()`
 are not copied during cloning. HTML attribute events are duplicated as they are
 for the `Node.cloneNode()` method. HTML `id` attributes
 are also cloned, which can lead to an invalid document through cloning.

 Partially selected nodes include the parent tags necessary to make the document
 fragment valid.

Syntax
------


```js
cloneContents()
```

### Parameters

None.

### Return value

A `DocumentFragment` object.

Examples
--------


```js
range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);
```

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

| Specification |
| --- |
| DOM Standard # dom-range-clonecontents |

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

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

See also
--------

* The DOM interfaces index
IdentityCredential: token property
==================================

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

The **`token`** read-only property of the `IdentityCredential` interface returns the token used to validate the associated sign-in.

Value
-----

A string.

Examples
--------

Relying parties (RPs) can call `navigator.credentials.get()` with the `identity` option to make a request for users to sign in to the RP via an identity provider (IdP), using identity federation. A typical request would look like this:


```js
async function signIn() {
  const identityCredential = await navigator.credentials.get({
    identity: {
      providers: [
        {
          configURL: "https://accounts.idp.example/config.json",
          clientId: "\*\*\*\*\*\*\*\*",
          nonce: "\*\*\*\*\*\*",
        },
      ],
    },
  });

  console.log(identityCredential.token);
}
```


A successful `navigator.credentials.get()` call that includes an `identity` option fulfills with an `IdentityCredential` instance, which can be used to access the token used to validate the sign-in.

Check out Federated Credential Management API (FedCM) for more details on how this works. This call will start off the sign-in flow described in FedCM sign-in flow.

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

| Specification |
| --- |
| Federated Credential Management API # dom-identitycredential-token |

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

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

See also
--------

* Federated Credential Management API
SubmitEvent: SubmitEvent() constructor
======================================

 The **`SubmitEvent()`** constructor creates and returns a new `SubmitEvent` object,
 which is used to represent a `submit` event
 fired at an HTML form.

Syntax
------


```js
new SubmitEvent(type)
new SubmitEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `submit`.


`options` Optional

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`submitter` Optional

An `HTMLElement` object that is the submit button that triggered the form submission.


### Return value

A `SubmitEvent` object configured using the given inputs.

Examples
--------

 This code snippet locates a form in the current document, and then an HTML
 `<button>` within the form with the class `submit` on it.
 Next, a new `SubmitEvent` is created, configured with
 its `submitter` set to the identified button
 (or `null` if the button wasn't found). Then the event is sent to the form,
 telling the form that it's been submitted by the button.


```js
const form = document.querySelector("form");
const formTrigger = form.querySelector("button.submit");
const submitEvent = new SubmitEvent("submit", { submitter: formTrigger });

form.dispatchEvent(submitEvent);
```


 This is a somewhat contrived example, as you can do nearly all of this much more
 easily, but this gives you deep control over the process that can be useful.

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

| Specification |
| --- |
| HTML Standard # submitevent |

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

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

 The read-only **`submitter`** property found on
 the `SubmitEvent` interface specifies the submit button or other element
 that was invoked to cause the form to be submitted.

Value
-----

 An element, indicating the element that sent
 the `submit` event to the form. While this
 is often an `<input>` element whose `type` is `submit` or a `<button>` element whose `type` is `submit`, it could be some other element which has initiated a
 submission process.

If the submission was not triggered by a button of some kind, the value of `submitter` is `null`.

Examples
--------

See `SubmitEvent` for example code.

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

| Specification |
| --- |
| HTML Standard # the-submitevent-interface:dom-submitevent-submitter-2 |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`hidePopover()`** method of the `HTMLElement` interface hides a popover element (i.e. one that has a valid `popover` attribute) by removing it from the top layer and styling it with `display: none`.

When `hidePopover()` is called on a showing element with the `popover` attribute, a `beforetoggle` event will be fired, followed by the popover being hidden, and then the `toggle` event firing. If the element is already hidden, an error is thrown.

Syntax
------


```js
hidePopover()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the popover is already hidden.

Examples
--------

The following example provides functionality to hide a popover by pressing a particular key on the keyboard.

### HTML


```html
<button popovertarget="mypopover">Toggle popover's display</button>
<div id="mypopover" popover="manual">
  You can press <kbd>h</kbd> on your keyboard to close the popover.
</div>
```

### JavaScript


```js
const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.hidePopover();
  }
});
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-hidepopover |

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

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

See also
--------

* Popover API
HTMLElement: attachInternals() method
=====================================

 The **`HTMLElement.attachInternals()`** method returns an `ElementInternals` object.
 This method allows a custom element to participate in HTML forms. The `ElementInternals` interface provides utilities for working with these elements in the same way you would work with any standard HTML form element, and also exposes the Accessibility Object Model to the element.

Syntax
------


```js
attachInternals()
```

### Parameters

None.

### Return value

An `ElementInternals` object.

### Exceptions

`NotSupportedError` `DOMException`

Thrown if the element is not a custom element.

`NotSupportedError` `DOMException`

Thrown if the "internals" feature was disabled as part of the element definition.

`NotSupportedError` `DOMException`

Thrown if this method is called twice on the same element.

Examples
--------

The following example demonstrates how to create a custom form-associated element with `HTMLElement.attachInternals`. The `ElementInternals.form` property is then printed to the console to demonstrate that we have an `ElementInternals` object.


```js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals_ = this.attachInternals();
  }
  // …
}

window.customElements.define("custom-checkbox", CustomCheckbox);

let element = document.getElementById("custom-checkbox");
console.log(element.internals_.form);
```

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

| Specification |
| --- |
| HTML Standard # dom-attachinternals |

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

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

See also
--------

* More capable form controls
* Creating custom form controls with ElementInternals
HTMLElement: title property
===========================

 The **`HTMLElement.title`** property
 represents the title of the element: the text usually displayed in a 'tooltip' popup
 when the mouse is over the node.

Value
-----

A string.

Examples
--------


```js
const link = document.createElement("a");
link.innerText = "grapes";
link.href = "https://en.wikipedia.org/wiki/Grape";
link.title = "Wikipedia page on grapes";
```

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

| Specification |
| --- |
| HTML Standard # dom-title |

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

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

See also
--------

* The HTML **title**
 global attribute.
HTMLElement: mscandidatewindowupdate 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 **`mscandidatewindowupdate`** event is thrown after the Input Method Editor (IME) candidate window has been identified as needing to change size, but before any visual updates have rendered.

This proprietary method is specific to Internet Explorer.

An IME candidate window may be identified as needing to change size for any of the following reasons:

* As a result of displaying new / changed alternatives or predictions

Web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element).

Syntax
------

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


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

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

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

A generic `Event` with no added properties.

See also
--------

* Microsoft API extensions
* Related events: `mscandidatewindowshow` and `mscandidatewindowhide`