recursal/MDN huggingface dataset:
Element: localName property
===========================

 The **`Element.localName`** read-only property returns the
 local part of the qualified name of an element.

Value
-----

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

Examples
--------

 (Must be served with XML content type, such as `text/xml` or
 `application/xhtml+xml`.)


```xml
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <script type="application/javascript"><![CDATA[
 function test() {
 const text = document.getElementById('text');
 const circle = document.getElementById('circle');

 text.value = "<svg:circle> has:\n" +
 "localName = '" + circle.localName + "'\n" +
 "namespaceURI = '" + circle.namespaceURI + "'";
 }
 ]]></script>
</head>
<body onload="test()">
  <svg:svg version="1.1"
 width="100px" height="100px"
 viewBox="0 0 100 100">
    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
  </svg:svg>
  <textarea id="text" rows="4" cols="55"/>
</body>
</html>
```

Notes
-----

 The local name of a node is that part of the node's qualified name that comes after the
 colon. Qualified names are typically used in XML as part of the namespace(s) of the
 particular XML documents. For example, in the qualified name
 `ecomm:partners`, `partners` is the local name and
 `ecomm` is the prefix:


```xml
<ecomm:business id="soda\_shop" type="brick\_n\_mortar" xmlns:ecomm="http://example.com/ecomm">
  <ecomm:partners>
    <ecomm:partner id="1001">Tony's Syrup Warehouse
    </ecomm:partner>
  </ecomm:partner>
</ecomm:business>
```


**Note:** While the property returns the case of the internal DOM storage, which is lower case, note that `tagName` property returns upper case for HTML elements in HTML DOMs.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-localname① |

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

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

See also
--------

* `Element.namespaceURI`
* `Element.prefix`
* `Attr.localName`
Element: beforematch event
==========================

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

An element receives a **`beforematch`** event when it is in the *hidden until found* state and the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation.

Syntax
------

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


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

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

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

A generic `Event`.

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

The HTML `hidden` attribute accepts a value `until-found`: when this value is specified, the element is hidden but its content will be accessible to the browser's "find in page" feature or to fragment navigation. When these features cause a scroll to an element in a "hidden until found" subtree, the browser will:

* fire a `beforematch` event on the hidden element
* remove the `hidden` attribute from the element
* scroll to the element
Examples
--------

### Using beforematch

In this example we have:

* Two `<div>` elements. The first is not hidden, while the second has `hidden="until-found"`and `id="until-found-box"` attributes.
* A link whose target is the `"until-found-box"` fragment.

We also have some JavaScript that listens for the `beforematch` event firing on the hidden until found element. The event handler changes the text content of the box.

#### HTML


```html
<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
```


```
<button id="reset">Reset</button>
```


#### CSS


```css
div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}
```


```
#until-found-box {
  scroll-margin-top: 200px;
}
```


#### JavaScript


```js
const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "I've been revealed!"),
);
```


```
document.querySelector("#reset").addEventListener("click", () => {
  document.location.hash = "";
  document.location.reload();
});
```


#### Result

Clicking the "Go to hidden content" button navigates to the hidden-until-found element. The `beforematch` event fires, the text content is updated, and then the element's content is displayed.

To run the example again, click "Reload".

If your browser does not support the `"until-found"` enumerated value of the `hidden` attribute, the second `<div>` will be hidden (as `hidden` was boolean prior to the addition of the `until-found` value).

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

| Specification |
| --- |
| HTML Standard # event-beforematch |

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

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

See also
--------

* The HTML `hidden` attribute
Element: scroll() method
========================

 The **`scroll()`** method of the `Element`
 interface scrolls the element to a particular set of coordinates inside a given
 element.

Syntax
------


```js
scroll(x-coord, y-coord)
scroll(options)
```

### Parameters

`x-coord`

 The pixel along the horizontal axis of the element that you want displayed in the
 upper left.


`y-coord`

 The pixel along the vertical axis of the element that you want displayed in the
 upper left.


- or -

`options`

A dictionary containing the following parameters:

`top`

Specifies the number of pixels along the Y axis to scroll the window or element.

`left`

Specifies the number of pixels along the X axis to scroll the window or element.

`behavior`

Determines whether scrolling is instant or animates smoothly. This option is a string which must take one of the following values:

* `smooth`: scrolling should animate smoothly
* `instant`: scrolling should happen instantly in a single jump
* `auto`: scroll behavior is determined by the computed value of `scroll-behavior`


### Return value

None (`undefined`).

Examples
--------


```js
// Put the 1000th vertical pixel at the top of the element
element.scroll(0, 1000);
```


Using `options`:


```js
element.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scroll |

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

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

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback

 The `Element` interface's
 **`scrollIntoView()`** method scrolls the element's ancestor
 containers such that the element on which `scrollIntoView()` is called is
 visible to the user.

Syntax
------


```js
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
```

### Parameters

`alignToTop` Optional

A boolean value:

* If `true`, the top of the element will be aligned to the top of the
 visible area of the scrollable ancestor. Corresponds to
 `scrollIntoViewOptions: {block: "start", inline: "nearest"}`. This is
 the default value.
* If `false`, the bottom of the element will be aligned to the bottom
 of the visible area of the scrollable ancestor. Corresponds to
 `scrollIntoViewOptions: {block: "end", inline: "nearest"}`.

`scrollIntoViewOptions` Optional

Experimental

An Object with the following properties:

`behavior` Optional

Determines whether scrolling is instant or animates smoothly. This option is a string which must take one of the following values:

* `smooth`: scrolling should animate smoothly
* `instant`: scrolling should happen instantly in a single jump
* `auto`: scroll behavior is determined by the computed value of `scroll-behavior`

`block` Optional

 Defines vertical alignment.
 One of `start`, `center`, `end`, or
 `nearest`. Defaults to `start`.


`inline` Optional

 Defines horizontal alignment.
 One of `start`, `center`, `end`, or
 `nearest`. Defaults to `nearest`.



### Return value

None (`undefined`).

Examples
--------


```js
const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
```

Notes
-----

 The element may not be scrolled completely to the top or bottom depending on the layout
 of other elements.

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollintoview |

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

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

See also
--------

* `Element.scrollIntoViewIfNeeded()` 
Non-standard
Element: ariaAutoComplete property
==================================

The **`ariaAutoComplete`** property of the `Element` interface reflects the value of the `aria-autocomplete` attribute, which indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.

Value
-----

A string with one of the following values:

`"inline"`

When a user is providing input, text suggesting one way to complete the provided input may be dynamically inserted after the caret.

`"list"`

When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed.

`"both"`

When a user is providing input, an element containing a collection of values that could complete the provided input may be displayed. If displayed, one value in the collection is automatically selected, and the text needed to complete the automatically selected value appears after the caret in the input.

`"none"`

When a user is providing input, there is no display of an automatic suggestion that attempts to predict how the user intends to complete the input.

Examples
--------

In this example, the `aria-autocomplete` attribute on the element with an ID of `animal` is set to "`inline`". Using `ariaAutoComplete` we update the value to "`list`", which is the expected value for a combobox that invokes a `listbox` popup.


```html
<div class="animals-combobox">
  <label for="animal">Animal</label>
  <input
 id="animal"
 type="text"
 role="combobox"
 aria-autocomplete="inline"
 aria-controls="animals-listbox"
 aria-expanded="false"
 aria-haspopup="listbox" />
  <ul id="animals-listbox" role="listbox" aria-label="Animals">
    <li id="animal-cat" role="option">Cat</li>
    <li id="animal-dog" role="option">Dog</li>
  </ul>
</div>
```



```js
let el = document.getElementById("animal");
console.log(el.ariaAutoComplete); // inline
el.ariaAutoComplete = "list";
console.log(el.ariaAutoComplete); // list
```

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

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaautocomplete |

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

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

The `touchend` event fires when one or more touch points are removed from the touch surface. Remember that it is possible to get a `touchcancel` event instead.

Syntax
------

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


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

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

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

A `TouchEvent`. Inherits from `Event`.

Event

UIEvent

TouchEventEvent properties
----------------

*This interface inherits properties from its parent, `UIEvent` and `Event`.*

`TouchEvent.altKey` Read only 

A Boolean value indicating whether or not the alt key was down when the touch event was fired.

`TouchEvent.changedTouches` Read only 

A `TouchList` of all the `Touch` objects representing individual points of contact whose states changed between the previous touch event and this one.

`TouchEvent.ctrlKey` Read only 

A Boolean value indicating whether or not the control key was down when the touch event was fired.

`TouchEvent.metaKey` Read only 

A Boolean value indicating whether or not the meta key was down when the touch event was fired.

`TouchEvent.shiftKey` Read only 

A Boolean value indicating whether or not the shift key was down when the touch event was fired.

`TouchEvent.targetTouches` Read only 

A `TouchList` of all the `Touch` objects that are both currently in contact with the touch surface **and** were also started on the same element that is the target of the event.

`TouchEvent.touches` Read only 

A `TouchList` of all the `Touch` objects representing all current points of contact with the surface, regardless of target or changed status.

`TouchEvent.rotation` 
Non-standard
 Read only 

Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: `0.0`.

`TouchEvent.scale` 
Non-standard
 Read only 

Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0`.

Examples
--------

Code samples for those events are available on the dedicated page: Touch events.

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

| Specification |
| --- |
| Touch Events # event-touchend |
| Touch Events # dom-globaleventhandlers-ontouchend |

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

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

See also
--------

* Touch events
Element: ariaColCount property
==============================

The **`ariaColCount`** property of the `Element` interface reflects the value of the `aria-colcount` attribute, which defines the number of columns in a table, grid, or treegrid.

Value
-----

A string.

Examples
--------

In this example the `aria-colcount` attribute on the element with an ID of `semantic-table` is set to "2". Using `ariaColCount` we update the value to "3".


```html
<table
 id="semantic-table"
 role="table"
 aria-label="Semantic Elements"
 aria-describedby="semantic\_elements\_table\_desc"
 aria-rowcount="100"
 aria-colcount="2">
  <caption id="semantic\_elements\_table\_desc">
    Semantic Elements to use instead of ARIA's roles
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA Role</th>
      <th role="columnheader" aria-sort="none" aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>
```



```js
let el = document.getElementById("semantic-table");
console.log(el.ariaColCount); // 2
el.ariaColCount = "3";
console.log(el.ariaColCount); // 3
```

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

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariacolcount |

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

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

* ARIA: table role
Element: ariaRowSpan property
=============================

The **`ariaRowSpan`** property of the `Element` interface reflects the value of the `aria-rowspan` attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

Value
-----

A string which contains an integer.

Examples
--------

In this example the `aria-rowspan` attribute on the element with an ID of `spanning-heading` is set to "3". Using `ariaRowSpan` we update the value to "2".


```html
<table>
  <tr>
    <th id="spanning-heading" rowspan="3" aria-rowspan="3">Spanning heading</th>
    <th>Heading</th>
  </tr>
  <tr>
    <td>One</td>
  </tr>
  <tr>
    <td>Two</td>
  </tr>
</table>
```



```js
let el = document.getElementById("spanning-heading");
console.log(el.ariaRowSpan);
el.ariaRowSpan = "2";
console.log(el.ariaRowSpan);
```

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

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariarowspan |

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

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

See also
--------

* ARIA: table role
Element: beforexrselect event
=============================

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

The **`beforexrselect`** event is fired before WebXR select events (`select`, `selectstart`, `selectend`) are dispatched. It can be used to suppress XR world input events while the user is interacting with a DOM overlay UI.

This event bubbles, is cancelable and is composed.

Syntax
------

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


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

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

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

An `XRSessionEvent`. Inherits from `Event`.

Event

XRSessionEventEvent properties
----------------

`session` Read only 

The `XRSession` to which the event refers.

Event availability
------------------

The **`beforexrselect`** event is a global event and available to the following interfaces:

* `Window`
* `Document`
* `HTMLElement`
* `SVGElement`
* `MathMLElement`
Examples
--------

To suppress WebXR select events (`select`, `selectstart`, `selectend`), an application can listen for the `beforexrselect` event. The event bubbles, so a call to `preventDefault()` on the DOM overlay element will prevent any WebXR select events within this container allowing interaction with the DOM element and avoiding duplicate event input to the XR world.


```js
document
  .getElementById("xr-overlay")
  .addEventListener("beforexrselect", (ev) => ev.preventDefault());
```

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

| Specification |
| --- |
| WebXR DOM Overlays Module # onbeforexrselect |

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

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

See also
--------

* `select` event
* `selectstart` event
* `selectend` event
Element: scrollLeft property
============================

 The **`Element.scrollLeft`** property gets or sets the number
 of pixels that an element's content is scrolled from its left edge.

 If the element's `direction` is `rtl` (right-to-left), then
 `scrollLeft` is `0` when the scrollbar is at its rightmost
 position (at the start of the scrolled content), and then increasingly negative as you
 scroll towards the end of the content.

It can be specified as any integer value. However:

* If the element can't be scrolled (e.g., it has no overflow), `scrollLeft`
 is set to `0`.
* If specified as a value less than `0` (greater than `0` for
 right-to-left elements), `scrollLeft` is set to `0`.
* If specified as a value greater than the maximum that the content can be scrolled,
 `scrollLeft` is set to the maximum.

**Warning:** On systems using display scaling, `scrollLeft` may give you a decimal
 value.


Value
-----

A number.

Examples
--------

### HTML


```html
<div id="container">
  <div id="content">Click the button to slide right!</div>
</div>

<button id="slide" type="button">Slide right</button>
```

### CSS


```css
#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}
```

### JavaScript


```js
const button = document.getElementById("slide");

button.onclick = () => {
  document.getElementById("container").scrollLeft += 20;
};
```

### Result

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollleft |

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

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

See also
--------

* MSDN's Measuring Element Dimension and Location
* `Element.scrollTop`
* `Element.scrollTo()`
Element: computedStyleMap() method
==================================

 The **`computedStyleMap()`** method of
 the `Element` interface returns a `StylePropertyMapReadOnly`
 interface which provides a read-only representation of a CSS declaration block that is
 an alternative to `CSSStyleDeclaration`.

Syntax
------


```js
computedStyleMap()
```

### Parameters

None.

### Return value

A `StylePropertyMapReadOnly` interface.

Examples
--------

 We start with some simple HTML: a paragraph with a link, and a definition list to which
 we will add all the CSS Property / Value pairs.


```html
<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>
```


We add a little bit of CSS


```css
a {
  --color: red;
  color: var(--color);
}
```


 We add JavaScript to grab our link and return back a definition list of all the CSS
 property values using `computedStyleMap().`


```js
// get the element
const myElement = document.querySelector("a");

// get the <dl> we'll be populating
const stylesList = document.querySelector("#regurgitation");

// Retrieve all computed styles with computedStyleMap()
const allComputedStyles = myElement.computedStyleMap();

// iterate through the map of all the properties and values, adding a <dt> and <dd> for each
for (const [prop, val] of allComputedStyles) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.appendChild(document.createTextNode(prop));
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  cssValue.appendChild(document.createTextNode(val));
  stylesList.appendChild(cssValue);
}
```


 In browsers that support `computedStyleMap()`,
 you'll see a list of all the CSS properties and values.
 In other browsers you'll just see a link.

 Did you realize how many default CSS properties a link had? Update the '`a`'
 to the '`p`', and you'll notice a difference in the `margin-top`
 and `margin-bottom` default computed values.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-element-computedstylemap |

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

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