recursal/MDN huggingface dataset:
NDEFMessage: records property
=============================

**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 `records` property of
 `NDEFMessage` interface represents a list of `NDEFRecord`s
 present in the NDEF message.

Value
-----

A list of `NDEFRecord` object that represent data recorded in the message.

Examples
--------

The following example shows how to read the contents of an NDEF message. It first sets up an event handler for `onreading`, which is passed an instance of `NDEFReadingEvent`. An `NDEFMessage` object is returned from `NDEFReadingEvent.message`. It loops through `message.records` and processes each record based on its message type. The data member is a `DataView`, which allows handling data encoded in UTF-16.


```js
ndefReaderInst.onreading = (event) => {
  const ndefMessage = event.message;
  for (const record of ndefMessage.records) {
    console.log(`Record type: ${record.recordType}`);
    console.log(`MIME type: ${record.mediaType}`);
    console.log(`Record id: ${record.id}`);
    switch (record.recordType) {
      case "text":
        // TODO: Read text record with record data, lang, and encoding.
        break;
      case "url":
        // TODO: Read URL record with record data.
        break;
      default:
      // TODO: Handle other records with record data.
    }
  }
};
```

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

| Specification |
| --- |
| Web NFC API # dom-ndefmessage-records |

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

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

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

 The **`CSSMathSum()`** constructor creates a
 new `CSSMathSum` object which creates a new `CSSKeywordValue`
 object which represents the result obtained by calling
 `add()`, `sub()`,
 or `toSum()` on `CSSNumericValue`.

Syntax
------


```js
new CSSMathSum(values)
```

### Parameters

`values`

One or more double integers or `CSSNumericValue` objects.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathsum-cssmathsum |

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

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

 The **`CSSMathSum.values`** read-only property
 of the `CSSMathSum` interface returns a `CSSNumericArray`
 object which contains one or more `CSSNumericValue` objects.

Value
-----

A `CSSNumericArray`.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathsum-values |

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

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

The **`value`** property of the `Attr` interface contains the value of the attribute.

Value
-----

A string representing the attribute value.

Example
-------

The following example displays the current value of the attribute `test`. Clicking on the button will change it to a different value, and read it again to update the displayed value.

### HTML


```html
<label test="initial value"></label>

<button>Click me to set test to <code>"a new value"</code>…</button>

<p>
  Current value of the <code>test</code> attribute:
  <output id="result">None.</output>
</p>
```

### JavaScript


```js
const element = document.querySelector("label");
const button = document.querySelector("button");
const result = document.querySelector("#result");

const attribute = element.attributes[0];
result.value = attribute.value;

button.addEventListener("click", () => {
  attribute.value = "a new value";
  result.value = attribute.value;
});
```

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

| Specification |
| --- |
| DOM Standard # dom-attr-value |

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

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

 The read-only **`namespaceURI`** property of the `Attr` interface returns the namespace URI of the attribute,
 or `null` if the element is not in a namespace.

 The namespace URI is set at the `Attr` creation and cannot be changed.
 An attribute with a namespace can be created using `Element.setAttributeNS()`.


**Note:** an attribute does not inherit its namespace from the element it is attached to.
 If an attribute is not explicitly given a namespace, it has no namespace.


 The browser does not handle or enforce namespace validation per se. It is up to the JavaScript
 application to do any necessary validation. Note, too, that the namespace prefix, once it
 is associated with a particular attribute node, cannot be changed.

Value
-----

A string containing the URI of the namespace, or `null` if the attribute is not in a namespace.

Example
-------

 The following example shows the results for a prefixed attribute in a case of an HTML element, and of a SVG element.
 As HTML doesn't handle namespaces, it will always return `null` in that case.
 In the case of the SVG element, it will return the URI of the XML namespace, `http://www.w3.org/XML/1998/namespace`.

### HTML


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>Show value for &lt;svg&gt;</button>
  <button>Show value for &lt;label&gt;</button>
</p>

<p>
  Namespace URI of the attribute <code>xml:lang</code>:
  <output id="result">None.</output>
</p>
```

### JavaScript


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.namespaceURI;
  });
  i++;
}
```

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

| Specification |
| --- |
| DOM Standard # dom-attr-namespaceuri |

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

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

See also
--------

* The properties `Attr.name`, returning the qualified name of the attribute, `Attr.localName`, the local part of the name, and `Attr.prefix`, the namespace prefix.
* The `Element.namespaceURI` property, equivalent to this one but for an `Element`.
* The `Element.setAttributeNS()` method, creating an attribute with a given namespace.
Attr: name property
===================

The read-only **`name`** property of the `Attr` interface returns the *qualified name* of an attribute, that is the name of the attribute, with the namespace prefix, if any, in front of it. For example, if the local name is `lang` and the namespace prefix is `xml`, the returned qualified name is `xml:lang`.

The qualified name is always in lower case, whatever case at the attribute creation.

Value
-----

A string representing the attribute's qualified name.

Example
-------

The following example displays the qualified name of the first attribute of the two first elements, when we click on the appropriate button.

### HTML


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>Show value for &lt;svg&gt;</button>
  <button>Show value for &lt;label&gt;</button>
</p>

<p>
  Qualified name of the attribute <code>xml:lang</code>:
  <output id="result">None.</output>
</p>
```

### JavaScript


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.name;
  });
  i++;
}
```

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

| Specification |
| --- |
| DOM Standard # dom-attr-name |

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

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

See also
--------

* The properties `Attr.localName`, returning the local part of the qualified name of the attribute, and `Attr.prefix`, the namespace prefix.
* The `Element.tagName()` property, returning the qualified name of an `Element`.
Attr: localName property
========================

The read-only **`localName`** property of the `Attr` interface returns the *local part* of the *qualified name* of an attribute, that is the name of the attribute, stripped from any namespace in front of it. For example, if the qualified name is `xml:lang`, the returned local name is `lang`, if the element supports that namespace.

The local name is always in lower case, whatever case at the attribute creation.

**Note:** HTML only supports a fixed set of namespaces on SVG and MathML elements. These are `xml` (for the `xml:lang` attribute), `xlink` (for the `xlink:href`, `xlink:show`, `xlink:target` and `xlink:title` attributes) and `xpath`.

That means that the local name of an attribute of an HTML element is always be equal to its qualified name: Colons are treated as regular characters. In XML, like in SVG or MathML, the colon denotes the end of the prefix and what is before is the namespace; the local name may be different from the qualified name.

Value
-----

A string representing the local part of the attribute's qualified name.

Example
-------

The following example displays the local name of the first attribute of the two first elements, when we click on the appropriate button. The `<svg>` element is XML and supports namespaces leading to the local name (`lang`) to be different from the qualified name `xml:lang`. The `<label>` element is HTML, that doesn't support namespaces, leading to a local name and the qualified name to be both `xml:lang`.

### HTML


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>Show value for &lt;svg&gt;</button>
  <button>Show value for &lt;label&gt;</button>
</p>

<p>
  Local part of the attribute <code>xml:lang</code>:
  <output id="result">None.</output>
</p>
```

### JavaScript


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.localName;
  });
  i++;
}
```

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

| Specification |
| --- |
| DOM Standard # dom-attr-localname |

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

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

See also
--------

* The properties `Attr.name`, returning the qualified name of the attribute, and `Attr.prefix`, the namespace prefix.
* The `Element.localName()` property, returning the local name of an `Element`.
Attr: prefix property
=====================

The read-only **`prefix`** property of the `Attr` returns the namespace prefix of the attribute, or `null` if no prefix is specified.

The prefix is always in lower case, whatever case is used at the attribute creation.

**Note:** Only XML supports namespaces. HTML does not. That means that the prefix of an attribute of an HTML element will always be `null`.

Also, only the `xml` (for the `xml:lang` attribute), `xlink` (for the `xlink:href`, `xlink:show`, `xlink:target` and `xlink:title` attributes) and `xpath` namespaces are supported, and only on SVG and MathML elements.

Value
-----

A string containing the prefix of the namespace the attribute belongs too. If none, it returns `null`.

Example
-------

### HTML


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>Show value for &lt;svg&gt;</button>
  <button>Show value for &lt;label&gt;</button>
</p>

<p>
  Prefix of the attribute <code>xml:lang</code>:
  <output id="result">None.</output>
</p>
```

### JavaScript


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.prefix;
  });
  i++;
}
```

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

| Specification |
| --- |
| DOM Standard # dom-attr-prefix |

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

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

See also
--------

* The properties `Attr.name`, returning the qualified name of the attribute, and `Attr.localName`, its local name.
* The `Element.prefix()` property, returning the namespace prefix of an `Element`.
Attr: ownerElement property
===========================

The read-only **`ownerElement`** property of the `Attr` interface returns the `Element` the attribute belongs to.

Value
-----

The `Element` the attribute belongs to, or `null` if the attribute is not linked to an element.

Example
-------

The following example displays the qualified name of the element of the two first elements, when we click on the appropriate button.

### HTML


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>Show value for &lt;svg&gt;</button>
  <button>Show value for &lt;label&gt;</button>
</p>

<p>
  Qualified name of the owner element of the attribute <code>xml:lang</code>:
  <output id="result">None.</output>
</p>
```

### JavaScript


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.ownerElement.tagName.toLowerCase();
  });
  i++;
}
```

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

| Specification |
| --- |
| DOM Standard # dom-attr-ownerelement |

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

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

**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.

The read-only **`specified`** property of the `Attr` interface always returns `true`.

Value
-----

Always returns `true`.

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

| Specification |
| --- |
| DOM Standard # dom-attr-specified |

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

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

The **`stop()`** method of the `MediaStreamTrack` interface stops the track.

Syntax
------


```js
stop()
```

### Parameters

None.

### Return value

None (`undefined`).

Description
-----------

 Calling `stop()` tells the user agent that the track's
 source—whatever that source may be, including files, network streams, or a local camera
 or microphone—is no longer needed by the `MediaStreamTrack`. Since multiple
 tracks may use the same source (for example, if two tabs are using the device's
 microphone), the source itself isn't necessarily immediately stopped. It is instead
 disassociated from the track and the track object is stopped. Once no media tracks are
 using the source, the source may actually be completely stopped.

 Immediately after calling `stop()`, the
 `readyState` property is set to
 `ended`. Note that the `ended` event will not be fired in this situation.

Examples
--------

### Stopping a video stream

 In this example, we see a function which stops a streamed video by calling
 `stop()` on every track on a given `<video>`.


```js
function stopStreamedVideo(videoElem) {
  const stream = videoElem.srcObject;
  const tracks = stream.getTracks();

  tracks.forEach((track) => {
    track.stop();
  });

  videoElem.srcObject = null;
}
```


 This works by obtaining the video element's stream from its
 `srcObject` property. Then the stream's track
 list is obtained by calling its `getTracks()`
 method. From there, all that remains to do is to iterate over the track list using
 `forEach()` and calling each track's `stop()`
 method.

 Finally, `srcObject` is set to `null` to sever the link to the
 `MediaStream` object so it can be released.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-stop |

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

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

See also
--------

* `MediaStreamTrack`, the interface it belongs to.
* `MediaStreamTrack.readyState`
* `ended`
MediaStreamTrack: getConstraints() method
=========================================

 The **`getConstraints()`** method of
 the `MediaStreamTrack` interface returns a
 `MediaTrackConstraints` object containing the set of constraints most
 recently established for the track using a prior call to
 `applyConstraints()`. These
 constraints indicate values and ranges of values that the website or application has
 specified are required or acceptable for the included constrainable properties.

 Constraints can be used to ensure that the media meets certain guidelines you prefer.
 For example, you may prefer high definition video but require that the frame rate be a
 little low to help keep the data rate low enough not overtax the network. Constraints
 can also specify ideal and/or acceptable sizes or ranges of sizes. See Capabilities, constraints, and settings for details on how to work with constrainable properties.

Syntax
------


```js
getConstraints()
```

### Parameters

None.

### Return value

 A `MediaTrackConstraints` object which indicates the constrainable
 properties the website or app most recently set using
 `applyConstraints()`. The properties
 in the returned object are listed in the same order as when they were set, and only
 properties specifically set by the site or app are included.


**Note:** The returned set of constraints doesn't necessarily describe
 the actual state of the media. Even if any of the constraints couldn't be met, they
 are still included in the returned object as originally set by the site's code. To get
 the currently active settings for all constrainable properties, you should instead
 call `getSettings()`.


Examples
--------

 This example obtains the current constraints for a track, sets the
 `facingMode`, and applies the updated
 constraints.


```js
function switchCameras(track, camera) {
  const constraints = track.getConstraints();
  constraints.facingMode = camera;
  track.applyConstraints(constraints);
}
```

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-getconstraints |

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

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

 The **`enabled`** property of the
 `MediaStreamTrack` interface is a Boolean value which is
 `true` if the track is allowed to render the source stream or
 `false` if it is not. This can be used to intentionally mute a
 track.

 When enabled, a track's data is output from the source to the
 destination; otherwise, empty frames are output.

 In the case of audio, a disabled track generates frames of silence (that is, frames in
 which every sample's value is 0). For video tracks, every frame is filled entirely with
 black pixels.

 The value of `enabled`, in essence, represents what a typical user would
 consider the muting state for a track, whereas the `muted` property indicates a state in which the track is temporarily unable to output
 data, such as a scenario in which frames have been lost in transit.


**Note:** If the track has been disconnected, the value of this property
 can be changed, but has no effect.


Value
-----

 When `true`, `enabled` indicates that the track is permitted to
 render its actual media to the output. When `enabled` is set to
 `false`, the track only generates empty frames.

 Empty audio frames have every sample's value set to 0. Empty video frames have every
 pixel set to black.


**Note:** When implementing a mute/unmute feature, you should use the
 `enabled` property.


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

 If the `MediaStreamTrack` represents the video input from a camera,
 disabling the track by setting `enabled` to `false` also updates
 device activity indicators to show that the camera is not currently recording or
 streaming. For example, the green "in use" light next to the camera in iMac and MacBook
 computers turns off while the track is muted in this way.

Example
-------

This example demonstrates a `click` event handler for a pause button.


```js
pauseButton.onclick = (evt) => {
  const newState = !myAudioTrack.enabled;

  pauseButton.innerHTML = newState ? "&#x25B6;&#xFE0F;" : "&#x23F8;&#xFE0F;";
  myAudioTrack.enabled = newState;
};
```


 This creates a variable, `newState`, which is the opposite of the current
 value of `enabled`, then uses that to select either the Emoji character for
 the "play" icon or the character for the "pause" icon as the new
 `innerHTML` of the pause button's element.

Finally, the new value of `enabled` is saved, making the change take effect.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediastreamtrack-enabled |

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

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

See also
--------

* Media Capture and Streams API
* `MediaStream`
* `MediaStreamTrack`
* WebRTC