recursal/MDN huggingface dataset:
NamedNodeMap: item() method
===========================

 The **`item()`** method of the `NamedNodeMap` interface
 returns the item in the map matching the index.


**Note:** This method is also called when you use the operator `[]` syntax.
 So, `myMap[i]`is equivalent to `myMap.item(i)` where `i` is a number.


Syntax
------


```js
item(index)
[index]
```

### Parameters

`index`

A number representing the index of the item you want to return.

### Return value

 An `Attr` or `null` if the number is greater than or equal to the `length` of
 the map.

Example
-------


```html
<pre zero="test" one="test" two="test"></pre>
```



```js
const pre = document.querySelector("pre");
const attrMap = pre.attributes;

pre.textContent = `The attribute map contains:
0: ${attrMap.item(0).name}
1: ${attrMap[1].name}
2: ${attrMap.item(2).name}`;
```

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

| Specification |
| --- |
| DOM Standard # dom-namednodemap-item |

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

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

 The **`setNamedItemNS()`** method of the `NamedNodeMap` interface
 puts the `Attr` identified by its name in the map.
 If there was already an `Attr` with the same name in the map,
 it is *replaced*.


**Note:** This method is an alias of `setNamedItem()` you can use them
 interchangeably.


Syntax
------


```js
setNamedItemNS(attr)
```

### Parameters

`attr`

The attribute to insert in the map.

### Return value

Returns the old attribute if replaced, or `null` if the attribute is new.

### Exceptions

`InUseAttributeError` `DOMException`

Thrown if the attribute is still part of another map.

Example
-------


```html
<span ob:one="one"></span>
<pre></pre>
```



```js
const parser = new DOMParser();
// ob:one in <span> is not in a namespace, while ob:one in <warning>, is.
const xmlString =
  '<warning ob:one="test" xmlns:ob="http://www.example.com/ob">Beware!</warning>';
const doc = parser.parseFromString(xmlString, "application/xml");

const span = document.querySelector("span");
const pre = document.querySelector("pre");
const warning = doc.querySelector("warning");
const attrMap = span.attributes;

let result = `The '<span>' element initially contains ${attrMap.length} attribute.\n\n`;

result += "We remove `one` from '<span>' and adds it to '<pre>'.\n";
const one = warning.attributes.removeNamedItemNS(
  "http://www.example.com/ob",
  "one",
);
attrMap.setNamedItemNS(one);
result += `The '<span>' element now contains ${span.attributes.length} attributes:\n\n`;
result += "Prefix\tLocal name\tQualified name\n";
result += "=========================================\n";

for (const attr of attrMap) {
  result += `${attr.prefix}\t${attr.localName}\t\t${attr.name}\n`;
}

pre.textContent = result;
```

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

| Specification |
| --- |
| DOM Standard # dom-namednodemap-setnameditemns |

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

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

 The **`deleteRule()`** method of the
 `CSSGroupingRule` interface removes a CSS rule from a list of child CSS
 rules.

Syntax
------


```js
deleteRule(index)
```

### Parameters

`index`

The index of the rule to delete.

### Return value

None (`undefined`).

### Exceptions

`IndexSizeError` `DOMException`

 Thrown if *index* is greater than or equal to the number of child CSS
 rules.


`InvalidStateError` `DOMException`

Thrown if the rule being removed is an `@namespace` at-rule, and the list of child CSS rules contains anything other than `@import` at-rules and `@namespace` at-rules.

Examples
--------


```js
let myRules = document.styleSheets[0].cssRules;
myRules[0].deleteRule(2); /\* deletes the rule at index 2 \*/
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-deleterule |

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

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

 The **`cssRules`** property of the
 `CSSGroupingRule` interface returns a `CSSRuleList` containing
 a collection of `CSSRule` objects.

Value
-----

a `CSSRuleList`.

Examples
--------


```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-cssrules |

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

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

 The **`insertRule()`** method of the
 `CSSGroupingRule` interface adds a new CSS rule to a list of CSS rules.

Syntax
------


```js
insertRule(rule)
insertRule(rule, index)
```

### Parameters

`rule`

A string

`index` Optional

An optional index at which to insert the rule; defaults to 0.

### Return value

The index of the new rule.

### Exceptions

`IndexSizeError` `DOMException`

Thrown if *index* is greater than the number of child CSS rules.

`HierarchyRequestError` `DOMException`

 Thrown if, due to constraints specified by CSS, the new rule cannot be inserted into
 the list at the (zero-index) index position given.


`InvalidStateError` `DOMException`

Thrown if the new rule is an `@namespace` at-rule, and the list of child CSS rules contains anything other than `@import` at-rules and `@namespace` at-rules.

Examples
--------


```js
let myRules = document.styleSheets[0].cssRules;
myRules[0].insertRule(
  "html {background-color: blue;}",
  0,
); /\* inserts a rule for the HTML element at position 0 \*/
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssgroupingrule-insertrule |

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

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

 The **`remote`** property of the
 **`RTCIceCandidatePair`** dictionary specifies the
 `RTCIceCandidate` describing the configuration of the remote end of a
 viable WebRTC connection.

Value
-----

 An `RTCIceCandidate` which describes the configuration of the remote end
 of a viable pair of ICE candidates. The `RTCIceCandidatePair` is returned by
 the `RTCIceTransport` method
 `getSelectedCandidatePair()`.

Examples
--------

 This one-line example obtains the current candidate pair and then from that gets the
 remote candidate.


```js
const candidatePair = pc
  .getSenders()[0]
  .transport.transport.getSelectedCandidatePair();
const remoteCandidate = candidatePair.remote;
```


 The `RTCIceTransport` is found by getting the list of
 `RTCRtpSender` objects for the `RTCPeerConnection`
`pc`. In the first `RTCRtpSender`, we get the
 `RTCDtlsTransport` over which the media data is being transmitted and
 finally, from that, the `RTCIceTransport`.

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

#### No specification found

No specification data found for `api.RTCIceCandidatePair.remote`.  
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.
RTCIceCandidatePair: local property
===================================

 The **`local`** property of the
 **`RTCIceCandidatePair`** dictionary specifies the
 `RTCIceCandidate` which describes the configuration of the local end of a
 viable WebRTC connection.

Value
-----

 An `RTCIceCandidate` which describes the configuration of the local end of
 a viable pair of ICE candidates. The `RTCIceCandidatePair` is returned by the
 `RTCIceTransport` method
 `getSelectedCandidatePair()`.

Examples
--------

 This one-line example obtains the current candidate pair and then from that gets the
 local candidate.


```js
const candidatePair = pc
  .getSenders()[0]
  .transport.transport.getSelectedCandidatePair();
const localCandidate = candidatePair.local;
```


 The `RTCIceTransport` is found by getting the list of
 `RTCRtpSender` objects for the `RTCPeerConnection`
`pc`. In the first `RTCRtpSender`, we get the
 `RTCDtlsTransport` over which the media data is being transmitted and
 finally, from that, the `RTCIceTransport`.

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

#### No specification found

No specification data found for `api.RTCIceCandidatePair.local`.  
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.
CSSScopeRule: start property
============================

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

The **`start`** property of the `CSSScopeRule` interface returns a string containing the value of the `@scope` at-rule's scope root.

Value
-----

A string, or `null` if the `@scope` at-rule has no scope root defined.

Example
-------

See the main `CSSScopeRule` page for an example.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 6 # dom-cssscoperule-start |

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

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

See also
--------

* `@scope`
CSSScopeRule: end property
==========================

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

The **`end`** property of the `CSSScopeRule` interface returns a string containing the value of the `@scope` at-rule's scope limit.

Value
-----

A string, or `null` if the `@scope` at-rule has no scope limit defined.

Example
-------

See the main `CSSScopeRule` page for an example.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 6 # dom-cssscoperule-end |

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

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

See also
--------

* `@scope`
FileSystemFileHandle: createWritable() method
=============================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`createWritable()`** method of the `FileSystemFileHandle` interface creates a `FileSystemWritableFileStream` that can be used to write to a file.
 The method returns a `Promise` which resolves to this created stream.

 Any changes made through the stream won't be reflected in the file represented by the file handle until the stream has been closed.
 This is typically implemented by writing data to a temporary file, and only replacing the file represented by file handle with the temporary file when the writable filestream is closed.

Syntax
------


```js
createWritable()
createWritable(options)
```

### Parameters

`options` Optional

An object with the following properties:

`keepExistingData` Optional

 A `Boolean`. Default `false`.
 When set to `true` if the file exists, the existing file is first copied to the temporary file.
 Otherwise the temporary file starts out empty.



### Return value

A `Promise` which resolves to a `FileSystemWritableFileStream` object.

### Exceptions

`NotAllowedError` `DOMException`

Thrown if the `PermissionStatus.state` for the handle is not `'granted'` in `readwrite` mode.

`NotFoundError` `DOMException`

Thrown if current entry is not found.

`NoModificationAllowedError` `DOMException`

Thrown if the browser is not able to acquire a lock on the file associated with the file handle.

`AbortError` `DOMException`

Thrown if implementation-defined malware scans and safe-browsing checks fails.

Examples
--------

The following asynchronous function writes the given contents to the file handle, and thus to disk.


```js
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();

  // Write the contents of the file to the stream.
  await writable.write(contents);

  // Close the file and write the contents to disk.
  await writable.close();
}
```

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

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-createwritable |

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

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

See also
--------

* File System API
* The File System Access API: simplifying access to local files
FileSystemFileHandle: getFile() method
======================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`getFile()`** method of the
 `FileSystemFileHandle` interface returns a `Promise` which resolves to a
 `File` object representing the state on disk of the entry represented by the handle.

 If the file on disk changes or is removed after this method is called, the returned
 `File` object will likely be no longer readable.

Syntax
------


```js
getFile()
```

### Parameters

None.

### Return value

A `Promise` which resolves to a `File` object.

### Exceptions

`NotAllowedError` `DOMException`

Thrown if the `PermissionStatus.state` is not `granted` in `read` mode.

`NotFoundError` `DOMException`

Thrown if current entry is not found.

Examples
--------

 The following asynchronous function presents a file picker and once a file is chosen,
 uses the `getFile()` method to retrieve the contents.


```js
async function getTheFile() {
  // open file picker
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // get file contents
  const fileData = await fileHandle.getFile();
}
```

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

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-getfile |

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

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

See also
--------

* File System API
* The File System Access API: simplifying access to local files
FileSystemFileHandle: createSyncAccessHandle() method
=====================================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The **`createSyncAccessHandle()`** method of the
 `FileSystemFileHandle` interface returns a `Promise` which resolves to a `FileSystemSyncAccessHandle` object
 that can be used to synchronously read from and write to a file. The synchronous nature of this method brings performance advantages,
 but it is only usable inside dedicated Web Workers for files within the origin private file system.

Creating a `FileSystemSyncAccessHandle` takes an exclusive lock on the file associated with the file handle. This prevents the creation of further `FileSystemSyncAccessHandle`s or `FileSystemWritableFileStream`s for the file until the existing access handle is closed.

Syntax
------


```js
createSyncAccessHandle()
```

### Parameters

None.

### Return value

A `Promise` which resolves to a `FileSystemSyncAccessHandle` object.

### Exceptions

`NotAllowedError` `DOMException`

Thrown if the `PermissionStatus.state` for the handle is not `granted` in `readwrite` mode.

`InvalidStateError` `DOMException`

Thrown if the `FileSystemSyncAccessHandle` object does not represent a file in the origin private file system.

`NotFoundError` `DOMException`

Thrown if current entry is not found.

`NoModificationAllowedError` `DOMException`

Thrown if the browser is not able to acquire a lock on the file associated with the file handle.

Examples
--------

The following asynchronous event handler function is contained inside a Web Worker. The snippet inside it creates a synchronous file access handle.


```js
onmessage = async (e) => {
  // Retrieve message sent to work from main script
  const message = e.data;

  // Get handle to draft file
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // Get sync access handle
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // …

  // Always close FileSystemSyncAccessHandle if done.
  accessHandle.close();
};
```

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

| Specification |
| --- |
| File System Standard # api-filesystemfilehandle-createsyncaccesshandle |

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

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

See also
--------

* File System API
* The File System Access API: simplifying access to local files
InstallEvent: InstallEvent() constructor
========================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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

Syntax
------


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

### Parameters

`type`

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


`options` Optional

An object that, *in addition of the properties defined in `Event()`*, can contain any custom settings that you want to apply to the event object. Currently no possible options are mandatory, but this has been defined for forward compatibility.

Return value
------------

A new `InstallEvent` object.

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

*This feature is no more on the standard track.*

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

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

See also
--------

* `Promise`
* Fetch API
DocumentFragment: DocumentFragment() constructor
================================================

 The **`DocumentFragment()`** constructor returns a new, empty
 `DocumentFragment` object.

Syntax
------


```js
new DocumentFragment()
```

### Parameters

None.

### Return value

A new `DocumentFragment` object.

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

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

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

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

 The **`DocumentFragment.querySelector()`** method returns the
 first element, or `null` if no matches are found, within the
 `DocumentFragment` (using depth-first pre-order traversal of the
 document's nodes) that matches the specified group of selectors.

 If the selector matches an ID and this ID is erroneously used several times in the
 document, it returns the first matching element.

 If the selectors specified in parameter are invalid a `DOMException` with
 a `SYNTAX_ERR` value is raised.

Syntax
------


```js
querySelector(selectors)
```

### Parameters

`selectors`

 A string containing one or more CSS selectors separated by
 commas.


### Return value

 An `Element` object representing the first element in the document
 that matches the specified set of CSS selectors, or `null` is returned if there are no matches.

Examples
--------

### Basic example

 In this basic example, the first element in the `DocumentFragment` with
 the class "`myclass`" is returned:


```js
const el = documentfragment.querySelector(".myclass");
```

### CSS syntax and the method's argument

 The string argument pass to `querySelector` must follow the CSS syntax. To
 match ID or selectors that do not follow the CSS syntax (by using semicolon or space
 inappropriately for example), it's mandatory to escape the wrong character with a
 double back slash:


```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 document.querySelector("#foo\bar"); // Does not match anything
 document.querySelector("#foo\\\\bar"); // Match the first div
 document.querySelector("#foo:bar"); // Does not match anything
 document.querySelector("#foo\\:bar"); // Match the second div
</script>
```

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

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

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

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

See also
--------

* The `DocumentFragment` interface it belongs to.
DocumentFragment: children property
===================================

 The read-only **`children`** property returns a live `HTMLCollection`
 which contains all of the child `elements` of the document fragment upon which it was called.

Value
-----

 An `HTMLCollection` which is a live, ordered collection of the DOM
 elements which are children of the document fragment. You can access the
 individual child nodes in the collection by using either the
 `item()` method on the collection, or by using
 JavaScript array-style notation.

 If the document fragment has no element children, then `children` is an empty list with a
 `length` of `0`.

Examples
--------


```js
let fragment = new DocumentFragment();
fragment.children; // HTMLCollection []

let paragraph = document.createElement("p");
fragment.appendChild(paragraph);

fragment.children; // HTMLCollection [<p>]
```

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

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

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

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

See also
--------

* `Node.childNodes`
DocumentFragment: prepend() method
==================================

 The **`DocumentFragment.prepend()`** method
 inserts a set of `Node` objects or string objects before
 the first child of the document fragment. String objects
 are inserted as equivalent `Text` nodes.

This method prepends a child to a `DocumentFragment`. To prepend to an arbitrary element in the tree, see `Element.prepend()`.

Syntax
------


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

### Parameters

`param1`, …, `paramN`

A set of `Node` or string objects to insert.

### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

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

Examples
--------

### Prepending an element to a document fragment


```js
let fragment = new DocumentFragment();
let div = document.createElement("div");
let p = document.createElement("p");
fragment.append(p);
fragment.prepend(div);

fragment.children; // HTMLCollection [<div>, <p>]
```

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

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

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

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

See also
--------

* `DocumentFragment.append()`
* `Element.prepend()`