recursal/MDN huggingface dataset:
MutationRecord: removedNodes property
=====================================

The `MutationRecord` read-only property **`removedNodes`** is a `NodeList` of nodes removed from a target node by a mutation observed with a `MutationObserver`.

Value
-----

A `NodeList` containing the nodes removed from the target of the mutation observed by the `MutationObserver`.

Examples
--------

### Observing removed nodes

In the following example, there are two buttons: one to add new nodes to a target node, and one to remove them. A `MutationObserver` is used to observe the target node for changes; when a change is detected, the observer calls a function, `logRemovedNodes()`.

The `logRemovedNodes()` function checks that the MutationRecord's `type` is `childList`, which means that the target node's children have changed. If the type is `childlist` the function updates the total number of nodes that have been removed. However, note that clicking the "Add a node" button will not increment the total number of removed nodes, because in this case `record.removedNodes` will have a length of `0`.

#### HTML


```html
<button id="add-nodes">Add a node</button>
<button id="remove-nodes">Remove a node</button>
<button id="reset">Reset</button>

<pre id="counter">Total removed nodes: 0</pre>
<div id="target"></div>
```


```
#counter {
  border: 1px dotted black;
  padding: 0.5rem;
}
```


#### JavaScript


```js
const addNodes = document.querySelector("#add-nodes");
const removeNodes = document.querySelector("#remove-nodes");
const reset = document.querySelector("#reset");
const counter = document.querySelector("#counter");
const target = document.querySelector("#target");
let totalRemovedNodes = 0;

addNodes.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Current time: ${Date.now()}`;
  target.appendChild(newPara);
});

removeNodes.addEventListener("click", () => {
  const lastChild = target.lastChild;
  if (lastChild) {
    target.removeChild(lastChild);
  }
});

reset.addEventListener("click", () => self.location.reload());

function logRemovedNodes(records) {
  for (const record of records) {
    // Check if the childlist of the target node has been mutated
    if (record.type === "childList") {
      totalRemovedNodes = totalRemovedNodes + record.removedNodes.length;
      // Log the number of nodes added
      counter.textContent = `Total removed nodes: ${totalRemovedNodes}`;
    }
  }
}

const observer = new MutationObserver(logRemovedNodes);
observer.observe(target, { childList: true });
```


#### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationrecord-removednodes② |

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

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

The `MutationRecord` read-only property **`type`** is the type of the `MutationRecord` observed by a `MutationObserver`.

Value
-----

The property is set to the type of the mutation as a string. The value can be one of the following:

* `attributes` if the mutation was an attribute mutation.
* `characterData` if it was a mutation to a `CharacterData` node.
* `childList` if the mutation a mutation to the tree of nodes.
Examples
--------

### Log the type of a mutation

The following example gives you two buttons to manipulate the DOM. The first button adds a new node to the example, and the second button changes the `color` attribute of all the added nodes. A `MutationObserver` is created to observe it all, and the observer is set to log the `type` of the mutation record to `#log`.

You'll notice the when you add a node, the `type` is `childList`, and when you change the `color` attribute, the `type` is `attributes`.

#### HTML


```html
<button id="add-nodes">Add a node</button>
<button id="set-attribute">Change the color</button>

<button id="reset">Reset</button>

<pre id="log">Mutation type:</pre>
<div id="target"><p>Node #0</p></div>
```


```
#log {
  border: 1px dotted black;
  padding: 0.5rem;
}

.blue {
  color: blue;
}

.red {
  color: red;
}
```


#### JavaScript


```js
const addNodes = document.querySelector("#add-nodes");
const setAttribute = document.querySelector("#set-attribute");
const reset = document.querySelector("#reset");
const log = document.querySelector("#log");
const target = document.querySelector("#target");
let nodeNumber = 1;

addNodes.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Node #${nodeNumber}`;
  nodeNumber++;
  target.appendChild(newPara);
});

setAttribute.addEventListener("click", () => {
  if (target.getAttribute("class") === "red") {
    target.setAttribute("class", "blue");
  } else {
    target.setAttribute("class", "red");
  }
});

reset.addEventListener("click", () => self.location.reload());

function logMutationType(records) {
  for (const record of records) {
    log.textContent = `Mutation type: ${record.type}`;
  }
}

const observer = new MutationObserver(logMutationType);
observer.observe(target, { childList: true, attributes: true, subtree: true });
```


#### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationrecord-type② |

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

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

The `MutationRecord` read-only property **`target`** is the target (i.e. the mutated/changed node) of a mutation observed with a `MutationObserver`.

Value
-----

The `Node` that the mutation affected.

* If the record's `type` is `attributes`, this is the `Element` whose attributes changed.
* If the record's `type` is `characterData`, this is the `CharacterData` node.
* If the record's `type` is `childList`, this is the `Node` whose children changed.
Examples
--------

### Logging the target of a mutation

In the following example, there are two divs: a red div (`#red-div`) and a blue div (`#blue-div`), inside a container div `#container`. A `MutationObserver` is created to observe the container. The observer is observing changes to the childlist, and also has `subtree: true` so it will observe changes to the children of the container's children.

The observer callback logs the `target` of the mutation record. When we add nodes to the `#red-div` or the `#blue-div`, the `target` will be the `#red-div` or the `#blue-div`, respectively.

#### HTML


```html
<pre id="log">Target of mutation:</pre>
<button id="add-nodes-to-red-div">Add a node to red div</button>
<button id="add-nodes-to-blue-div">Add a node to blue div</button>
<button id="reset">Reset</button>
<div id="container">
  <div id="red-div"></div>
  <div id="blue-div"></div>
</div>
```


```
#log {
  border: 1px dotted black;
  padding: 0.5rem;
}

#red-div {
  border: 1px solid red;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  padding: 0.5rem;
  overflow: auto;
}

#blue-div {
  border: 1px solid blue;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  padding: 0.5rem;
  overflow: auto;
}

#container {
  display: grid;
  grid-template-columns: 50% auto;
}
```


#### JavaScript


```js
const container = document.querySelector("#container");
const redDiv = document.querySelector("#red-div");
const blueDiv = document.querySelector("#blue-div");
const addToRed = document.querySelector("#add-nodes-to-red-div");
const addToBlue = document.querySelector("#add-nodes-to-blue-div");
const reset = document.querySelector("#reset");
const log = document.querySelector("#log");

addToRed.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Current time: ${Date.now()}`;
  redDiv.appendChild(newPara);
});

addToBlue.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Current time: ${Date.now()}`;
  blueDiv.appendChild(newPara);
});

reset.addEventListener("click", () => self.location.reload());

function logMutationTarget(records) {
  for (const record of records) {
    log.textContent = `Target of mutation: ${record.target.id}`;
  }
}

const observer = new MutationObserver(logMutationTarget);
observer.observe(container, { childList: true, subtree: true });
```


#### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationrecord-target② |

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

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

The `MutationRecord` read-only property **`attributeNamespace`** is the namespace of the mutated attribute in the `MutationRecord` observed by a `MutationObserver`.

Value
-----

If the record's `type` is `attributes`, the property is a string representing the namespace of the mutated attribute of the mutation target. The value is `null` otherwise.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationrecord-attributenamespace② |

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

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

The `MutationRecord` read-only property **`previousSibling`** is the previous sibling of an added or removed child node of the `target` of a `MutationObserver`.

Value
-----

If a node is added to or removed from the `target` of a `MutationObserver`, the value is the `Node` that is the previous sibling of the added or removed node: that is, the node immediately before this one in the parent's `childNodes` list.

The value is `null` if there are no added or removed nodes, or if the node is the first child of its parent.

Examples
--------

### Log the previous sibling of a mutation

This adds a node every time you click the button. Then the observer logs the `textContent` of the `previousSibling` of the added node.

#### HTML


```html
<button id="add-nodes">Add a node</button>
<button id="reset">Reset</button>

<pre id="log" class="log">Previous sibling of added node:</pre>
<div id="target"><p>Node #0</p></div>
```


```
.log {
  border: 1px dotted black;
  padding: 0.5rem;
}
```


#### JavaScript


```js
const addNodes = document.querySelector("#add-nodes");
const reset = document.querySelector("#reset");
const target = document.querySelector("#target");
let nodeNumber = 1;

addNodes.addEventListener("click", () => {
  const newPara = document.createElement("p");
  newPara.textContent = `Node #${nodeNumber}`;
  nodeNumber++;
  target.appendChild(newPara);
});

reset.addEventListener("click", () => self.location.reload());

function logPreviousSibling(records) {
  for (const record of records) {
    if (record.type === "childList") {
      for (const newNode of record.addedNodes) {
        log.textContent = `Previous sibling of added node: ${newNode.previousSibling?.textContent}`;
      }
    }
  }
}

const observer = new MutationObserver(logPreviousSibling);
observer.observe(target, { childList: true });
```


#### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationrecord-previoussibling② |

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

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

The `MutationRecord` read-only property **`attributeName`** contains the name of a changed attribute belonging to a node that is observed by a `MutationObserver`.

Value
-----

If the record's `type` is `attributes`, this is a string representing the name of the mutated attribute of the mutation target.

If the record's `type` is not `attributes`, this is `null`.

Examples
--------

### Get last updated attribute name

In the following example, there are four buttons: two change the `style` attribute of the `h1` element, and two change the `class` attribute of the `h1` element. The script uses a `MutationObserver` to detect the changes and will update the text below to the name of the last attribute that was changed.

#### HTML


```html
<h1 class="blue" style="color:black;" id="hiMom">Hi, Mom!</h1>

<button id="redButton">Set class to "red"</button>
<button id="blueButton">Set class to "blue"</button>
<button id="whiteButton">Set style to "color:white;"</button>
<button id="blackButton">Set style to "color:black;"</button>

<p id="log">Updated attribute name:</p>
```


#### CSS


```css
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
```


#### JavaScript


```js
const hiMom = document.querySelector("#hiMom");
const redButton = document.querySelector("#redButton");
const blueButton = document.querySelector("#blueButton ");
const whiteButton = document.querySelector("#whiteButton");
const blackButton = document.querySelector("#blackButton");
const log = document.querySelector("#log");

redButton.addEventListener("click", () => {
  hiMom.classList.add("red");
  hiMom.classList.remove("blue");
});

blueButton.addEventListener("click", () => {
  hiMom.classList.add("blue");
  hiMom.classList.remove("red");
});

whiteButton.addEventListener("click", () => {
  hiMom.style.color = "white";
});

blackButton.addEventListener("click", () => {
  hiMom.style.color = "black";
});

function logLastAttr(mutationRecordArray) {
  for (const record of mutationRecordArray) {
    if (record.type === "attributes") {
      log.textContent = `Updated attribute name: ${record.attributeName}`;
    }
  }
}

const observer = new MutationObserver(logLastAttr);
observer.observe(hiMom, { attributes: true });
```


#### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-mutationrecord-attributename② |

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

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

The **`add()`** method of the `DOMTokenList` interface adds the given tokens to the list, omitting any that are already present.

Syntax
------


```js
add(token1)
add(token1, token2)
add(token1, token2, /\* …, \*/ tokenN)
```

### Parameters

`tokenN`

A string representing a token (or tokens) to add to the `DOMTokenList`.

### Return value

None.

### Exceptions

`SyntaxError` `DOMException`

Thrown if one of the arguments is an empty string

`InvalidCharacterError` `DOMException`

Thrown if a token contains ASCII whitespace.

Examples
--------

 In the following example, we retrieve the list of classes set on a `<span>` element as a `DOMTokenList`, using `Element.classList`.
 We then add a new token to the list, and write the list into the `<span>`'s `Node.textContent`.

First, the HTML:


```html
<span class="a b c"></span>
```


Now the JavaScript:


```js
const span = document.querySelector("span");
const classes = span.classList;
classes.add("d");
span.textContent = classes;
```


The output looks like this:

You can add multiple tokens as well:


```js
span.classList.add("d", "e", "f");
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-add① |

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

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

 The **`entries()`** method of the `DOMTokenList` interface
 returns an `iterator` allowing you
 to go through all key/value pairs contained in this object. The values are
 `Array`s which have [key, value] pairs, each representing a single token.

Syntax
------


```js
entries()
```

### Return value

Returns an `iterator`.

Examples
--------

 In the following example we retrieve the list of classes set on a
 `<span>` element as a `DOMTokenList` using
 `Element.classList`. We when retrieve an iterator containing the key/value
 pairs using `entries()`, then iterate through each one using a
 `for...of` loop, writing them to the
 `<span>`'s `Node.textContent`.

First, the HTML:


```html
<span class="a b c"></span>
```


Now the JavaScript:


```js
const span = document.querySelector("span");
const classes = span.classList;
const iterator = classes.entries();

for (const value of iterator) {
  span.textContent += `(${value})`;
}
```


The output looks like this:

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

#### No specification found

No specification data found for `api.DOMTokenList.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* `DOMTokenList.foreach()`, `DOMTokenList.keys` and `DOMTokenList.values`.
DOMTokenList: supports() method
===============================

 The **`supports()`** method of the `DOMTokenList` interface
 returns `true` if a given `token` is in the associated attribute's supported tokens.
 This method is intended to support feature detection.

Syntax
------


```js
supports(token)
```

### Parameters

`token`

A string containing the token to query for.

### Returns

A boolean value indicating whether the token was found.

Example
-------


```js
const iframe = document.getElementById("display");

if (iframe.sandbox.supports("an-upcoming-feature")) {
  // support code for mystery future feature
} else {
  // fallback code
}

if (iframe.sandbox.supports("allow-scripts")) {
  // instruct frame to run JavaScript
  //
  // (NOTE: This feature is well-supported; this is just an example!)
  //
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-supports① |

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

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

 The **`item()`** method of the `DOMTokenList` interface returns an item in the list,
 determined by its position in the list, its index.


**Note:** This method is equivalent as the bracket notation.
 So `aList.item(i)` is the same as `aList[i]`.


Syntax
------


```js
tokenList.item(index)
```

### Parameters

`index`

A number representing the index of the item you want to return. If it isn't an integer, only the integer part is considered.

### Return value

 A string representing the returned item,
 or `null` if the number is greater than or equal to the `length` of the list.

### Exceptions

`TypeError`

Thrown if the `index` cannot be converted to an integer.

Examples
--------

 In the following example we retrieve the list of classes set on a
 `<span>` element as a `DOMTokenList` using
 `Element.classList`. We then retrieve the last item in the list using
 `item(tokenList.length - 1)`, and write it into the
 `<span>`'s `Node.textContent`.

First, the HTML:


```html
<span class="a b c"></span>
```


Now the JavaScript:


```js
const span = document.querySelector("span");
const classes = span.classList;
const item = classes.item(classes.length - 1);
span.textContent = item;
```


The output looks like this:

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-item① |

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

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

 The **`replace()`** method of the `DOMTokenList` interface
 replaces an existing token with a new token.
 If the first token doesn't exist, `replace()` returns `false` immediately,
 without adding the new token to the token list.

Syntax
------


```js
replace(oldToken, newToken)
```

### Parameters

`oldToken`

A string representing the token you want to replace.

`newToken`

A string representing the token you want to replace `oldToken` with.

### Return value

 A boolean value, which is `true` if `oldToken` was
 successfully replaced, or `false` if not.

Examples
--------

 In the following example we retrieve the list of classes set on a
 `<span>` element as a `DOMTokenList` using
 `Element.classList`. We then replace a token in the list, and write the
 list into the `<span>`'s `Node.textContent`.

First, the HTML:


```html
<span class="a b c"></span>
```


Now the JavaScript:


```js
const span = document.querySelector("span");
const classes = span.classList;

const result = classes.replace("c", "z");

span.textContent = result ? classes : "token not replaced successfully";
```


The output looks like this:

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-replace① |

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

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

 The **`remove()`** method of the `DOMTokenList` interface
 removes the specified *tokens* from the list.

Syntax
------


```js
remove(token1)
remove(token1, token2)
remove(token1, token2, /\* …, \*/ tokenN)
```

### Parameters

`token1`, …, `tokenN`

 A string representing the token you want to remove from the list.
 If the string is not in the list, no error is thrown, and nothing happens.


### Return value

None (`undefined`).

Examples
--------

 In the following example we retrieve the list of classes set on a
 `<span>` element as a `DOMTokenList` using
 `Element.classList`. We then remove a token from the list, and write the
 list into the `<span>`'s `Node.textContent`.

First, the HTML:


```html
<div id="ab" class="a b c"></div>
<div id="a" class="a b c"></div>
```


Now the JavaScript:


```js
const span = document.getElementById("ab");
const classes = span.classList;
classes.remove("c");
span.textContent = classes;
```


 To remove multiple classes at once, you can supply multiple tokens. The order you
 supply the tokens doesn't have to match the order they appear in the list:


```js
const span2 = document.getElementById("a");
const classes2 = span2.classList;

classes2.remove("c", "b");
span2.textContent = classes2;
```


The output looks like this:

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

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

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

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

 The **`value`** property of the `DOMTokenList`
 interface is a stringifier that returns the value of the list serialized as a
 string, or clears and sets the list to the given value.

Value
-----

 A string representing the serialized content of the list.
 Each item is separated by a space.

Examples
--------

 In the following example we retrieve the list of classes set on a
 `<span>` element as a `DOMTokenList` using
 `Element.classList`, then write the value of the list to the
 `<span>`'s `Node.textContent`.

First, the HTML:


```html
<span class="a b c"></span>
```


Now the JavaScript:


```js
const span = document.querySelector("span");
const classes = span.classList;
span.textContent = classes.value;
```


The output looks like this:

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-domtokenlist-value② |

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

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