recursal/MDN huggingface dataset:
Clients: get() method
=====================

 The **`get()`** method of the
 `Clients` interface gets a service worker client matching a given
 `id` and returns it in a `Promise`.

Syntax
------


```js
get(id)
```

### Parameters

`id`

A string representing the id of the client you want to get.

### Return value

 A `Promise` that resolves to a `Client` object or
 `undefined`.

Examples
--------


```js
self.clients.get(id).then((client) => {
  self.clients.openWindow(client.url);
});
```

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

| Specification |
| --- |
| Service Workers # clients-get |

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

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

 The **`claim()`** method of the `Clients` interface allows an active service worker to set itself as the `controller` for all clients within its `scope`.
 This triggers a "`controllerchange`" event on `navigator.serviceWorker` in any clients that become controlled by this service worker.

 When a service worker is initially registered, pages won't use it until they next
 load. The `claim()` method causes those pages to be controlled immediately.
 Be aware that this results in your service worker controlling pages that loaded
 regularly over the network, or possibly via a different service worker.

Syntax
------


```js
claim()
```

### Parameters

None.

### Return value

A `Promise` that resolves to `undefined`.

Examples
--------

The following example uses `claim()` inside service worker's "`activate`" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.


```js
self.addEventListener("activate", (event) => {
  event.waitUntil(clients.claim());
});
```

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

| Specification |
| --- |
| Service Workers # clients-claim |

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

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

See also
--------

* Using Service Workers
* The service worker lifecycle
* `self.skipWaiting()` - skip the service worker's waiting phase
Clients: openWindow() method
============================

 The **`openWindow()`** method of the `Clients`
 interface creates a new top level browsing context and loads a given URL. If the calling
 script doesn't have permission to show popups, `openWindow()` will throw an
 `InvalidAccessError`.

 In Firefox, the method is allowed to show popups only when called as the result of a
 notification click event.

 In Chrome for Android, the method may instead open the URL in an existing browsing
 context provided by a standalone web app previously added to the user's home screen. As of recently, this also works on
 Chrome for Windows.

Syntax
------


```js
openWindow(url)
```

### Parameters

`url`

 A string representing the URL of the client you want to open in
 the window. Generally this value must be a URL from the same origin as the calling
 script.


### Return value

 A `Promise` that resolves to a `WindowClient` object if the
 URL is from the same origin as the service worker or a null
 value otherwise.

### Exceptions

`InvalidAccessError` `DOMException`

The promise is rejected with this exception if none of the windows in the app's origin have transient activation.

Security requirements
---------------------

* At least one window in the app's origin must have transient activation.
Examples
--------


```js
// Send notification to OS if applicable
if (self.Notification.permission === "granted") {
  const notificationObject = {
    body: "Click here to view your messages.",
    data: { url: `${self.location.origin}/some/path` },
    // data: { url: 'http://example.com' },
  };
  self.registration.showNotification(
    "You've got messages!",
    notificationObject,
  );
}

// Notification click event listener
self.addEventListener("notificationclick", (e) => {
  // Close the notification popout
  e.notification.close();
  // Get all the Window clients
  e.waitUntil(
    clients.matchAll({ type: "window" }).then((clientsArr) => {
      // If a Window tab matching the targeted URL already exists, focus that;
      const hadWindowToFocus = clientsArr.some((windowClient) =>
        windowClient.url === e.notification.data.url
          ? (windowClient.focus(), true)
          : false,
      );
      // Otherwise, open a new tab to the applicable URL and focus it.
      if (!hadWindowToFocus)
        clients
          .openWindow(e.notification.data.url)
          .then((windowClient) => (windowClient ? windowClient.focus() : null));
    }),
  );
});
```

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

| Specification |
| --- |
| Service Workers # clients-openwindow |

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

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

 The **`matchAll()`** method of the `Clients`
 interface returns a `Promise` for a list of service worker
 `Client` objects. Include the `options` parameter to return all service worker
 clients whose origin is the same as the associated service worker's origin. If options
 are not included, the method returns only the service worker clients controlled by the
 service worker.

Syntax
------


```js
matchAll()
matchAll(options)
```

### Parameters

`options` Optional

 An options object allowing you to set options for the matching operation. Available
 options are:


`includeUncontrolled`

 A boolean value — if set to
 `true`, the matching operation will return all service worker clients
 who share the same origin as the current service worker. Otherwise, it returns
 only the service worker clients controlled by the current service worker. The
 default is `false`.


`type`

 Sets the type of clients you want matched. Available values
 are `"window"`, `"worker"`, `"sharedworker"`, and
 `"all"`. The default is `"window"`.



### Return value

 A `Promise` that resolves to an array of `Client` objects. In
 Chrome 46/Firefox 54 and later, this method returns clients in most recently focused
 order, correct as per spec.

Examples
--------


```js
clients.matchAll(options).then((clientList) => {
  for (const client of clientList) {
    if (client.url === "index.html") {
      clients.openWindow(client);
      // or do something else involving the matching client
    }
  }
});
```

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

| Specification |
| --- |
| Service Workers # clients-matchall |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HID: disconnect event
=====================

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
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`disconnect`** event of the `HID` interface fires when the user agent disconnects a HID device.

Syntax
------

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


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

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

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

A `HIDConnectionEvent`. Inherits from `Event`.

Event

HIDConnectionEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`device` Read only 

The `HIDDevice` the event is fired for.

Examples
--------

In the following example an event listener is registered to listen for the disconnection of a device. The name of the device is then printed to the console using `HIDDevice.productName`.


```js
navigator.hid.addEventListener("disconnect", ({ device }) => {
  console.log(`HID disconnected: ${device.productName}`);
});
```

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

| Specification |
| --- |
| WebHID API # dom-hid-ondisconnect |

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

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

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

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

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`getDevices()`** method of the `HID` interface gets a list of the connected HID devices that the user has previously been granted access to in response to a `requestDevice()` call.

Syntax
------


```js
getDevices()
```

### Parameters

None.

### Return value

A `Promise` that resolves with a list of `HIDDevice` objects.

Examples
--------

The following example gets a list of devices and logs the device names to the console.


```js
document.addEventListener("DOMContentLoaded", async () => {
  let devices = await navigator.hid.getDevices();
  devices.forEach((device) => {
    console.log(`HID: ${device.productName}`);
  });
});
```

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

| Specification |
| --- |
| WebHID API # dom-hid-getdevices |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HID: connect event
==================

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
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`connect`** event of the `HID` interface fires when the user agent connects to a HID device.

Syntax
------

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


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

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

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

A `HIDConnectionEvent`. Inherits from `Event`.

Event

HIDConnectionEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`device` Read only 

The `HIDDevice` the event is fired for.

Examples
--------

In the following example an event listener is registered to listen for the connection of a device. The name of the device is then printed to the console using `HIDDevice.productName`.


```js
navigator.hid.addEventListener("connect", ({ device }) => {
  console.log(`HID connected: ${device.productName}`);
});
```

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

| Specification |
| --- |
| WebHID API # dom-hid-onconnect |

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

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

 The **`state`** read-only property of the
 `PermissionStatus` interface returns the state of a requested permission.
 This property returns one of `'granted'`, `'denied'`, or
 `'prompt'`.

Value
-----

One of the following:

* `'granted'`
* `'denied'`
* `'prompt'`
Examples
--------


```js
navigator.permissions
  .query({ name: "geolocation" })
  .then((permissionStatus) => {
    console.log(`geolocation permission state is ${permissionStatus.state}`);
    permissionStatus.onchange = () => {
      console.log(
        `geolocation permission status has changed to ${permissionStatus.state}`,
      );
    };
  });
```

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

| Specification |
| --- |
| Permissions # dom-permissionstatus-state |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PermissionStatus: change event
==============================

The **`change`** event of the `PermissionStatus` interface fires whenever the `PermissionStatus.state` property changes.

Syntax
------

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


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

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

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

A generic `Event`.

Example
-------


```js
navigator.permissions
  .query({ name: "geolocation" })
  .then((permissionStatus) => {
    console.log(`geolocation permission state is ${permissionStatus.state}`);
    permissionStatus.onchange = () => {
      console.log(
        `geolocation permission state has changed to ${permissionStatus.state}`,
      );
    };
  });
```

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

| Specification |
| --- |
| Permissions # dom-permissionstatus-onchange |

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

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

The **`name`** read-only property of the `PermissionStatus` interface returns the name of a requested permission.

Value
-----

A read-only value that is identical to the `name` argument passed to `navigator.permissions.query()`.

Examples
--------


```js
function stateChangeListener() {
  console.log(`${this.name} permission status changed to ${this.state}`);
}
function queryAndTrackPermission(permissionName) {
  navigator.permissions
    .query({ name: permissionName })
    .then((permissionStatus) => {
      console.log(
        `${permissionName} permission state is ${permissionStatus.state}`,
      );
      permissionStatus.onchange = stateChangeListener;
    });
}
queryAndTrackPermission("geolocation");
queryAndTrackPermission("midi");
```

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

| Specification |
| --- |
| Permissions # dom-permissionstatus-name |

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

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

The **`baseVal`** property of the `SVGAnimatedEnumeration` interface contains the initial value of an SVG enumeration.

Value
-----

An integer containing the initial value of the enumeration

Examples
--------

Considering this snippet with a `<clipPath>` element: Its `clipPathUnits` is associated with a `SVGAnimatedEnumeration` object.


```html
<svg viewBox="0 0 100 100" width="200" height="200">
  <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
    <circle cx="50" cy="50" r="35" />
  </clipPath>

  <!-- Some reference rect to materialized to clip path -->
  <rect id="r1" x="0" y="0" width="45" height="45" />
</svg>
```


This snippet gets the element, and logs the `baseVal`of the `SVGClipPathElement.clipPathUnits` property.


```js
const clipPathElt = document.getElementById("clip1");
console.log(clipPathElt.clipPathUnits.baseVal); // Logs 1 that correspond to userSpaceOnUse
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGAnimatedEnumeration\_\_baseVal |

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

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

See also
--------

* `SVGAnimatedEnumeration.animVal`
SVGAnimatedEnumeration: animVal property
========================================

The **`animVal`** property of the `SVGAnimatedEnumeration` interface contains the current value of an SVG enumeration. If there is no animation, it is the same value as the `baseVal`.

Value
-----

An integer containing the current value of the enumeration

Examples
--------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<div>
  <svg viewBox="0 0 100 100" width="200" height="200">
    <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
      <animate
 attributeName="clipPathUnits"
 values="userSpaceOnUse;objectBoundingBox;userSpaceOnUse"
 dur="2s"
 repeatCount="indefinite" />
      <circle cx="50" cy="50" r="25" />
    </clipPath>

    <rect id="r1" x="0" y="0" width="50" height="100" />

    <use clip-path="url(#clip1)" href="#r1" fill="lightblue" />
  </svg>
</div>
<pre id="log"></pre>
```



```js
const clipPath1 = document.getElementById("clip1");
const log = document.getElementById("log");

function displayLog() {
  const animValue = clipPath1.clipPathUnits.animVal;
  const baseValue = clipPath1.clipPathUnits.baseVal;
  log.textContent = `The 'clipPathUnits.animVal' is ${animValue}.\n`;
  log.textContent += `The 'clipPathUnits.baseVal' is ${baseValue}.`;
  requestAnimationFrame(displayLog);
}

displayLog();
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGAnimatedEnumeration\_\_animVal |

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

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

See also
--------

* `SVGAnimatedEnumeration.baseVal`
HTMLAreaElement: port property
==============================

 The **`HTMLAreaElement.port`** property is a
 string containing the port number of the URL. If the URL does not
 contain an explicit port number, it will be set to `''`.

Value
-----

A string.

Examples
--------

### Getting the port from an area link


```js
// An <area id="myArea" href="https://developer.mozilla.org:443/en-US/docs/HTMLAreaElement"> element is in the document
const area = document.getElementByID("myArea");
area.port; // returns '443'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-port-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: hostname property
==================================

The **`HTMLAreaElement.hostname`** property is a string containing the domain of the URL.

Value
-----

 A string containing the domain of the URL associated with the `area` element.
 It can be used as both a setter and getter.

Examples
--------


```html
<textarea id="log" rows="4" cols="100"></textarea>
<map name="infographic">
  <area
 id="area1"
 shape="rect"
 coords="184,6,253,27"
 href="/en-US/docs/HTMLAreaElement"
 target="\_blank"
 alt="Mozilla" />
  <area
 id="area2"
 shape="circle"
 coords="130,136,60"
 href="https://coolexample.com/"
 target="\_blank"
 alt="MDN" />
</map>
```



```js
// An element is in the document
const area1 = document.getElementById("area1");
const area2 = document.getElementById("area2");

const log = document.getElementById("log");
log.textContent = `area1 hostname: ${area1.hostname} \n`; // 'developer.mozilla.org'
log.textContent += `area2 hostname: ${area2.hostname}`; // 'coolexample.com'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-hostname-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: host property
==============================

 The **`HTMLAreaElement.host`** property is a
 string containing the host, that is the *hostname*, and then,
 if the *port* of the URL is nonempty, a `':'`, and the *port*
 of the URL.

Value
-----

A string.

Examples
--------


```js
const area = document.createElement("area");

area.href = "https://developer.mozilla.org/en-US/HTMLAreaElement";
area.host === "developer.mozilla.org";

area.href = "https://developer.mozilla.org:443/en-US/HTMLAreaElement";
area.host === "developer.mozilla.org";
// The port number is not included because 443 is the scheme's default port

area.href = "https://developer.mozilla.org:4097/en-US/HTMLAreaElement";
area.host === "developer.mozilla.org:4097";
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-host-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: origin property
================================

 The
 **`HTMLAreaElement.origin`** read-only property is a
 string containing the Unicode serialization of the origin of the
 represented URL.

That is:

* for URL using the `http` or `https`, the scheme followed by
 `'://'`, followed by the domain, followed by `':'`, followed by
 the port (the default port, `80` and `443` respectively, if
 explicitly specified);
* for URL using `file:` scheme, the value is browser dependent;
* for URL using the `blob:` scheme, the origin of the URL following
 `blob:`. E.g `"blob:https://mozilla.org"` will have
 `"https://mozilla.org".`
Value
-----

A string.

Examples
--------


```js
// An <area id="myArea" href="https://developer.mozilla.org/en-US/HTMLAreaElement"> element is in the document
const area = document.getElementById("myArea");
area.origin; // returns 'https://developer.mozilla.org'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-origin-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: password property
==================================

 The **`HTMLAreaElement.password`** property is a
 string containing the password specified before the domain name.

 If it is set without first setting the
 `username`
 property, it silently fails.

Value
-----

A string.

Examples
--------


```js
// An <area id="myArea" href="https://anonymous:flabada@developer.mozilla.org/en-US/docs/HTMLAreaElement"> is in the document
const area = document.getElementByID("myArea");
area.password; // returns 'flabada'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-password-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.
HTMLAreaElement: href property
==============================

 The **`HTMLAreaElement.href`** property is a
 stringifier that returns a string containing the whole URL, and allows
 the href to be updated.

Value
-----

A string.

Examples
--------


```js
// An <area id="myArea" href="https://developer.mozilla.org/en-US/HTMLAreaElement"> element is in the document
const area = document.getElementById("myArea");
area.href; // returns 'https://developer.mozilla.org/en-US/HTMLAreaElement'
```

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

| Specification |
| --- |
| HTML Standard # dom-hyperlink-href-dev |

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

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

See also
--------

* The `HTMLAreaElement` interface it belongs to.