recursal/MDN huggingface dataset:
IDBObjectStore: getKey() method
===============================

 The **`getKey()`** method of the
 `IDBObjectStore` interface returns an `IDBRequest` object,
 and, in a separate thread, returns the key selected by the specified query. This is
 for retrieving specific records from an object store.

 If a key is successfully found, then a structured clone of it is created and set as the
 result of the request object.

**Note:** This feature is available in Web Workers

Syntax
------


```js
getKey(key)
```

### Parameters

`key`

The key or key range that identifies the record to be retrieved.

### Return Value

An `IDBRequest` object on which subsequent events related to this operation are fired.

If the operation is successful, the value of the request's `result` property is the key for the first record matching the given key or key range.

### Exceptions

This method may raise a `DOMException` of one of the following types:

`InvalidStateError` `DOMException`

Thrown if the `IDBObjectStore` has been deleted or removed.

`TransactionInactiveError` `DOMException`

Thrown if this `IDBObjectStore`'s transaction is inactive.

`DataError` `DOMException`

Thrown if the key or key range provided contains an invalid key.

Example
-------


```js
let openRequest = indexedDB.open("telemetry");
openRequest.onsuccess = (event) => {
  let db = event.target.result;
  let store = db.transaction("netlogs").objectStore("netlogs");

  let today = new Date();
  let yesterday = new Date(today);
  yesterday.setDate(today.getDate() - 1);
  let request = store.getKey(IDBKeyRange(yesterday, today));
  request.onsuccess = (event) => {
    let when = event.target.result;
    alert(`The 1st activity in last 24 hours was occurred at ${when}`);
  };
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-getkey① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBObjectStore: transaction property
====================================

 The **`transaction`** read-only property of the
 `IDBObjectStore` interface returns the transaction object to which this
 object store belongs.

**Note:** This feature is available in Web Workers

Value
-----

An `IDBTransaction` object.

Examples
--------

 In the following code snippet, we open a read/write transaction on our database and add
 some data to an object store using `add()`. After the object store has been
 created, we log `objectStore.transaction` to
 the console. For a full working example, see our To-do Notifications app
 (view example live).


```js
// Let us open our database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>Database initialized.</li>";

  // store the result of opening the database in the db variable.
  // This is used a lot below
  db = DBOpenRequest.result;

  // Run the addData() function to add the data to the database
  addData();
};

function addData() {
  // Create a new object ready to insert into the IDB
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // open a read/write db transaction, ready for adding the data
  const transaction = db.transaction(["toDoList"], "readwrite");

  // report on the success of the transaction completing, when everything is done
  transaction.oncomplete = (event) => {
    note.innerHTML += "<li>Transaction completed.</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>Transaction not opened due to error. Duplicate items not allowed.</li>";
  };

  // create an object store on the transaction
  const objectStore = transaction.objectStore("toDoList");
  console.log(objectStore.transaction);

  // Make a request to add our newItem object to the object store
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // report the success of our request
    note.innerHTML += "<li>Request successful.</li>";
  };
}
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-transaction① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBObjectStore: indexNames property
===================================

 The **`indexNames`** read-only property of the
 `IDBObjectStore` interface returns a list of the names of indexes on objects
 in this object store.

**Note:** This feature is available in Web Workers

Value
-----

A `DOMStringList`.

Examples
--------

 In the following code snippet, we open a read/write transaction on our database and add
 some data to an object store using `add()`. After the object store has been
 created, we log `objectStore.indexNames` to the console. For a full working example, see
 our To-do Notifications app
 (view example live).


```js
// Let us open our database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>Database initialized.</li>";

  // store the result of opening the database in the db variable.
  // This is used a lot below
  db = this.result;

  // Run the addData() function to add the data to the database
  addData();
};

function addData() {
  // Create a new object ready to insert into the IDB
  const newItem = [
    {
      taskTitle: "Walk dog",
      hours: 19,
      minutes: 30,
      day: 24,
      month: "December",
      year: 2013,
      notified: "no",
    },
  ];

  // open a read/write db transaction, ready for adding the data
  const transaction = db.transaction(["toDoList"], "readwrite");

  // report on the success of the transaction completing, when everything is done
  transaction.oncomplete = (event) => {
    note.innerHTML += "<li>Transaction completed.</li>";
  };

  transaction.onerror = (event) => {
    note.innerHTML +=
      "<li>Transaction not opened due to error. Duplicate items not allowed.</li>";
  };

  // create an object store on the transaction
  const objectStore = transaction.objectStore("toDoList");
  console.log(objectStore.indexNames);

  // Make a request to add our newItem object to the object store
  const objectStoreRequest = objectStore.add(newItem[0]);

  objectStoreRequest.onsuccess = (event) => {
    // report the success of our request
    note.innerHTML += "<li>Request successful.</li>";
  };
}
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-indexnames① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBObjectStore: openKeyCursor() method
======================================

 The **`openKeyCursor()`** method of the
 `IDBObjectStore` interface returns an `IDBRequest` object
 whose result will be set to an `IDBCursor` that can be used to iterate
 through matching results. Used for iterating through the keys of an object store with
 a cursor.

 To determine if the add operation has completed successfully, listen for the
 results's `success` event.

Syntax
------


```js
openKeyCursor()
openKeyCursor(query)
openKeyCursor(query, direction)
```

### Parameters

`query` Optional

 The key range to be queried. If a single valid key is passed, this will default to a
 range containing only that key. If nothing is passed, this will default to a key range
 that selects all the records in this object store.


`direction` Optional

 An `IDBCursorDirection` telling the cursor what direction to travel.
 Valid values are `"next"`, `"nextunique"`, `"prev"`,
 and `"prevunique"`. The default is `"next"`.


### Return value

An `IDBRequest` object on which subsequent events related to this operation are fired.

If the operation is successful, the value of the request's `result` property is:

* an `IDBCursor` object pointing at the first record matching the given query
* `null` if no matching records were found.
### Exceptions

This method may raise a `DOMException` of one of the following types:

`InvalidStateError` `DOMException`

Thrown if this `IDBObjectStore` or `IDBIndex` has been deleted.

`TransactionInactiveError` `DOMException`

Thrown if this `IDBObjectStore`'s transaction is inactive.

`DataError` `DOMException`

Thrown if the specified key or key range is invalid.

Examples
--------

 In this simple fragment we create a transaction, retrieve an object store, then use a
 cursor to iterate through all the records in the object store:


```js
const transaction = db.transaction("name", "readonly");
const objectStore = transaction.objectStore("name");
const request = objectStore.openKeyCursor();
request.onsuccess = (event) => {
  const cursor = event.target.result;
  if (cursor) {
    // cursor.key contains the key of the current record being iterated through
    // note that there is no cursor.value, unlike for openCursor
    // this is where you'd do something with the result
    cursor.continue();
  } else {
    // no more results
  }
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-openkeycursor① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBObjectStore: count() method
==============================

 The **`count()`** method of the `IDBObjectStore`
 interface returns an `IDBRequest` object, and, in a separate thread,
 returns the total number of records that match the provided key or
 `IDBKeyRange`. If no arguments are provided, it returns the total number
 of records in the store.

**Note:** This feature is available in Web Workers

Syntax
------


```js
count()
count(query)
```

### Parameters

`query` Optional

 A key or `IDBKeyRange` object that specifies a range of records you
 want to count.


### Return value

An `IDBRequest` object on which subsequent events related to this operation are fired.

If the operation is successful, the value of the request's `result` property is the number of records that match the given query.

### Exceptions

This method may raise a `DOMException` of one of the following types:

`InvalidStateError` `DOMException`

Thrown if this `IDBObjectStore` has been deleted.

`TransactionInactiveError` `DOMException`

Thrown if this `IDBObjectStore`'s transaction is inactive.

`DataError` `DOMException`

Thrown if the specified key or key range is invalid.

Examples
--------

 In this simple fragment we create a transaction, retrieve an object store, then count
 the number of records in the store using `count()` — when the success handler
 fires, we log the count value (an integer) to the console.


```js
const transaction = db.transaction(["fThings"], "readonly");
const objectStore = transaction.objectStore("fThings");

const countRequest = objectStore.count();
countRequest.onsuccess = () => {
  console.log(countRequest.result);
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbobjectstore-count① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBObjectStore: index() method
==============================

 The **`index()`** method of the `IDBObjectStore`
 interface opens a named index in the current object store, after which it can be used
 to, for example, return a series of records sorted by that index using a cursor.

**Note:** This feature is available in Web Workers

Syntax
------


```js
index(name)
```

### Parameters

`name`

The name of the index to open.

### Return value

An `IDBIndex` object for accessing the index.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the source object store has been deleted, or the transaction for the object store has finished.

`NotFoundError` `DOMException`

Thrown if there is no index with the given name (case-sensitive) in the database.

Examples
--------

 In the following example we open a transaction and an object store, then get the index
 `lName` from a simple contacts database. We then open a basic cursor on the
 index using `IDBIndex.openCursor` — this works the same as opening a cursor
 directly on an `ObjectStore` using `IDBObjectStore.openCursor`
 except that the returned records are sorted based on the index, not the primary key.

 Finally, we iterate through each record, and insert the data into an HTML table. For a
 complete working example, see our IDBIndex example in IndexedDB-examples demo repo (View the example live.)


```js
function displayDataByIndex() {
  tableEntry.innerHTML = "";
  const transaction = db.transaction(["contactsList"], "readonly");
  const objectStore = transaction.objectStore("contactsList");

  const myIndex = objectStore.index("lName");
  myIndex.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const tableRow = document.createElement("tr");
      tableRow.innerHTML =
        `<td>${cursor.value.id}</td>` +
        `<td>${cursor.value.lName}</td>` +
        `<td>${cursor.value.fName}</td>` +
        `<td>${cursor.value.jTitle}</td>` +
        `<td>${cursor.value.company}</td>` +
        `<td>${cursor.value.eMail}</td>` +
        `<td>${cursor.value.phone}</td>` +
        `<td>${cursor.value.age}</td>`;
      tableEntry.appendChild(tableRow);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # dom-idbobjectstore-index |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
ResizeObserver: disconnect() method
===================================

 The **`disconnect()`** method of the
 `ResizeObserver` interface unobserves all observed `Element`
 or `SVGElement` targets.

Syntax
------


```js
disconnect()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

None.

Examples
--------


```js
btn.addEventListener("click", () => {
  resizeObserver.disconnect();
});
```

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

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-disconnect |

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

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

 The **`unobserve()`** method of the
 `ResizeObserver` interface ends the observing of a specified
 `Element` or `SVGElement`.

Syntax
------


```js
unobserve(target)
```

### Parameters

`target`

A reference to an `Element` or `SVGElement` to be unobserved.

### Return value

None (`undefined`).

### Exceptions

None.

Examples
--------

 The following snippet is taken from the resize-observer-text.html
 (see source) example:


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Checking for chrome as using a non-standard array
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);

checkbox.addEventListener("change", () => {
  if (checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});
```

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

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-unobserve |

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

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

 The **`ResizeObserver`** constructor creates a
 new `ResizeObserver` object, which can be used to report changes to the
 content or border box of an `Element` or the bounding box of an
 `SVGElement`.

Syntax
------


```js
new ResizeObserver(callback)
```

### Parameters

`callback`

 The function called whenever an observed resize occurs. The function is called with
 two parameters:


`entries`

 An array of `ResizeObserverEntry` objects that can be used to
 access the new dimensions of the element after each change.


`observer`

 A reference to the `ResizeObserver` itself, so it will definitely be
 accessible from inside the callback, should you need it. This could be used for
 example to automatically unobserve the observer when a certain condition is
 reached, but you can omit it if you don't need it.


The callback will generally follow a pattern along the lines of:


```js
function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}
```


Examples
--------

 The following snippet is taken from the resize-observer-text.html
 (see source) example:


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        // legacy path
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);
```

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

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-resizeobserver |

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

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

 The **`observe()`** method of the
 `ResizeObserver` interface starts observing the specified
 `Element` or `SVGElement`.

Syntax
------


```js
observe(target)
observe(target, options)
```

### Parameters

`target`

 A reference to an `Element` or `SVGElement` to be
 observed.


`options` Optional

 An options object allowing you to set options for the observation. Currently this
 only has one possible option that can be set:


`box`

Sets which box model the observer will observe changes to. Possible values are:

`content-box` (the default)

Size of the content area as defined in CSS.

`border-box`

Size of the box border area as defined in CSS.

`device-pixel-content-box`

The size of the content area as defined in CSS, in device pixels, before applying any CSS transforms on the element or its ancestors.


### Return value

None (`undefined`).

### Exceptions

None.

Examples
--------

 The following snippet is taken from the resize-observer-text.html
 (see source) example:


```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // Checking for chrome as using a non-standard array
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize[0].inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize[0].inlineSize / 600,
 )}rem`;
      } else {
        h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
        pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
      }
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);
```


An `observe()` call with an options object would look like so:


```js
resizeObserver.observe(divElem, { box: "border-box" });
```

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

| Specification |
| --- |
| Resize Observer # dom-resizeobserver-observe |

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

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