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

The **`ariaPressed`** property of the `Element` interface reflects the value of the `aria-pressed` attribute, which indicates the current "pressed" state of toggle buttons.

**Note:** Where possible use an HTML `<input>` element with `type="button"` or the `<button>` element as these have built in semantics and do not require ARIA attributes.

Value
-----

A string with one of the following values:

`"true"`

The element is pressed.

`"false"`

The element supports being pressed but is not currently pressed.

`"mixed"`

Indicates a mixed mode value for a tri-state toggle button.

`"undefined"`

The element does not support being pressed.

Examples
--------

In this example the `aria-pressed` attribute on the element with an ID of `saveChanges` is set to "false" indicating that this input is currently not pressed. Using `ariaPressed` we update the value to "true".


```html
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Save</div>
```



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

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

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

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

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

See also
--------

* ARIA: button role
Element: prepend() method
=========================

 The **`Element.prepend()`** method inserts a set of
 `Node` objects or string objects before the first child
 of the `Element`. String objects are inserted as
 equivalent `Text` nodes.

Syntax
------


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

### Parameters

`param1`, …, `paramN`

A set of `Node` or string objects to insert.

### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

Thrown when the node cannot be inserted at the specified point in the hierarchy.

Examples
--------

### Prepending an element


```js
let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]
```

### Prepending text


```js
let div = document.createElement("div");
div.append("Some text");
div.prepend("Headline: ");

console.log(div.textContent); // "Headline: Some text"
```

### Prepending an element and text


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]
```

### The prepend method is unscopable

 The `prepend()` method is not scoped into the `with` statement.
 See `Symbol.unscopables` for more information.


```js
let div = document.createElement("div");

with (div) {
  prepend("foo");
}
// ReferenceError: prepend is not defined
```

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

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

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

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

See also
--------

* `Element.append()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Element.before()`
* `Element.insertAdjacentElement()`
* `NodeList`
Element: getAttributeNodeNS() method
====================================

Returns the `Attr` node for the attribute with the given namespace and name.

Syntax
------


```js
getAttributeNodeNS(namespace, nodeName)
```

### Parameters

* `namespace` is a string specifying the namespace of the attribute.
* `nodeName` is a string specifying the name of the attribute.
### Return value

The node for specified attribute.

Notes
-----

`getAttributeNodeNS` is more specific than getAttributeNode in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is setAttributeNodeNS.

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-getattributenodens |

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

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

The **`ariaRowCount`** property of the `Element` interface reflects the value of the `aria-rowcount` attribute, which defines the total number of rows in a table, grid, or treegrid.

Value
-----

A string which contains an integer.

Examples
--------

In this example the `aria-rowcount` attribute on the element with an ID of `semantic-table` is set to "100", representing the total number of rows in the table, rather than the currently visible rows. Using `ariaRowCount` we update the value to "101".


```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" 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.ariaRowCount); // 100
el.ariaRowCount = "101";
console.log(el.ariaRowCount); // 101
```

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

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

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

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

* ARIA: table role
Element: matches() method
=========================

The **`matches()`** method of the `Element` interface tests whether the element would be selected by the specified CSS selector.

Syntax
------


```js
matches(selectors)
```

### Parameters

`selectors`

A string containing valid CSS selectors to test the `Element` against.

### Return value

`true` if the `Element` matches the `selectors`. Otherwise, `false`.

### Exceptions

`SyntaxError` `DOMException`

Thrown if `selectors` cannot be parsed as a CSS selector list.

Examples
--------

### HTML


```html
<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>
```

### JavaScript


```js
const birds = document.querySelectorAll("li");

for (const bird of birds) {
  if (bird.matches(".endangered")) {
    console.log(`The ${bird.textContent} is endangered!`);
  }
}
```


 This will log "The Philippine eagle is endangered!" to the console, since the element
 has indeed a `class` attribute with value `endangered`.

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

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

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

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

See also
--------

* CSS selectors module
* Other `Element` methods that take selectors: `Element.querySelector()`, `Element.querySelectorAll()`, and `element.closest()`.
Element: childElementCount property
===================================

 The **`Element.childElementCount`** read-only property
 returns the number of child elements of this element.

Examples
--------


```js
let sidebar = document.getElementById("sidebar");
if (sidebar.childElementCount > 0) {
  // Do something
}
```

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

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

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

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

See also
--------

* `Document.childElementCount`
* `DocumentFragment.childElementCount`
Element: setAttributeNode() method
==================================

 The **`setAttributeNode()`** method adds a new
 `Attr` node to the specified element.

Syntax
------


```js
setAttributeNode(attribute)
```

### Parameters

* `attribute` is the `Attr` node to set on the element.
### Return value

The replaced attribute node, if any, returned by this function.

Examples
--------

This example copies the `align` attribute from one element to another.

### HTML


```html
<div id="one" align="left">one</div>
<div id="two">two</div>
```

### JavaScript


```js
let d1 = document.getElementById("one");
let d2 = document.getElementById("two");
let a = d1.getAttributeNode("align");

d2.setAttributeNode(a.cloneNode(true));

// Returns: 'left'
alert(d2.attributes[1].value);
```

Notes
-----

 If the attribute named already exists on the element, that attribute is replaced with
 the new one and the replaced one is returned.

 This method is seldom used, with `Element.setAttribute()` usually being
 used to change element's 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-setattributenode |

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

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

See also
--------

* `Document.createAttribute()`
Element: setPointerCapture() method
===================================

 The **`setPointerCapture()`** method of the
 `Element` interface is used to designate a specific element as the
 *capture target* of future pointer events. Subsequent events for the pointer will
 be targeted at the capture element until capture is released (via
 `Element.releasePointerCapture()` or the
 `pointerup` event is fired).


**Note:** Pointer capture will cause the target to capture all subsequent pointer events as if they were occurring over the capturing target. Accordingly, `pointerover`, `pointerenter`, `pointerleave`, and `pointerout` **will not fire** as long as this capture is set.
 For touchscreen browsers that allow direct manipulation, an implicit pointer capture will be called on the element when a `pointerdown` event triggers. The capture can be released manually by calling `element.releasePointerCapture` on the target element, or it will be implicitly released after a `pointerup` or `pointercancel` event.


### Overview of pointer capture

*Pointer capture* allows events for a particular *pointer event*
 (`PointerEvent`) to be re-targeted to a particular element instead of the
 normal (or *hit test*) target at a pointer's location. This can be used to ensure
 that an element continues to receive pointer events even if the pointer device's contact
 moves off the element (such as by scrolling or panning).

Syntax
------


```js
setPointerCapture(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-setpointercapture |

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

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

See also
--------

* `Element.hasPointerCapture()`
* `Element.releasePointerCapture()`
* `Pointer Events`
Element: ariaReadOnly property
==============================

The **`ariaReadOnly`** property of the `Element` interface reflects the value of the `aria-readonly` attribute, which indicates that the element is not editable, but is otherwise operable.

**Note:** Where possible use an HTML `<input>` element with `type="text"` or a `<textarea>` as these have built in semantics and do not require ARIA attributes.

Value
-----

A string with one of the following values:

`"true"`

The user cannot change the value of the element.

`"false"`

The user can set the value of the element.

Examples
--------

In this example the `aria-readonly` attribute on the element with an ID of `txtBoxInput` is set to "true" indicating that this input is currently read only. Using `ariaReadOnly` we update the value to "false".


```html
<div id="txtboxMultilineLabel">Enter the tags for the article</div>
<div
 role="textbox"
 id="txtBoxInput"
 contenteditable="true"
 aria-multiline="true"
 aria-labelledby="txtboxMultilineLabel"
 aria-readonly="true"></div>
```



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

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

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

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

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

See also
--------

* ARIA: textbox role
Element: hasAttributes() method
===============================

 The **`hasAttributes()`** method of the `Element`
 interface returns a boolean value indicating whether the current element has any
 attributes or not.

Syntax
------


```js
hasAttributes()
```

### Parameters

None.

### Return value

A boolean.

Examples
--------


```js
let foo = document.getElementById("foo");
if (foo.hasAttributes()) {
  // Do something with 'foo.attributes'
}
```

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

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

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

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

See also
--------

* `Element.attributes`
* `Element.hasAttribute()`
Element: ariaCurrent property
=============================

The **`ariaCurrent`** property of the `Element` interface reflects the value of the `aria-current` attribute, which indicates the element that represents the current item within a container or set of related elements.

Value
-----

A string with one of the following values:

`"page"`

Represents the current page within a set of pages.

`"step"`

Represents the current step within a process.

`"location"`

Represents the current location, for example the current page in a breadcrumbs hierarchy.

`"date"`

Represents the current date within a collection of dates.

`"time"`

Represents the current time within a set of times.

`"true"`

Represents the current item within a set.

`"false"`

Does not represent the current item within a set.

Examples
--------

In this example a set of links are used for site navigation. The `aria-current` attribute indicates the current page. The value `page` is incorporated into the screen reader announcement. Using `ariaCurrent` we can update that value.


```html
<nav>
  <ul>
    <li><a id="link-home" href="/" aria-current="page">Home</a></li>
    <li><a href="/">About</a></li>
    <li><a href="/">Contact</a></li>
  </ul>
</nav>
```



```js
let el = document.getElementById("link-home");
console.log(el.ariaCurrent); // "page"
el.ariaCurrent = "tab";
console.log(el.ariaCurrent); // "tab"
```

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

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

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

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

See also
--------

* Using the aria-current attribute
Element: paste event
====================

The **`paste`** event of the Clipboard API is fired when the user has initiated a "paste" action through the browser's user interface.

If the cursor is in an editable context (for example, in a `<textarea>` or an element with `contenteditable` attribute set to `true`) then the default action is to insert the contents of the clipboard into the document at the cursor position.

A handler for this event can access the clipboard contents by calling `getData()` on the event's `clipboardData` property.

To override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using `event.preventDefault()`, and then insert its desired data manually.

It's possible to construct and dispatch a synthetic `paste` event, but this will not affect the document's contents.

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("paste", (event) => {});

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

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

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventExamples
--------

### Live example

#### HTML


```html
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
```


```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```


#### JavaScript


```js
const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  event.preventDefault();

  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});
```


#### Result

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

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

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

See also
--------

* Related events: `cut`, `copy`
* This event on `Document` targets: `paste`
* This event on `Window` targets: `paste`
Element: ariaValueMax property
==============================

The **`ariaValueMax`** property of the `Element` interface reflects the value of the `aria-valuemax` attribute, which defines the maximum allowed value for a range widget.

Value
-----

A string which contains a number.

Examples
--------

In this example the `aria-valuemax` attribute on the element with an ID of `slider` is set to "7". Using `ariaValueMax` we update the value to "6".


```html
<div
 role="slider"
 aria-valuenow="1"
 aria-valuemin="1"
 aria-valuemax="7"
 aria-valuetext="Sunday"></div>
```



```js
let el = document.getElementById("slider");
console.log(el.ariaValueMax); // 7
el.ariaValueMax = "6";
console.log(el.ariaValueMax); // 6
```

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

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

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

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

**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 **`DOMActivate`** event is fired at an element when it becomes active, such as when it is clicked on using the mouse or a keypress is used to navigate to it.

Syntax
------

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


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

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

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

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

Event

UIEvent

MouseEventEvent properties
----------------

[...]

Examples
--------


```html
<svg
 xmlns="http://www.w3.org/2000/svg"
 version="1.2"
 baseProfile="tiny"
 xmlns:ev="http://www.w3.org/2001/xml-events"
 width="6cm"
 height="5cm"
 viewBox="0 0 600 500">
  <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc>

  <!-- ECMAScript to change the radius -->
  <script type="application/ecmascript">
 <![CDATA[ function change(evt) { const circle = evt.target; const
 currentRadius = circle.getFloatTrait("r"); if (currentRadius === 100) {
 circle.setFloatTrait("r", currentRadius \* 2); } else {
 circle.setFloatTrait("r", currentRadius \* 0.5); } } ]]>
 </script>

  <!-- Act on each DOMActivate event -->
  <circle cx="300" cy="225" r="100" fill="red">
    <handler type="application/ecmascript" ev:event="DOMActivate">
      change(evt);
    </handler>
  </circle>

  <text
 x="300"
 y="480"
 font-family="Verdana"
 font-size="35"
 text-anchor="middle">
    Activate the circle to change its size
  </text>
</svg>
```

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

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

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

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

See also
--------

* `MouseEvent`
* `mousedown`
* `mouseup`
* `mousemove`