recursal/MDN huggingface dataset:
DocumentFragment: querySelectorAll() method
===========================================

 The **`DocumentFragment.querySelectorAll()`** method returns a
 `NodeList` of elements within the `DocumentFragment` (using
 depth-first pre-order traversal of the document's nodes) that matches the specified
 group of selectors.

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

Syntax
------


```js
querySelectorAll(selectors)
```

### Parameters

`selectors`

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


### Return value

 A non-live `NodeList` containing one `Element` object for
 each element that matches at least one of the specified selectors or an empty
 `NodeList` in case of no matches.

Examples
--------

 This example returns a list of all `div` elements within the
 `DocumentFragment` with a class of either "`note`" or
 "`alert`":


```js
const matches = documentfrag.querySelectorAll("div.note, div.alert");
```

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

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

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: childElementCount property
============================================

 The **`DocumentFragment.childElementCount`** read-only property
 returns the number of child elements of a `DocumentFragment`.

To get the number of children of a specific element, see `Element.childElementCount`.

Value
-----

A number representing the number of children of the document fragment.

Examples
--------


```js
let fragment = new DocumentFragment();
fragment.childElementCount; // 0

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

fragment.childElementCount; // 1
```

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

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

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

See also
--------

* `Element.childElementCount`
* `Document.childElementCount`
DocumentFragment: firstElementChild property
============================================

 The **`DocumentFragment.firstElementChild`** read-only property
 returns the document fragment's first child `Element`, or `null` if there
 are no child elements.

Value
-----

An `Element` that is the first child `Element` of the object, or `null` if there are none.

Examples
--------


```js
let fragment = new DocumentFragment();
fragment.firstElementChild; // null

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

fragment.firstElementChild; // <p>
```

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

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

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

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

See also
--------

* `Element.firstElementChild`
DocumentFragment: lastElementChild property
===========================================

 The **`DocumentFragment.lastElementChild`** read-only property
 returns the document fragment's last child `Element`, or `null` if there
 are no child elements.

Value
-----

An `Element` that is the last child `Element` of the object, or `null` if there are none.

Examples
--------


```js
let fragment = new DocumentFragment();
fragment.lastElementChild; // null

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

fragment.lastElementChild; // <p>
```

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

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

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

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

See also
--------

* `Element.lastElementChild`
DocumentFragment: append() method
=================================

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

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

Syntax
------


```js
append(param1)
append(param1, param2)
append(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
--------

### Appending an element to a document fragment


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

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

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

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

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

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

See also
--------

* `DocumentFragment.prepend()`
* `Element.append()`
DocumentFragment: replaceChildren() method
==========================================

 The **`DocumentFragment.replaceChildren()`** method replaces the
 existing children of a `DocumentFragment` with a specified new set of children. These
 can be string or `Node` objects.

Syntax
------


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

### Parameters

`param1`, …, `paramN`

 A set of `Node` or string objects to replace the
 `DocumentFragment`'s existing children with. If no replacement objects are
 specified, then the `DocumentFragment` is emptied of all child nodes.


### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the constraints of the node tree are violated.

Examples
--------

### Emptying a document fragment

`replaceChildren()` provides a very convenient mechanism for emptying a document fragment
 of all its children. You call it on the document fragment without any argument specified:


```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>]

fragment.replaceChildren();

fragment.children; // HTMLCollection []
```

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

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

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

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

See also
--------

* `DocumentFragment.prepend()`
* `DocumentFragment.append()`
GPUSampler: label property
==========================

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

 The **`label`** property of the
 `GPUSampler` interface provides a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createSampler()` call, or you can get and set it directly on the `GPUSampler` object.

Value
-----

A string. If this has not been previously set as described above, it will be an empty string.

Examples
--------

Setting and getting a label via `GPUSampler.label`:


```js
// ...

const sampler = device.createSampler({
  compare: "less",
});

sampler.label = "mysampler";

console.log(sampler.label); // "mysampler"
```


Setting a label via the originating `GPUDevice.createSampler()` call, and then getting it via `GPUSampler.label`:


```js
// ...

const sampler = device.createSampler({
  compare: "less",
  label: "mysampler",
});

console.log(sampler.label); // "mysampler"
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API
PaymentRequest: shippingOption property
=======================================

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

**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 **`shippingOption`** read-only attribute of
 the `PaymentRequest` interface returns either the id of a selected shipping
 option, null (if no shipping option was set to be selected) or a shipping option
 selected by the user. It is initially `null` by when no "selected" shipping
 options are provided.

 This attribute is only populated if the constructor is called with the
 `requestShipping` flag set to `true`. If
 `requestShipping` was `false` (or missing),
 `shippingOption` returns `null`, even the developer provides
 a selected a shipping option.

Value
-----

Examples
--------

 In the example below, the `shippingaddresschange` and
 the `shippingoptionchange` events are dispatched. In
 each calls to `updateDetails()` are made, one using a promise, and the other
 with a plain JS object. This demonstrates synchronous and asynchronous updates to a
 payment sheet.


```js
const request = new PaymentRequest(methodData, details, options);
// Async update to details
request.onshippingaddresschange = (ev) => {
  ev.updateWith(checkShipping(request));
};
// Sync update to the total
request.onshippingoptionchange = (ev) => {
  const shippingOption = shippingOptions.find(
    (option) => option.id === request.id,
  );
  const newTotal = {
    currency: "USD",
    label: "Total due",
    value: calculateNewTotal(shippingOption),
  };
  ev.updateWith({ ...details, total: newTotal });
};
async function checkShipping(request) {
  try {
    const json = request.shippingAddress.toJSON();

    await ensureCanShipTo(json);
    const { shippingOptions, total } = await calculateShipping(json);

    return { ...details, shippingOptions, total };
  } catch (err) {
    return { ...details, error: `Sorry! we can't ship to your address.` };
  }
}
```

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

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

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

**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 **`shippingAddress`** read-only property of
 the `PaymentRequest` interface returns the shipping address provided by the
 user. It is `null` by default.

Value
-----

Examples
--------

 Generally, the user agent will fill the `shippingAddress` property value.
 You can trigger this by setting
 `PaymentOptions.requestShipping` to `true` when calling
 the `PaymentRequest` constructor.

 In the example below, the cost of shipping varies by geography. When the
 `shippingaddresschange` is
 called, `updateDetails()` is called to update the details of
 the `PaymentRequest`, using `shippingAddress` to set the correct
 shipping cost.


```js
// Initialization of PaymentRequest arguments are excerpted for the sake of
// brevity.
const payment = new PaymentRequest(supportedInstruments, details, options);

payment.addEventListener("shippingaddresschange", (evt) => {
  evt.updateWith(
    new Promise((resolve) => {
      updateDetails(details, request.shippingAddress, resolve);
    }),
  );
});

payment
  .show()
  .then((paymentResponse) => {
    // Processing of paymentResponse excerpted for brevity.
  })
  .catch((err) => {
    console.error("Uh oh, something bad happened", err.message);
  });

function updateDetails(details, shippingAddress, resolve) {
  if (shippingAddress.country === "US") {
    const shippingOption = {
      id: "",
      label: "",
      amount: { currency: "USD", value: "0.00" },
      selected: true,
    };
    if (shippingAddress.region === "MO") {
      shippingOption.id = "mo";
      shippingOption.label = "Free shipping in Missouri";
      details.total.amount.value = "55.00";
    } else {
      shippingOption.id = "us";
      shippingOption.label = "Standard shipping in US";
      shippingOption.amount.value = "5.00";
      details.total.amount.value = "60.00";
    }
    details.displayItems.splice(2, 1, shippingOption);
    details.shippingOptions = [shippingOption];
  } else {
    delete details.shippingOptions;
  }
  resolve(details);
}
```

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

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

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

**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 **`shippingType`** read-only property of the
 `PaymentRequest` interface returns one of `"shipping"`,
 `"delivery"`, `"pickup"`, or `null` if one was not
 provided by the constructor.

Value
-----

 One of `"shipping"`, `"delivery"`, `"pickup"`, or
 `null`.

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

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

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

 The `PaymentRequest` method
 **`canMakePayment()`** determines whether or not the request
 is configured in a way that is compatible with at least one payment method supported
 by the user agent.

 You can call this before calling
 `show()` to provide a streamlined user experience
 when the user's browser can't handle any of the payment methods you accept.

 For instance, you might call `canMakePayment()` to determine if the browser
 will let the user pay using Payment Request API, and if it won't, you could fall back to
 another payment method, or offer a list of methods that aren't handled by Payment
 Request API (or even provide instructions for paying by mail or by phone).

Syntax
------


```js
canMakePayment()
```

### Parameters

None.

### Return value

 A `Promise` to a boolean value that resolves to `true`
 if the user agent supports any of the payment methods supplied when instantiating the
 request using the `PaymentRequest`
 constructor. If the payment can't be processed, the promise receives a value of
 `false`.


**Note:** If you call this too often, the browser may reject the
 returned promise with a `DOMException`.


Examples
--------

 In the following example, is excerpted from a demo that asynchronously builds a `PaymentRequest` object for
 both Apple Pay and Example Pay. It wraps the call to `canMakePayment()` in
 feature detection, and calls an appropriate callback depending on the resolution of the
 `Promise`.


```js
async function initPaymentRequest() {
  const details = {
    total: {
      label: "Total",
      amount: {
        currency: "USD",
        value: "0.00",
      },
    },
  };

  const supportsApplePay = new PaymentRequest(
    [{ supportedMethods: "https://apple.com/apple-pay" }],
    details,
  ).canMakePayment();

  // Supports Apple Pay?
  if (await supportsApplePay) {
    // show Apple Pay logo, for instance
    return;
  }

  // Otherwise, let's see if we can use Example Pay
  const supportsExamplePay = await new PaymentRequest(
    [{ supportedMethods: "https://example.com/pay" }],
    details,
  ).canMakePayment();

  if (supportsExamplePay) {
    // show Example Pay support
    return;
  }

  // Otherwise, make payments using HTML form element
}
```

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentrequest-canmakepayment |

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

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

See also
--------

* `PaymentRequest.show()`
PaymentRequest: abort() method
==============================

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

 The `PaymentRequest.abort()` method of the `PaymentRequest`
 interface causes the user agent to end the payment request and to remove any user
 interface that might be shown.

Syntax
------


```js
abort()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

 The following example sets up a timeout to clear the payment request that might have
 been abandoned or neglected.


```js
const request = new PaymentRequest(supportedInstruments, details, options);

const paymentTimeout = setTimeout(
  () => {
    clearTimeout(paymentTimeout);
    request
      .abort()
      .then(() => {
        print("Payment timed out after 20 minutes.");
      })
      .catch(() => {
        print(
          "Unable to abort, because the user is currently in the process " +
            "of paying.",
        );
      });
  },
  20 \* 60 \* 1000,
); /\* 20 minutes \*/
```

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentrequest-abort |

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

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

See also
--------

* `PaymentRequest.abort()`
PaymentRequest: id property
===========================

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

 The **`id`** read-only attribute of the
 `PaymentRequest` interface returns a unique identifier for a particular
 `PaymentRequest` instance.

 When constructing an instance of the `PaymentRequest`, you are able to
 supply an custom id. If none is provided, the browser automatically sets the id value to a UUID.

Example
-------

This example shows how to give a `PaymentRequest` instance a custom id.


```js
const details = {
  id: "super-store-order-123-12312",
  total: {
    label: "Total due",
    amount: { currency: "USD", value: "65.00" },
  },
};
const request = new PaymentRequest(methodData, details);
console.log(request.id); // super-store-order-123-12312
```


 The `id` is then also available in the `PaymentResponse`
 returned from the `show()` method, but under the `requestId`
 attribute.


```js
const response = await request.show();
console.log(response.requestId === request.id);

// And in serialized form too
const json = response.toJSON();
console.log(json.requestId, response.requestId, request.id);
```

Value
-----

A string.

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentrequest-id |

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

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

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

**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 **`shippingaddresschange`** event is sent to the `PaymentRequest` object when the user selects a shipping address or changes details of their shipping address.

This event is not cancelable and does not bubble.

Syntax
------

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


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

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

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

A `PaymentRequestUpdateEvent`. Inherits from `Event`.

Event

PaymentRequestUpdateEventEvent properties
----------------

*Provides only the properties inherited from `Event`.*

Usage notes
-----------

Depending on the browser, the shipping address information may be redacted for privacy reasons. That is, the `PaymentAddress` which contains the shipping address may have some portions of its content altered, obscured, or left out entirely in order to prevent identifying the user without their consent (since if they choose to have you ship products to them, you'll need their address).

Example
-------

In this example, a handler for the `shippingaddresschange` event is set up to validate that the address meets requirements set by the web application.


```js
const paymentRequest = new PaymentRequest(methodData, details, options);

paymentRequest.addEventListener(
  "shippingaddresschange",
  (event) => {
    let detailsUpdate = checkAddress(paymentRequest.shippingAddress);
    event.updateWith(detailsUpdate);
  },
  false,
);

const checkAddress = (theAddress) => {
  let detailsUpdate = {};

  // Check the address, return an object with any changes or errors.

  return detailsUpdate;
};
```


You can also establish a handler for `shippingaddresschange` using the `onshippingaddresschange` event handler property:


```js
paymentRequest.onshippingaddresschange = (event) => {
  let detailsUpdate = checkAddress(paymentRequest.shippingAddress);
  event.updateWith(detailsUpdate);
};
```

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

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