recursal/MDN huggingface dataset:
CharacterData: remove() method
==============================

The **`remove()`** method of the `CharacterData` removes the text contained in the node.

Syntax
------


```js
remove()
```

### Parameters

None.

Example
-------

### Using `remove()`


```html
<span>Result: </span>A long string.
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.remove(); // Removes the text
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-remove① |

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

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

See also
--------

* `Element.remove()`
* `CharacterData.deleteData()`
CharacterData: appendData() method
==================================

 The **`appendData()`** method of the `CharacterData` interface
 adds the provided data to the end of the node's current data.

Syntax
------


```js
appendData(data)
```

### Parameters

`data`

The data to append to the current node.

### Return value

None.

Example
-------


```html
<span>Result: </span>A text
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.appendData(" - appended text.");
```

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

| Specification |
| --- |
| DOM Standard # dom-characterdata-appenddata |

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

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

See also
--------

* `CharacterData.deleteData()`, `CharacterData.insertData()`, `CharacterData.replaceData()`
* `CharacterData.data`
CharacterData: substringData() method
=====================================

 The **`substringData()`** method of the `CharacterData` interface
 returns a portion of the existing data,
 starting at the specified index
 and extending for a given number of characters afterwards.

Syntax
------


```js
  domString = characterData.substringData(offset, count)
```

### Parameters

`offset`

 The index of the first character to include in the returned substring.
 `0` is the first character of the string.


`count`

The number of characters to return.

### Return value

A string with the substring.

Exceptions
----------

`IndexSizeError` `DOMException`

Thrown if `offset` + `count` is larger than the length of the contained data.

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

| Specification |
| --- |
| DOM Standard # dom-characterdata-substringdata |

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

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

 The **`replaceWith()`** method of the `CharacterData` interface
 replaces this node in the children list of its parent
 with a set of `Node` objects or string.

Strings are inserted as `Text` nodes; the string is being passed as argument to the `Text()` constructor.

Syntax
------


```js
replaceWith(...nodes)
```

### Parameters

`nodes` Optional

A comma-separated list of `Node` objects or strings that will replace the current node.


**Note:** If there no argument is passed, this method acts just remove the node from the DOM tree.

### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples
--------


```html
<p id="myText">Some text</p>
```



```js
let text = document.getElementById("myText").firstChild;
let em = document.createElement("em");
em.textContent = "Italic text";

text.replaceWith(em); // Replace `Some text` by `Italic text`
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-replacewith① |

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

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

See also
--------

* `CharacterData.replaceData()`
CharacterData: nextElementSibling property
==========================================

 The read-only **`nextElementSibling`** property of the `CharacterData` interface
 returns the first `Element` node following the specified one in its parent's
 children list, or `null` if the specified element is the last one in the list.

Value
-----

A `Element` object, or `null` if no sibling has been found.

Example
-------


```html
TEXT
<div id="div-01">Here is div-01</div>
TEXT2
<div id="div-02">Here is div-02</div>
<pre>Here is the result area</pre>
```



```js
// Initially, set node to the Text node with `TEXT`
let node = document.getElementById("div-01").previousSibling;

let result = "Next element siblings of TEXT:\n";

while (node) {
  result += `${node.nodeName}\n`;
  node = node.nextElementSibling; // The first node is a CharacterData, the others Element objects
}

document.querySelector("pre").textContent = result;
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-nextelementsibling② |

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

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

See also
--------

* `CharacterData.previousElementSibling`
CharacterData: before() method
==============================

 The **`before()`** method of the `CharacterData` interface
 inserts a set of `Node` objects and strings
 in the children list of the `CharacterData`'s parent, just before the `CharacterData` node.

Strings are inserted as `Text` nodes; the string is being passed as argument to the `Text()` constructor.

Syntax
------


```js
before(...nodes)
```

### Parameters

`nodes`

A set of `Node` or strings to insert.

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the new nodes cannot be inserted at the specified point in the hierarchy, that is if one of the following conditions is met:

* If the insertion of one of the added node would lead to a cycle, that is if one of them is an ancestor of this `CharacterData` node.
* If one of the added node is not a `DocumentFragment`, a `DocumentType`, an `Element`, or a `CharacterData`.
* If this `CharacterData` node is actually a `Text` node, and its parent is a `Document`.
* If the parent of this `CharacterData` node is a `Document` and one of the nodes to insert is a `DocumentFragment` with more than one `Element` child, or that has a `Text` child.

Examples
--------

 The `before()` method allows you to insert new nodes before a
 `CharacterData` node leaving the current node's data unchanged.


```js
const h1TextNode = document.querySelector("h1").firstChild;
h1TextNode.before("h1# ");

h1TextNode.parentElement.childNodes;
// NodeList [#text "h1# ", #text "CharacterData.before()"]

h1TextNode.data;
// "CharacterData.before()"
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-before① |

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

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

See also
--------

* `CharacterData.appendData()`
* `CharacterData.after()`
* `Element.append()`
* `Node.appendChild()`
* `Element.insertAdjacentElement()`
CharacterData: insertData() method
==================================

 The **`insertData()`** method of the `CharacterData` interface
 inserts the provided data into this `CharacterData` node's current data,
 at the provided offset from the start of the existing data.
 The provided data is spliced into the existing data.

Syntax
------


```js
characterData.insertData(offset, data)
```

### Parameters

`offset`

 The offset number of characters to insert the provided data at.
 `0` is the first character of the string.


`data`

The data to insert.

### Return value

None.

Exceptions
----------

`IndexSizeError` `DOMException`

Thrown if offset is negative or greater than the length of the contained data.

Example
-------


```html
<span>Result: </span>A string.
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.insertData(2, "long ");
```

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

| Specification |
| --- |
| DOM Standard # dom-characterdata-insertdata |

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

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

See also
--------

* `CharacterData.appendData()`, `CharacterData.deleteData()`, `CharacterData.replaceData()`
* `CharacterData.data`
CharacterData: previousElementSibling property
==============================================

 The read-only **`previousElementSibling`** of the `CharacterData` interface
 returns the first `Element` before the current node in its parent's children list,
 or `null` if there is none.

Value
-----

A `Element` object, or `null` if no sibling has been found.

Example
-------


```html
<div id="div-01">Here is div-01</div>
TEXT
<div id="div-02">Here is div-02</div>
SOME TEXT
<div id="div-03">Here is div-03</div>
<pre>Result</pre>
```



```js
// Initially set node to the Text node with `SOME TEXT`
let node = document.getElementById("div-02").nextSibling;

let result = "Previous element siblings of SOME TEXT:\n";

while (node) {
  result += `${node.nodeName}\n`;
  node = node.previousElementSibling;
}

document.querySelector("pre").textContent = result;
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-previouselementsibling② |

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

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

See also
--------

* `CharacterData.nextElementSibling`
CharacterData: after() method
=============================

 The **`after()`** method of the `CharacterData` interface
 inserts a set of `Node` objects or strings in the children list of the
 object's parent, just after the object itself.

Strings are inserted as `Text` nodes; the string is being passed as argument to the `Text()` constructor.

Syntax
------


```js
after(...nodes)
```

### Parameters

`nodes`

A set of `Node` or strings to insert.

### Exceptions

`HierarchyRequestError` `DOMException`

 Thrown when the new nodes cannot be inserted at the specified point in the hierarchy,
 that is if one of the following conditions is met:


* If the insertion of one of the added node would lead to a cycle, that is if one of them is an ancestor of this `CharacterData` node.
* If one of the added node is not a `DocumentFragment`, a `DocumentType`, an `Element`, or a `CharacterData`.
* If this `CharacterData` node is actually a `Text` node, and its parent is a `Document`.
* If the parent of this `CharacterData` node is a `Document` and one of the nodes to insert is a `DocumentFragment` with more than one `Element` child, or that has a `Text` child.

Examples
--------

The `after()` method allows you to insert new nodes after a `CharacterData` node.


```js
const h1TextNode = document.querySelector("h1").firstChild;
h1TextNode.after(" #h1");

h1TextNode.parentElement.childNodes;
// NodeList [#text "CharacterData.after()", #text " #h1"]

h1TextNode.data;
// "CharacterData.after()"
```


**Note:** If you rather want to append text to the current node,
 the `appendData()` method lets you append to the current node's data.


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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-after① |

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

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

See also
--------

* `CharacterData.appendData()`
* `CharacterData.before()`
* `Element.append()`
* `Node.appendChild()`
* `Element.insertAdjacentElement()`
CharacterData: length property
==============================

 The read-only **`CharacterData.length`** property
 returns the number of characters in the contained data, as a positive integer.

Value
-----

A positive integer with the length of the `CharacterData.data` string.

Example
-------

**Note:** `CharacterData` is an abstract interface.
 The examples below use `Text`, a concrete interface implementing it.



```html
Length of the string in the <code>Text</code> node: <output></output>
```



```js
const output = document.querySelector("output");
const textnode = new Text("This text has been set using 'textnode.data'.");

output.value = textnode.length;
```

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

| Specification |
| --- |
| DOM Standard # dom-characterdata-length |

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

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

The **`replaceData()`** method of the `CharacterData` interface removes a certain number of characters of the existing text in a given `CharacterData` node and replaces those characters with the text provided.

Syntax
------


```js
characterData.replaceData(offset, count, data)
```

### Parameters

`offset`

 The number of characters from the start of the data to insert at.
 `0` is the first character of the string.


`count`

The number of characters to replace with the provided data.

`data`

The data to insert.

### Return value

None.

Exceptions
----------

`IndexSizeError` `DOMException`

Thrown if `offset` or `count` is negative or `offset` is greater than the length of the contained data.

Example
-------


```html
<span>Result: </span>A long string.
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.replaceData(2, 4, "replaced");
```

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

| Specification |
| --- |
| DOM Standard # dom-characterdata-replacedata |

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

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

See also
--------

* `CharacterData.appendData()`
* `CharacterData.deleteData()`
* `CharacterData.insertData()`
* `CharacterData.data`
CharacterData: data property
============================

The **`data`** property of the `CharacterData` interface represent the value of the current object's data.

Value
-----

A string with the character information contained in the `CharacterData` node.

Example
-------

**Note:** `CharacterData` is an abstract interface.
 The examples below use two concrete interfaces implementing it, `Text` and `Comment`.


### Reading a comment using data


```html
<!-- This is an HTML comment -->
<output id="result"></output>
```



```js
const comment = document.body.childNodes[1];
const output = document.getElementById("result");

output.value = comment.data;
```

### Setting the content of a text node using data


```html
<span>Result: </span>Not set.
```



```js
const span = document.querySelector("span");
const textnode = span.nextSibling;

textnode.data = "This text has been set using 'textnode.data'.";
```

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

| Specification |
| --- |
| DOM Standard # dom-characterdata-data |

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

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

See also
--------

* `CharacterData.length` returning the length of the data contained in the `CharacterData` node.
RTCDTMFToneChangeEvent: RTCDTMFToneChangeEvent() constructor
============================================================

 The **`RTCDTMFToneChangeEvent()`** constructor creates a new
 `RTCDTMFToneChangeEvent` object.

Syntax
------


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

### Parameters

`type`

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


`options` Optional

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

`tone` Optional

 A string containing a single DTMF tone character which has
 just begun to play, or an empty string (`""`) to indicate that the previous
 tone has stopped playing. It defaults to `""`.
 See Tone characters
 for details on what characters are permitted.



### Return value

 A new `RTCDTMFToneChangeEvent` object, configured as specified in the
 provided options.

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcdtmftonechangeevent-constructor |

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

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

See also
--------

* WebRTC
* Using DTMF with WebRTC
* Its usual target: `RTCDTMFSender`.
RTCDTMFToneChangeEvent: tone property
=====================================

 The read-only property **`RTCDTMFToneChangeEvent.tone`**
 returns the DTMF character which has just begun to play, or an empty string
 (`""`). if all queued tones have finished playing (that is,
 `RTCDTMFSender.toneBuffer` is empty).

Value
-----

A string with the DTML character playing, or the empty string.

Example
-------

 This example establishes a handler for the `tonechange` event which updates
 an element to display the currently playing tone in its content, or, if all tones have
 played, the string "<none>".


```js
dtmfSender.ontonechange = (ev) => {
  let tone = ev.tone;
  if (tone === "") {
    tone = "&lt;none&gt;";
  }

  document.getElementById("playingTone").innerText = tone;
};
```

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

| Specification |
| --- |
| WebRTC: Real-Time Communication in Browsers # dom-rtcdtmftonechangeevent-tone |

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

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

See also
--------

* WebRTC
* Using DTMF with WebRTC
* `tonechange`
* `RTCDTMFToneChangeEvent`
CSSNumericArray: length property
================================

 The read-only **`length`** property of the
 `CSSNumericArray` interface returns the number of
 `CSSNumericValue` objects in the list.

Value
-----

 An integer representing the number of `CSSNumericValue` objects in the
 list.

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericarray-length |

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

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

 The **`y`** property of the
 `CSSRotate` interface gets and sets the ordinate or y-axis of the
 translating vector.

Value
-----

A double integer or a `CSSNumericValue`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssrotate-y |

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

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

 The **`angle`** property of the
 `CSSRotate` interface gets and sets the angle of rotation. A positive angle
 denotes a clockwise rotation, a negative angle a counter-clockwise one.

Value
-----

A `CSSNumericValue`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssrotate-angle |

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

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

 The **`x`** property of the
 `CSSRotate` interface gets and sets the abscissa or x-axis of the
 translating vector.

Value
-----

A double integer or a `CSSNumericValue`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssrotate-x |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSRotate: CSSRotate() constructor
==================================

 The **`CSSRotate()`** constructor creates a new
 `CSSRotate` object representing the rotate() value of the
 individual `transform` property in CSS.

Syntax
------


```js
new CSSRotate(x, y, z, angle)
```

### Parameters

`x`

 A value for the x-axis of the `CSSRotate` object to be constructed.
 This must either be a double integer or a `CSSNumericValue`.


`y`

 A value for the y-axis of the `CSSRotate` object to be constructed.
 This must either be a double integer or a `CSSNumericValue`.


`z`

 A value for the z-axis of the `CSSRotate` object to be constructed.
 This must either be a double integer or a `CSSNumericValue`.


`angle`

 A value for the angle of the `CSSRotate` object to be constructed. This
 must be a `CSSNumericValue`.


### Exceptions

`TypeError`

 Raised if the value of `CSSRotate.angle` is not an <angle> value
 or `CSSRotate.x`, `CSSRotate.y`, `CSSRotate.z` are
 not <number> values.


Examples
--------

To do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssrotate-cssrotate |
| CSS Typed OM Level 1 # dom-cssrotate-cssrotate-x-y-z-angle |

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

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

 The **`z`** property of the
 `CSSRotate` interface representing the z-component of the translating
 vector. A positive value moves the element towards the viewer, and a negative value
 farther away.

Value
-----

A double integer or a `CSSNumericValue`

Examples
--------

To Do

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssrotate-z |

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

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

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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`request`** read-only property of the `BackgroundFetchRecord` interface returns the details of the resource to be fetched.

Value
-----

A `Request`.

Examples
--------

In this example an individual `BackgroundFetchRecord` is returned using `BackgroundFetchManager.fetch()`. The `request` is returned and logged to the console.


```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("No record found");
    return;
  }

  console.log(`Here's the request`, record.request);
});
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchrecord-request |

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

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

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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`responseReady`** read-only property of the `BackgroundFetchRecord` interface returns a `Promise` that resolves with a `Response`.

Value
-----

A `Promise` that resolves with a `Response`.

Examples
--------

In this example an individual `BackgroundFetchRecord` is returned using `BackgroundFetchManager.fetch()`. The value of `responseReady` is returned and logged to the console.


```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("No record found");
    return;
  }

  const response = await record.responseReady;
  console.log(`Here's the response`, response);
});
```

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchrecord-responseready |

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

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