recursal/MDN huggingface dataset:
MouseEvent: y property
======================

The **`MouseEvent.y`** property is an alias for the `MouseEvent.clientY` property.

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

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-y |

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

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

The **`screenY`** read-only property of the `MouseEvent` interface provides the vertical coordinate (offset) of the mouse pointer in screen coordinates.

Value
-----

A `double` floating point value.

Early versions of the spec defined this as an integer referring to the number of pixels.

Examples
--------

This example displays your mouse's coordinates whenever you trigger the `mousemove` event.

### HTML


```html
<p>Move your mouse to see its position.</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### Result

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

| Specification |
| --- |
| UI Events # dom-mouseevent-screeny |

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

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

See also
--------

* `MouseEvent`
* `screenX`
* `clientX` / `clientY`
* Coordinate systems
MouseEvent: clientY property
============================

The **`clientY`** read-only property of the `MouseEvent` interface provides the vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

For example, clicking on the top edge of the viewport will always result in a mouse event with a `clientY` value of `0`, regardless of whether the page is scrolled vertically.

Value
-----

A `double` floating point value.

Examples
--------

This example displays your mouse's coordinates whenever you trigger the `mousemove` event.

### HTML


```html
<p>Move your mouse to see its position.</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### Result

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

| Specification |
| --- |
| UI Events # dom-mouseevent-clienty |

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

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

See also
--------

* `MouseEvent`
* `clientX`
* `screenX` / `screenY`
* Coordinate systems
MouseEvent: movementX property
==============================

 The **`movementX`** read-only property of the `MouseEvent` interface provides the difference in the X coordinate of the mouse pointer between the given event and the previous `mousemove` event.
 In other words, the value of the property is computed like this: `currentEvent.movementX = currentEvent.screenX - previousEvent.screenX`.

**Warning:** Browsers use different units for `movementX` and `screenX` than what the specification defines. Depending on the browser and operating system, the `movementX` units may be a physical pixel, a logical pixel, or a CSS pixel. You may want to avoid the movement properties, and instead calculate the delta between the current client values (`screenX`, `screenY`) and the previous client values.

Value
-----

A number. Always zero on any `MouseEvent` other than `mousemove`.

Examples
--------

This example logs the amount of mouse movement using `movementX` and `movementY`.

### HTML


```html
<p id="log">Move your mouse around.</p>
```

### JavaScript


```js
function logMovement(event) {
  log.insertAdjacentHTML(
    "afterbegin",
    `movement: ${event.movementX}, ${event.movementY}<br>`,
  );
  while (log.childNodes.length > 128) log.lastChild.remove();
}

const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);
```

### Result

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

| Specification |
| --- |
| Pointer Lock 2.0 # dom-mouseevent-movementx |

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

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

See also
--------

* `MouseEvent.movementY`
* `MouseEvent`
* Pointer Lock
MouseEvent: getModifierState() method
=====================================

The **`MouseEvent.getModifierState()`** method returns the current state of the specified modifier key: `true` if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, `false`.

See `KeyboardEvent.getModifierState()` for details.

Syntax
------


```js
getModifierState(key)
```

### Parameters

`key`

 A modifier key value.
 The value must be one of the `KeyboardEvent.key` values which represent modifier keys or `"Accel"` 
Deprecated
.
 This is case-sensitive.


### Return value

A boolean value.

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

| Specification |
| --- |
| UI Events # dom-mouseevent-getmodifierstate |

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

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

See also
--------

* The `MouseEvent` this method belongs to.
* `KeyboardEvent.getModifierState`
HTMLCollection: item() method
=============================

 The `HTMLCollection` method `item()`
 returns the element located at the specified offset into the collection.


**Note:** Because the contents of an `HTMLCollection` are
 live, changes to the underlying DOM can and will cause the position of individual
 elements in the collection to change, so the index value will not necessarily remain
 constant for a given element.


Syntax
------


```js
item(index)
```

### Parameters

`index`

 The position of the `Element` to be returned. Elements appear in an
 `HTMLCollection` in the same order in which they appear in the document's
 source.


### Return value

 The `Element` at the specified index, or `null` if
 `index` is less than zero or greater than or equal to the length property.

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

 The `item()` method returns a numbered element from an
 `HTMLCollection`. In JavaScript, it is easier to treat the
 `HTMLCollection` as an array and to index it using array notation. See the
 example below.

Examples
--------


```js
const images = document.images; // This is an HTMLCollection
const img0 = images.item(0); // You can use the item() method this way
const img1 = images[1]; // But this notation is easier and more common
```

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

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

See also
--------

* `NodeList.item()`
HTMLCollection: namedItem() method
==================================

 The **`namedItem()`** method of the `HTMLCollection` interface returns
 the first `Element` in the collection whose `id` or `name` attribute match the specified name, or `null` if no element matches.

In JavaScript, using the array bracket syntax with a `String`, like `collection["value"]` is equivalent to `collection.namedItem("value")`.

Syntax
------


```js
namedItem(key)
```

### Parameters

* `key` is a string representing the value of the `id` or `name` attribute of the element we are looking for.
### Return value

* `item` is the first `Element` in the `HTMLCollection` matching the *key*, or `null`, if there are none.
Example
-------

### HTML


```html
<div id="personal">
  <span name="title">Dr.</span>
  <span name="firstname">Carina</span>
  <span name="lastname">Anand</span>
  <span id="degree">(MD)</span>
</div>
```

### JavaScript


```js
const container = document.getElementById("personal");

// Returns the HTMLSpanElement with the name "title" if no such element exists null is returned
const titleSpan = container.children.namedItem("title");

// The following variants return undefined instead of null if there's no element with a matching name or id
const firstnameSpan = container.children["firstname"];
const lastnameSpan = container.children.lastname;

// Returns the span element with the id "degree"
const degreeSpan = container.children.namedItem("degree");

const output = document.createElement("div");
output.textContent = `Result: ${titleSpan.textContent} ${firstnameSpan.textContent} ${lastnameSpan.textContent} ${degreeSpan.textContent}`;

container.insertAdjacentElement("afterend", output);
```

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

| Specification |
| --- |
| DOM Standard # dom-htmlcollection-nameditem-key |

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

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

 The **`HTMLCollection.length`** property returns the number of
 items in a `HTMLCollection`.

Value
-----

An integer value representing the number of items in a `HTMLCollection`.

Examples
--------

 The `length` property is often useful in DOM programming. It's often used to
 test the length of a list, to see if it exists at all. It's also commonly used as the
 iterator in a `for` loop, as in this example.


```js
// All the elements with the class ".test" in the document
const items = document.getElementsByClassName("test");

// For each test item in the list,
// append the entire element as a string of HTML
let gross = "";
for (let i = 0; i < items.length; i++) {
  gross += items[i].innerHTML;
}

// gross is now all the HTML for the test elements
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-htmlcollection-length① |

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

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

The **`view`** getter property of the `ReadableStreamBYOBRequest` interface returns the current view.

Value
-----

A typed array representing the destination region to which the controller can write generated data.

`null` if the request has already been responded to, by calling `ReadableStreamBYOBRequest.respond()` or `ReadableStreamBYOBRequest.respondWithNewView()`.

Examples
--------

See the examples in `ReadableStreamBYOBRequest`.

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

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-view① |

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

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

See also
--------

* Using readable byte stream
ReadableStreamBYOBRequest: respondWithNewView() method
======================================================

The **`respondWithNewView()`** method of the `ReadableStreamBYOBRequest` interface specifies a new view that the consumer of the associated readable byte stream should write to instead of `ReadableStreamBYOBRequest.view`.

 The new view must be a `TypedArray` or a `DataView` that provides a view onto the same backing memory region as `ReadableStreamBYOBRequest.view`.
 After this method is called, the view that was passed into the method will be transferred and no longer modifiable.

 The method is intended for use cases where an underlying byte source needs to transfer a `byobRequest.view` internally before finishing its response.
 For example, the source may transfer the BYOB view to a separate worker thread, and wait for the worker to transfer it back once it has been filled.

Syntax
------


```js
respondWithNewView(view)
```

### Parameters

`view`

A `TypedArray` or a `DataView` that the consumer of the associated readable byte stream should write to instead of `ReadableStreamBYOBRequest.view`.

 This must be a view onto the same backing memory region as `ReadableStreamBYOBRequest.view` and occupy the same or less memory.
 Specifically, it must be either the view's buffer or a transferred version, must have the same `byteOffset`, and a `byteLength` (number of bytes written) that is less than or equal to that of the view.


### Return value

None (`undefined`).

### Exceptions

`TypeError`

 Thrown if the source object is not a `ReadableStreamBYOBRequest`, or there is no associated controller, or the associated internal array buffer is non-existent or detached.
 It may also be thrown if the `view` is zero-length when there is an active reader, or non-zero when called on a closed stream.


`RangeError`

 Thrown if the new `view` does not match the backing memory region of `ReadableStreamBYOBRequest.view`.
 For example, it is not the same buffer (or a transferred version), has a different `byteOffset`, or is larger than the memory available to the backing view.


Examples
--------

The view to be transferred must be of the same type as `ReadableStreamBYOBRequest.view`, have the same underlying buffer and byte offset, and be the same or smaller byteLength.

For example, we might define the view and respond as shown below:


```js
const v = controller.byobRequest.view;
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
byobRequest.respondWithNewView(
  byobRequest.view.subarray(v.byteOffset, bytesRead),
);
```

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

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-respond-with-new-view① |

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

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

See also
--------

* Using readable byte stream
ReadableStreamBYOBRequest: respond() method
===========================================

The **`respond()`** method of the `ReadableStreamBYOBRequest` interface is used to signal to the associated readable byte stream that the specified number of bytes were written into the `ReadableStreamBYOBRequest.view`.

After this method is called, the `view` will be transferred and no longer modifiable.

Syntax
------


```js
respond(bytesWritten)
```

### Parameters

`bytesWritten`

The number of bytes written into `ReadableStreamBYOBRequest.view`.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

The request does not have an associated `ReadableByteStreamController` or the view buffer is not detached/cannot be transferred into.

Examples
--------

The code below is taken from the live examples in Using readable byte stream.

 The method is called by an underlying byte source as part of making a zero-copy transfer of data to fulfill a pending read request from a consumer.
 The underlying source first writes data into the `ReadableStreamBYOBRequest.view` and then calls this `respond()` method to indicate *how* much data was copied into the buffer, and cause the data to be transferred to the reader.

The code below shows this case using a hypothetical `readInto()` method to copy data into the view:


```js
const v = controller.byobRequest.view;
bytesRead = socket.readInto(v.buffer, v.byteOffset, v.byteLength);
controller.byobRequest.respond(bytesRead);
```


After the operation the `byobRequest.view` is detached and the request should be discarded.

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

| Specification |
| --- |
| Streams Standard # ref-for-rs-byob-request-respond① |

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

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

See also
--------

* Using readable byte stream
SpeechRecognitionErrorEvent: message property
=============================================

 The **`message`** read-only property of the
 `SpeechRecognitionErrorEvent` interface returns a message describing the
 error in more detail.

Value
-----

 A string containing more details about the error that was raised.
 Note that the spec does not define the exact wording of these messages — this is up to
 the implementors to decide upon.

Examples
--------


```js
const recognition = new SpeechRecognition();

recognition.onerror = (event) => {
  console.log(`Speech recognition error detected: ${event.error}`);
  console.log(`Additional information: ${event.message}`);
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionerrorevent-message |

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

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

See also
--------

* Web Speech API
SpeechRecognitionErrorEvent: error property
===========================================

 The **`error`** read-only property of the
 `SpeechRecognitionErrorEvent` interface returns the type of error raised.

Value
-----

A string naming the type of error. The possible error types are:

`no-speech`

No speech was detected.

`aborted`

 Speech input was aborted in some manner, perhaps by some user-agent-specific
 behavior like a button the user can press to cancel speech input.


`audio-capture`

Audio capture failed.

`network`

Network communication required for completing the recognition failed.

`not-allowed`

 The user agent disallowed any speech input from occurring for reasons of security,
 privacy or user preference.


`service-not-allowed`

 The user agent disallowed the requested speech recognition service, either because
 the user agent doesn't support it or because of reasons of security, privacy or user
 preference. In this case it would allow another more suitable speech recognition
 service to be used instead.


`bad-grammar`

 There was an error in the speech recognition grammar or semantic tags, or the chosen
 grammar format or semantic tag format was unsupported.


`language-not-supported`

The user agent does not support the language specified in the value of `lang` attribute of the `SpeechRecognition` object. The set of supported languages is browser-dependent, and from frontend code there is no way to programmatically determine what languages a user's browser supports for speech recognition.

Examples
--------


```js
const recognition = new SpeechRecognition();

recognition.onerror = (event) => {
  console.log(`Speech recognition error detected: ${event.error}`);
  console.log(`Additional information: ${event.message}`);
};
```

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

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionerrorevent-error |

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

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

See also
--------

* Web Speech API
FileReaderSync: readAsDataURL() method
======================================

The **`readAsDataURL()`** method of the `FileReaderSync` interface allows to read `File` or `Blob` objects in a synchronous way into a string representing a data URL. This interface is only available in workers as it enables synchronous I/O that could potentially block.

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

Syntax
------


```js
readAsDataURL(File)
readAsDataURL(Blob)
```

### Parameters

`blob`

The `File` or `Blob` to read.

### Return value

A string representing the input data as a data URL.

Exceptions
----------

The following exceptions can be raised by this method:

`NotFoundError` `DOMException`

Thrown if the resource represented by the DOM `File` or `Blob` cannot be found, e.g. because it has been erased.

`SecurityError` `DOMException`

Thrown if one of the following problematic situation is detected:

* the resource has been modified by a third party;
* too many read are performed simultaneously;
* the file pointed by the resource is unsafe for a use from the Web (like it is a system file).

`NotReadableError` `DOMException`

Thrown if the resource cannot be read due to a permission problem, like a concurrent lock.

`EncodingError` `DOMException`

Thrown if the resource is a data URL and exceed the limit length defined by each browser.

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

| Specification |
| --- |
| File API # readAsDataURLSync-section |

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

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

See also
--------

* File and Directory Entries API
* `File`
* `FileReaderSync`
* `FileReader`
* `Blob`
FileReaderSync: readAsText() method
===================================

The **`readAsText()`** method of the `FileReaderSync` interface allows to read `File` or `Blob` objects in a synchronous way into a string. This interface is only available in workers as it enables synchronous I/O that could potentially block.

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

Syntax
------


```js
readAsText(File)
readAsText(Blob)
readAsText(File, encoding)
readAsText(Blob, encoding)
```

### Parameters

`blob`

The `File` or `Blob` to read.

`encoding`

The optional parameter specifies encoding to be used (e.g., `iso-8859-1` or `UTF-8`). If not present, the method will apply a detection algorithm for it.

### Return value

A string representing the input data.

Exceptions
----------

The following exceptions can be raised by this method:

`NotFoundError` `DOMException`

Thrown if the resource represented by the DOM `File` or `Blob` cannot be found, e.g. because it has been erased.

`SecurityError` `DOMException`

Thrown if one of the following problematic situation is detected:

* the resource has been modified by a third party;
* too many read are performed simultaneously;
* the file pointed by the resource is unsafe for a use from the Web (like it is a system file).

`NotReadableError` `DOMException`

Thrown if the resource cannot be read due to a permission problem, like a concurrent lock.

`EncodingError` `DOMException`

Thrown if the resource is a data URL and exceed the limit length defined by each browser.

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

| Specification |
| --- |
| File API # readAsTextSync |

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

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

See also
--------

* File API
* `File`
* `FileReaderSync`
* `FileReader`
* `Blob`
FileReaderSync: readAsBinaryString() method
===========================================

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

**Note:** This method is deprecated in favor of `readAsArrayBuffer()`.

The **`readAsBinaryString()`** method of the `FileReaderSync` interface allows to read `File` or `Blob` objects in a synchronous way into a string. This interface is only available in workers as it enables synchronous I/O that could potentially block.

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

Syntax
------


```js
readAsBinaryString(File)
readAsBinaryString(Blob)
```

### Parameters

`blob`

The `File` or `Blob` to read.

### Return value

A string representing the input data.

Exceptions
----------

`NotFoundError` `DOMException`

Thrown if the resource represented by the DOM `File` or `Blob` cannot be found, e.g. because it has been erased.

`SecurityError` `DOMException`

Thrown if one of the following problematic situation is detected:

* the resource has been modified by a third party;
* too many read are performed simultaneously;
* the file pointed by the resource is unsafe for a use from the Web (like it is a system file).

`NotReadableError` `DOMException`

Thrown if the resource cannot be read due to a permission problem, like a concurrent lock.

`EncodingError` `DOMException`

Thrown if the resource is a data URL and exceed the limit length defined by each browser.

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

| Specification |
| --- |
| File API # readAsBinaryStringSyncSection |

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

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

See also
--------

* File API
* `File`
* `FileReaderSync`
* `FileReader`
* `Blob`