recursal/MDN huggingface dataset:
ProcessingInstruction: target property
======================================

 The read-only **`target`** property of the `ProcessingInstruction` interface
 represent the application to which the `ProcessingInstruction` is targeted.

For example:


```html
<?xml version="1.0"?>
```


is a processing instruction whose `target` is `xml`.

Value
-----

A string containing the name of the application.

Example
-------

### In an XML document
```

<output></output>
```



```js
let parser = new DOMParser();
const doc = parser.parseFromString(
  '<?xml version="1.0"?><test/>',
  "application/xml",
);
const pi = doc.createProcessingInstruction(
  "xml-stylesheet",
  'href="mycss.css" type="text/css"',
);
doc.insertBefore(pi, doc.firstChild);

const output = document.querySelector("output");
output.textContent = `This processing instruction's target is: ${doc.firstChild.target}`;
```

### In an HTML document

The processing instruction line will be considered, and represented, as a `Comment` object.


```html
<?xml version="1.0"?>
<pre></pre>
```



```js
const node = document.querySelector("pre").previousSibling.previousSibling;
const result = `Node with the processing instruction: ${node.nodeName}: ${node.nodeValue}\n`;
document.querySelector("pre").textContent = result;
```

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

| Specification |
| --- |
| DOM Standard # dom-processinginstruction-target |

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

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

See also
--------

* The DOM API
ProcessingInstruction: sheet property
=====================================

 The read-only **`sheet`** property of the `ProcessingInstruction` interface
 contains the stylesheet associated to the `ProcessingInstruction`.

The `xml-stylesheet` processing instruction is used to associate a stylesheet in an XML file.

Value
-----

The associated `Stylesheet` object, or `null` if there are none.

Example
-------


```xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="rule.css"?>
…
```


The `sheet` property of the processing instruction will return the `StyleSheet` object describing `rule.css`.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-linkstyle-sheet |

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

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

See also
--------

* The DOM API
Highlight: keys() method
========================

The **`keys()`** method of the `Highlight` interface is an alias for the `values()` method.

`Highlight` is a `Set`-like object, so this is similar to using `Set.keys()`.

Syntax
------


```js
keys()
```

### Return value

A new iterator object containing each `Range` object in the given `Highlight`, in insertion order.

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-set.prototype.keys |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: size property
========================

 The **`size`** property returns the number of `Range` objects in a
 `Highlight` object.

Value
-----

The value of `size` is a read-only integer representing how many entries the highlight object has.

Examples
--------

### Using size


```js
const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);
highlight.add(range3);

console.log(highlight.size); // 3
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-get-set.prototype.size |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: values() method
==========================

The **`values()`** method of the `Highlight` interface returns a new Iterator object that contains the values for each `Range` object in the `Highlight` object in insertion order.

**Note:** The **`keys()`** method is an alias for this method. It behaves exactly the same and returns **values** of `Highlight` elements.

`Highlight` is a `Set`-like object, so this is similar to using `Set.values()`.

Syntax
------


```js
values()
```

### Return value

A new iterator object containing each `Range` object in the given `Highlight`, in insertion order.

Examples
--------

The following code snippet shows how to create a new `Highlight` object with three `Range` objects, and use the iterator returned by the `values()` method to log the three ranges:


```js
const myHighlight = new Highlight();
myHighlight.add(new Range());
myHighlight.add(new Range());
myHighlight.add(new Range());

const iter = myHighlight.values();

for (value of iter) {
  console.log(value); // Range
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-set.prototype.values |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: entries() method
===========================

The **`entries()`** method of the `Highlight` interface returns a new Iterator object that contains an array of `[range, range]` for each `Range` object in the `Highlight` object, in insertion order.

`Highlight` is a `Set`-like object, so this is similar to using `Set.entries()`.

Syntax
------


```js
entries()
```

### Return value

A new iterator object that contains an array of `[range, range]` for each `Range` object in the given `Highlight`, in insertion order.

Examples
--------

The code snippet below shows how create a new highlight with two ranges, and then log the ranges by using the iterator returned by the `entries()` method:


```js
const text = new Text("Time is an illusion. Lunchtime doubly so.");

const range1 = document.createRange();
range1.setStart(text, 0);
range1.setEnd(text, 4);

const range2 = document.createRange();
range2.setStart(text, 21);
range2.setEnd(text, 30);

const myHighlight = new Highlight();
myHighlight.add(range1);
myHighlight.add(range2);

const iter = myHighlight.entries();

console.log(iter.next().value); // [Range, Range]
console.log(iter.next().value); // [Range, Range]
```


The following code example shows how to iterate over the ranges in a highlight by using a `for...of` loop:


```js
const text = new Text("Time is an illusion. Lunchtime doubly so.");

const range1 = document.createRange();
range1.setStart(text, 0);
range1.setEnd(text, 4);

const range2 = document.createRange();
range2.setStart(text, 21);
range2.setEnd(text, 30);

const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);

for (const [range] of highlight.entries()) {
  console.log(range.toString());
  // Time
  // Lunchtime
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-set.prototype.entries |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: delete() method
==========================

The **`delete()`** method of the `Highlight` interface removes a specified `Range` object from a `Highlight` object.

`Highlight` is a `Set`-like object, so this is similar to using `Set.delete()`.

Syntax
------


```js
delete(range)
```

### Parameters

`range`

The `Range` object to remove from the `Highlight`.

### Return value

Returns `true` if `range` was already in `Highlight`; otherwise `false`.

Examples
--------

The code snippet below shows how to create a new highlight with two ranges, and then delete one of them:


```js
const range1 = new Range();
const range2 = new Range();

const highlight = new Highlight(range1, range2);
console.log(highlight.size); // 2

highlight.delete(range1);
console.log(highlight.size); // 1
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-set.prototype.delete |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: forEach() method
===========================

The **`forEach()`** method of the `Highlight` interface executes a provided function once for each `Range` object in the `Highlight` object, in insertion order.

`Highlight` is a `Set`-like object, so this is similar to using `Set.forEach()`.

Syntax
------


```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### Parameters

`callback`

Function to execute for each `Range` object, taking three arguments:

`range`, `key`

 The current `Range` object being processed in the `Highlight`. As there are no
 keys in `Highlight`, the `range` is passed for both arguments.


`highlight`

The `Highlight` object which `forEach()` was called upon.


`thisArg`

Value to use as `this` when executing `callbackFn`.

### Return value

None (`undefined`).

Examples
--------

The code snippet below shows how create a new highlight with two ranges, and then log the ranges by using the `forEach()` method:


```js
function logRanges(range, key, highlight) {
  console.log(`Highlight object ${highlight} contains range ${range}`);
}

const text = new Text("Time is an illusion. Lunchtime doubly so.");

const range1 = document.createRange();
range1.setStart(text, 0);
range1.setEnd(text, 4);

const range2 = document.createRange();
range2.setStart(text, 21);
range2.setEnd(text, 30);

const myHighlight = new Highlight();
myHighlight.add(range1);
myHighlight.add(range2);

myHighlight.forEach(logRanges);
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-set.prototype.foreach |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: add() method
=======================

The **`add()`** method of the `Highlight` interface adds a new `Range` object to a highlight, to be styled using the CSS Custom Highlight API.

`Highlight` is a `Set`-like object, so this is similar to using `Set.add()`.

Syntax
------


```js
add(range)
```

### Parameters

`range`

A `Range` object to add to the `Highlight`.

### Return value

The `Highlight` object, with the added range.

Examples
--------

The code snippet below shows how to add two ranges to a new highlight object:


```js
const highlight = new Highlight();

const range1 = new Range();
const range2 = new Range();

highlight.add(range1).add(range2);

console.log(highlight.size); // 2
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-set.prototype.add |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: has() method
=======================

The **`has()`** method of the `Highlight` interface returns a boolean indicating whether a `Range` object exists in a `Highlight` object or not.

`Highlight` is a `Set`-like object, so this is similar to using `Set.has()`.

Syntax
------


```js
has(range)
```

### Parameters

`range`

The `Range` object to test for presence in the `Highlight` object.

### Return value

Returns `true` if the specified range exists in the `Highlight` object; otherwise `false`.

Examples
--------

The code snippet below creates two ranges, and a highlight object that contains one of them. The code then uses the `has()` method to check whether each range exists in the highlight:


```js
const range1 = new Range();
const range2 = new Range();
const myHighlight = new Highlight(range1);

myHighlight.has(range1); // true
myHighlight.has(range2); // false
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-set.prototype.has |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: Highlight() constructor
==================================

 The **`Highlight()`** constructor returns a newly created
 `Highlight` object which can hold a collection of `Range` objects to be styled using the CSS Custom Highlight API.

Syntax
------


```js
new Highlight()
new Highlight(range)
new Highlight(range1, range2, /\* …, \*/ rangeN)
```

### Parameters

`range1, /* …, */ rangeN` Optional

One ore more initial `Range` objects to add in the new highlight.

### Return value

A new `Highlight` object.

Examples
--------

The example code below demonstrates how to create an empty highlight object, and then add ranges to it:


```js
const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);
```


The example code below demonstrates how to create a new highlight object and add ranges to it during instantiation:


```js
const highlight = new Highlight(range1, range2);
```

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

| Specification |
| --- |
| CSS Custom Highlight API Module Level 1 # dom-highlight-highlight |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: type property
========================

The `type` property of the `Highlight` interface is an enumerated `String` used to specify the meaning of the highlight. This allows assistive technologies, such as screen readers, to include this meaning when exposing the highlight to users.

By default, a highlight object will have its type set to `highlight`, but you can change it to `spelling-error` or `grammar-error`.

Value
-----

The possible values of the `type` enumerated value are:

`highlight`

This is the default highlight type. It does not have any specific meaning.

`spelling-error`

Use this type when the highlight is used to emphasize misspelled content.

`grammar-error`

Use this type when the highlight is used to emphasize content that is grammatically incorrect.

Examples
--------


```js
const spellErrorRange = new Range();
spellErrorRange.setStart(textNode, 10);
spellErrorRange.setEnd(textNode, 20);

const spellErrorsHighlight = new Highlight(spellErrorRange);

spellErrorsHighlight.type = "spelling-error";
```

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

| Specification |
| --- |
| CSS Custom Highlight API Module Level 1 # enumdef-highlighttype |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
Highlight: clear() method
=========================

The **`clear()`** method of the `Highlight` interface removes all the `Range` objects from a `Highlight` object.

`Highlight` is a `Set`-like object, so this is similar to using `Set.clear()`.

Syntax
------


```js
clear()
```

### Return value

None (`undefined`).

Examples
--------

The code snippet below shows how to create a new highlight with two ranges, and then clear it:


```js
const highlight = new Highlight(range1, range2);
console.log(highlight.size); // 2

highlight.clear();
console.log(highlight.size); // 0
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-set.prototype.clear |

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

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

See also
--------

* The CSS Custom Highlight API
* CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web
ContentIndex: delete() method
=============================

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

 The **`delete()`** method of the
 `ContentIndex` interface unregisters an item from the currently indexed
 content.


**Note:** Calling `delete()` only affects the index. It does not delete anything
 from the `Cache`.


Syntax
------


```js
ContentIndex.delete(id).then(/\* … \*/)
```

### Parameters

`id`

The unique identifier of the indexed content you want the `ContentIndex` object to remove.

### Return value

Returns a `Promise` that resolves with `undefined`

### Exceptions

No exceptions are thrown.

Examples
--------

 Below is an asynchronous function, that removes an item from the content index. We receive a reference to the current
 `ServiceWorkerRegistration`, which allows us to access the
 `index` property and thus access the
 `delete` method.


```js
async function unregisterContent(article) {
  // reference registration
  const registration = await navigator.serviceWorker.ready;

  // feature detect Content Index
  if (!registration.index) return;

  // unregister content from index
  await registration.index.delete(article.id);
}
```


 The `delete` method can also be used within the
 service worker scope.


```js
self.registration.index.delete("my-id");
```

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

| Specification |
| --- |
| Content Index # content-index-delete |

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

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

See also
--------

* An introductory article on the Content Index API
* An app which uses the Content Index API to list and remove 'save for later' content
* Service Worker API, along with information about Cache and CacheStorage
SyncEvent: tag property
=======================

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

 The **`tag`** read-only property of the
 `SyncEvent` interface returns the developer-defined identifier for
 this `SyncEvent`. This is the value passed in the `tag` parameter
 of the `SyncEvent()` constructor.

Value
-----

The developer-defined identifier for this `SyncEvent`.

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

| Specification |
| --- |
| Web Background Synchronization # ref-for-dom-syncevent-tag |

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

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

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

 The **`lastChance`** read-only property of the
 `SyncEvent` interface returns `true` if the user agent will not
 make further synchronization attempts after the current attempt. This is the value
 passed in the `lastChance` parameter of the
 `SyncEvent()` constructor.

Value
-----

 A boolean value that indicates whether the user agent will not make further
 synchronization attempts after the current attempt.

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

| Specification |
| --- |
| Web Background Synchronization # ref-for-dom-syncevent-lastchance③ |

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

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

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

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

Syntax
------


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

### Parameters

`type`

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


`options`

An object that, in addition to the properties defined in `ExtendableEvent()`, can have the following properties:

`tag`

A developer-defined unique identifier for this `SyncEvent`.

`lastChance` Optional

 A boolean value indicating that the user agent will not make further synchronization attempts after the current attempt.
 It defaults to `false`.



### Return value

A new `SyncEvent` object.

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

| Specification |
| --- |
| Web Background Synchronization # dom-syncevent-syncevent |

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

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

 The **`maxAlternatives`** property of the
 `SpeechRecognition` interface sets the maximum number of
 `SpeechRecognitionAlternative`s provided per
 `SpeechRecognitionResult`.

The default value is 1.

Value
-----

A number representing the maximum returned alternatives for each result.

Examples
--------

This code is excerpted from our Speech color changer example.


```js
const grammar =
  "#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;";
const recognition = new SpeechRecognition();
const speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 1;

// ...
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognition-maxalternatives |

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

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

See also
--------

* Web Speech API