recursal/MDN huggingface dataset:
Element: getElementsByTagNameNS() method
========================================

 The **`Element.getElementsByTagNameNS()`** method returns a
 live `HTMLCollection` of elements with the given tag name belonging to the
 given namespace. It is similar to `Document.getElementsByTagNameNS`, except
 that its search is restricted to descendants of the specified element.

Syntax
------


```js
getElementsByTagNameNS(namespaceURI, localName)
```

### Parameters

* `namespaceURI` is the namespace URI of elements to look for (see
 `Element.namespaceURI` and `Attr.namespaceURI`). For
 example, if you need to look for XHTML elements, use the XHTML namespace URI,
 `http://www.w3.org/1999/xhtml`.
* `localName` is either the local name of elements to look for or the
 special value `"*"`, which matches all elements (see
 `Element.localName` and `Attr.localName`).
### Return value

A live `HTMLCollection` of found elements in the order they appear in the tree.

Examples
--------


```js
// Check the alignment on a number of cells in a table in an XHTML document.
const table = document.getElementById("forecast-table");
const cells = table.getElementsByTagNameNS(
  "http://www.w3.org/1999/xhtml",
  "td",
);

for (const cell of cells) {
  const axis = cell.getAttribute("axis");
  if (axis === "year") {
    // Grab the data
  }
}
```

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

| Specification |
| --- |
| DOM Standard # dom-element-getelementsbytagnamens |

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

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

The **`ariaSort`** property of the `Element` interface reflects the value of the `aria-sort` attribute, which indicates if items in a table or grid are sorted in ascending or descending order.

Value
-----

A string with one of the following values:

`"ascending"`

Items are sorted in ascending order by this column.

`"descending"`

Items are sorted in descending order by this column.

`"none"`

There is no defined sort applied to the column.

`"other"`

A sort algorithm other than ascending or descending has been applied.

Examples
--------

In this example the `aria-sort` attribute on the element with an ID of `role-heading` is set to "none". Using `ariaSort` we update the value to "ascending".


```html
<table
 id="semantic-table"
 role="table"
 aria-label="Semantic Elements"
 aria-describedby="semantic\_elements\_table\_desc"
 aria-rowcount="100">
  <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"
 id="role-heading"
 aria-sort="none"
 aria-rowindex="1"
 aria-colindex="1">
        ARIA Role
      </th>
      <th
 role="columnheader"
 id="element-heading"
 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("role-heading");
console.log(el.ariaSort); // none
el.ariaSort = "ascending";
console.log(el.ariaSort); // ascending
```

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

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

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

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

See also
--------

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

The **`ariaBusy`** property of the `Element` interface reflects the value of the `aria-busy` attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user.

Value
-----

A string with one of the following values:

`"true"`

The element is being updated.

`"false"`

There are no expected updates for the element.

Examples
--------

In this example the `aria-busy` attribute on the element with an ID of `clock` is set to "false". Using `ariaBusy` we update the value to "true".


```html
<div
 id="clock"
 role="timer"
 aria-live="polite"
 aria-atomic="true"
 aria-busy="false"></div>
```



```js
let el = document.getElementById("clock");
console.log(el.ariaBusy); // false
el.ariaBusy = "true";
console.log(el.ariaBusy); // true
```

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

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

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

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

 The **`releasePointerCapture()`** method of the
 `Element` interface releases (stops) *pointer capture* that was
 previously set for a specific (`PointerEvent`) *pointer*.

 See the `Element.setPointerCapture()` method
 for a description of *pointer capture* and how to set it for a particular
 element.

Syntax
------


```js
releasePointerCapture(pointerId)
```

### Parameters

`pointerId`

 The `pointerId` of a
 `PointerEvent` object.


### Return value

None (`undefined`).

### Exceptions

`NotFoundError` `DOMException`

Thrown if `pointerId` does not match any active pointer.

Examples
--------

 This example sets pointer capture on a `<div>` when you press down on
 it. This lets you slide the element horizontally, even when your pointer moves outside of
 its boundaries.

### HTML


```html
<div id="slider">SLIDE ME</div>
```

### CSS


```css
div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}
```

### JavaScript


```js
function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

const slider = document.getElementById("slider");

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;
```

### Result

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

| Specification |
| --- |
| Pointer Events # dom-element-releasepointercapture |

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

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

See also
--------

* `Element.hasPointerCapture()`
* `Element.setPointerCapture()`
* `Pointer Events`
Element: compositionstart event
===============================

The **`compositionstart`** event is fired when a text composition system such as an input method editor starts a new composition session.

For example, this event could be fired after a user starts entering a Chinese character using a Pinyin IME.

Syntax
------

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


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

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

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

A `CompositionEvent`. Inherits from `UIEvent` and `Event`.

Event

UIEvent

CompositionEventEvent properties
----------------

*This interface also inherits properties of its parent, `UIEvent`, and its ancestor — `Event`.*

`CompositionEvent.data` Read only 

Returns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the `CompositionEvent` object.

`CompositionEvent.locale` Read only  
Deprecated

Returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with IME).

Examples
--------


```js
const inputElement = document.querySelector('input[type="text"]');

inputElement.addEventListener("compositionstart", (event) => {
  console.log(`generated characters were: ${event.data}`);
});
```

### Live example

#### HTML


```html
<div class="control">
  <label for="example">
    First select textbox, then to open IME:
    <ul>
      <li>on macOS type <kbd>option</kbd> + <kbd>`</kbd></li>
      <li>on Windows type <kbd>windows</kbd> + <kbd>.</kbd></li>
    </ul>
  </label>
  <input type="text" id="example" name="example" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="25"
 id="eventLog"></textarea>
  <button class="clear-log">Clear</button>
</div>
```


```
body {
  padding: 0.2rem;
  display: grid;
  grid-template-areas: "control log";
}

.control {
  grid-area: control;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

input[type="text"] {
  margin: 0.5rem 0;
}

kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```


#### JavaScript


```js
const inputElement = document.querySelector('input[type="text"]');
const log = document.querySelector(".event-log-contents");
const clearLog = document.querySelector(".clear-log");

clearLog.addEventListener("click", () => {
  log.textContent = "";
});

function handleEvent(event) {
  log.textContent += `${event.type}: ${event.data}\n`;
}

inputElement.addEventListener("compositionstart", handleEvent);
inputElement.addEventListener("compositionupdate", handleEvent);
inputElement.addEventListener("compositionend", handleEvent);
```


#### Result

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

| Specification |
| --- |
| UI Events # event-type-compositionstart |

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

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

See also
--------

* Related events: `compositionend`, `compositionupdate`.
Element: id property
====================

 The **`id`** property of the `Element` interface
 represents the element's identifier, reflecting the
 **`id`**
 global attribute.

If the `id` value is not the empty string, it must be unique in a document.

 The `id` is often used with `getElementById()` to retrieve a particular element. Another common case is to use an
 element's ID as a selector when styling
 the document with CSS.


**Note:** Identifiers are case-sensitive, but you should avoid creating
 IDs that differ only in the capitalization.


Value
-----

A string.

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

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

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

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

See also
--------

* The DOM **id**
 global attribute.
Element: namespaceURI property
==============================

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

Value
-----

A string, or `null`.

Examples
--------

In this snippet, an element is being examined for its `localName` and its `namespaceURI`. If the `namespaceURI` returns the XUL namespace and the `localName` returns "browser", then the node is understood to be a XUL `<browser/>`.


```js
if (
  element.localName === "browser" &&
  element.namespaceURI ===
    "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
) {
  // this is a XUL browser
}
```

Notes
-----

This is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope. The namespace URI of a node is frozen at the node creation time.

The namespace URI for HTML elements in HTML documents is `http://www.w3.org/1999/xhtml` as in XHTML.

You can create an element with the specified `namespaceURI` using the `document.createElementNS()` method.

The DOM does not handle or enforce namespace validation per se. It is up to the DOM application to do any validation necessary. Also note that the namespace prefix, once it is associated with a particular element, cannot be changed.

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

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

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

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

See also
--------

* `Element.localName`
* `Element.prefix`
* `Attr.namespaceURI`
Element: nextElementSibling property
====================================

 The **`Element.nextElementSibling`** read-only
 property returns the element immediately following the specified one in its parent's
 children list, or `null` if the specified element is the last one in the list.

Value
-----

A `Element` object, or `null`.

Examples
--------


```html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script>
 let el = document.getElementById("div-01").nextElementSibling;
 console.log("Siblings of div-01:");
 while (el) {
 console.log(el.nodeName);
 el = el.nextElementSibling;
 }
</script>
```


This example outputs the following into the console when it loads:
```

Siblings of div-01:
DIV
SCRIPT
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-nextelementsibling② |

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

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

See also
--------

* `Element.previousElementSibling`
Element: gestureend event
=========================

**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 **`gestureend`** event is fired when there are no longer multiple fingers contacting the touch surface, thus ending the gesture.

It is a proprietary event specific to WebKit.

Syntax
------

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


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

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

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

A `GestureEvent`. Inherits from `Event`.

Event properties
----------------

*This interface also inherits properties of its parents, `UIEvent` and `Event`.*

`GestureEvent.rotation` 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`.

`GestureEvent.scale` 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 gesture. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0`.

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

Not part of any specification.

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

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

See also
--------

* GestureEventClassReference at the Safari Developer Library
Element: clientTop property
===========================

 The width of the top border of an element in pixels. It is a read-only, integer
 property of element.

 As it happens, all that lies between the two locations (`offsetTop` and
 client area top) is the element's border. This is because the `offsetTop`
 indicates the location of the top of the border (not the margin) while the client area
 starts immediately below the border, (client area includes padding.) Therefore, the
 **clientTop** value will always equal the integer portion of the
 `.getComputedStyle()` value for "border-top-width". (Actually might be
 Math.round(parseFloat()).) For example, if the computed "border-top-width" is zero,
 then **`clientTop`** is also zero.


**Note:** This property will round the value to an integer. If you
 need a fractional value, use `element.getBoundingClientRect()`.


Value
-----

A number.

Examples
--------

In the following example, the client area has a white background and a 24px black `border-top`. The `clientTop` value is the distance from where the margin (yellow) area ends and the padding and content areas (white) begin: that is, 24px.

### HTML


```html
<div id="container">
  <div id="contained">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
  </div>
</div>
```

### CSS


```css
#container {
  margin: 3rem;
  background-color: rgb(255 255 204);
  border: 4px dashed black;
}

#contained {
  margin: 1rem;
  border-top: 24px black solid;
  padding: 0px 28px;
  overflow: auto;
  background-color: white;
}
```

### Result

Notes
-----

`clientTop` was first introduced in the MS IE DHTML object model.

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

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

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

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

 The **`removeAttributeNode()`** method of the
 `Element` interface removes the specified attribute from the element.

Syntax
------


```js
removeAttributeNode(attributeNode)
```

### Parameters

`attributeNode`

The attribute node to remove from the element.

### Return value

The attribute node that was removed.

### Exceptions

`NotFoundError` `DOMException`

Thrown when the element's attribute list does not contain the attribute node.

Examples
--------


```js
// Given: <div id="top" align="center" />
const d = document.getElementById("top");
const d_align = d.getAttributeNode("align");
d.removeAttributeNode(d_align);
// align is now removed: <div id="top" />
```

Notes
-----

 If the removed attribute has a default value, it is immediately replaced. The replacing
 attribute has the same namespace URI and local name, as well as the original prefix,
 when applicable.

 There is no `removeAttributeNodeNS` method; the
 `removeAttributeNode` method can remove both namespaced attributes and
 non-namespaced attributes.

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

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

| Specification |
| --- |
| DOM Standard # dom-element-removeattributenode |

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

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

 The **`hasPointerCapture()`** method of the
 `Element` interface checks whether the element on which it is invoked has
 pointer capture for the pointer identified by the given pointer ID.

Syntax
------


```js
hasPointerCapture(pointerId)
```

### Parameters

`pointerId`

 The `pointerId` of a
 `PointerEvent` object.


### Return value

A boolean value — `true` if the element does have pointer capture for the pointer identified by the given pointer ID, `false` if it doesn't.

Examples
--------


```html
<html lang="en">
  <script>
 function downHandler(ev) {
 const el = document.getElementById("target");
 // Element 'target' will receive/capture further events
 el.setPointerCapture(ev.pointerId);

 // …

 // Check whether element still has pointer capture
 let pointerCap = el.hasPointerCapture(ev.pointerId);
 if (pointerCap) {
 // We've still got pointer capture
 } else {
 // oops, we've lost pointer capture!
 }
 }

 function init() {
 const el = document.getElementById("target");
 el.onpointerdown = downHandler;
 }
 </script>
  <body onload="init();">
    <div id="target">Touch this element with a pointer.</div>
  </body>
</html>
```

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

| Specification |
| --- |
| Pointer Events # dom-element-haspointercapture |

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

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

See also
--------

* `Element.setPointerCapture()`
* `Element.releasePointerCapture()`
* `Pointer Events`
Element: slot property
======================

 The **`slot`** property of the `Element` interface
 returns the name of the shadow DOM slot the element is inserted in.

A slot is a placeholder inside a web component that users can fill with their own markup (see Using templates and slots for more information).

Value
-----

A string.

Examples
--------

 In our simple-template example (see it live), we create a trivial custom element example called
 `<my-paragraph>` in which a shadow root is attached and then populated
 using the contents of a template that contains a slot named `my-text`.

 When `<my-paragraph>` is used in the document, the slot is populated
 by a slottable element by including it inside the element with a
 `slot` attribute
 with the value `my-text`. Here is one such example:


```html
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>
```


 In our JavaScript file we get a reference to the `<span>` shown above,
 then log a reference to the name of the corresponding `<slot>` element.


```js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.slot); // logs 'my-text'
```

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

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

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

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