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

The **`ariaValueMin`** property of the `Element` interface reflects the value of the `aria-valuemin` attribute, which defines the minimum allowed value for a range widget.

Value
-----

A string which contains a number.

Examples
--------

In this example the `aria-valuemin` attribute on the element with an ID of `slider` is set to "1". Using `ariaValueMin` we update the value to "2".


```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.ariaValueMin); // 1
el.ariaValueMin = "2";
console.log(el.ariaValueMin); // 2
```

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

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

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

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

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

Syntax
------


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

### Parameters

* `x-coord` is the pixel along the horizontal axis of the
 element that you want displayed in the upper left.
* `y-coord` is 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
element.scrollTo(0, 1000);
```


Using `options`:


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

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

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

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

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

See also
--------

* `Element.scrollTop`, `Element.scrollLeft`
* `Window.scrollTo()`
Element: setHTML() method
=========================

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

 The **`setHTML()`** method of the `Element` interface is used to parse and sanitize a string of HTML and then insert it into the DOM as a subtree of the element.
 It should be used instead of `Element.innerHTML` for inserting untrusted strings of HTML into an element.

 The parsing process drops any elements in the HTML string that are invalid in the context of the current element, while sanitizing removes any unsafe or otherwise unwanted elements, attributes or comments.
 The default `Sanitizer()` configuration strips out XSS-relevant input by default, including `<script>` tags, custom elements, and comments.
 The sanitizer configuration may be customized using `Sanitizer()` constructor options.

Syntax
------


```js
setHTML(input, options)
```

### Parameters

`input`

A string defining HTML to be sanitized.

`options` Optional

An options object with the following optional parameters:

`sanitizer`

 A `Sanitizer` object which defines what elements of the input will be sanitized.
 If not specified, the default `Sanitizer` object is used.



### Return value

None (`undefined`).

### Exceptions

None.

Examples
--------

The code below demonstrates how to sanitize a string of HTML and insert it into the `Element` with an id of `target`.


```js
const unsanitized_string = "abc <script>alert(1)<" + "/script> def"; // Unsanitized string of HTML
const sanitizer1 = new Sanitizer(); // Default sanitizer;

// Get the Element with id "target" and set it with the sanitized string.
document
  .getElementById("target")
  .setHTML(unsanitized_string, { sanitizer: sanitizer1 });

// Result (as a string): "abc def"
```


**Note:** This example uses the default sanitizer.
 The `Sanitizer` constructor is used to configure sanitizer options.


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

| Specification |
| --- |
| HTML Sanitizer API # dom-element-sethtml |

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

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

 The **`insertAdjacentElement()`** method of the
 `Element` interface inserts a given element node at a given position
 relative to the element it is invoked upon.

Syntax
------


```js
insertAdjacentElement(position, element)
```

### Parameters

`position`

 A string representing the position relative to the
 `targetElement`; must match (case-insensitively) one of the following
 strings:


* `'beforebegin'`: Before the
 `targetElement` itself.
* `'afterbegin'`: Just inside the
 `targetElement`, before its first child.
* `'beforeend'`: Just inside the
 `targetElement`, after its last child.
* `'afterend'`: After the
 `targetElement` itself.

`element`

The element to be inserted into the tree.

### Return value

The element that was inserted, or `null`, if the insertion failed.

### Exceptions

* `SyntaxError` `DOMException`
    + Thrown if the `position` specified is not a recognized value.
* `TypeError`
    + Thrown if the `element` specified is not a valid element.
### Visualization of position names


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```


**Note:** The `beforebegin` and
 `afterend` positions work only if the node is in a tree and has an element
 parent.


Examples
--------


```js
beforeBtn.addEventListener("click", () => {
  const tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("beforebegin", tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener("click", () => {
  const tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("afterend", tempDiv);
  }
  setListener(tempDiv);
});
```


 Have a look at our insertAdjacentElement.html
 demo on GitHub (see the source code too.) Here, we have a sequence of `<div>` elements inside a
 container. When one is clicked, it becomes selected and you can then press the
 *Insert before* and *Insert after* buttons to insert new divs before or
 after the selected element using `insertAdjacentElement()`.

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

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

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

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

See also
--------

* `Element.insertAdjacentHTML()`
* `Element.insertAdjacentText()`
* `Node.insertBefore()` (similar to `beforebegin`, with
 different arguments)
* `Node.appendChild()` (same effect as `beforeend`)
Element: fullscreenerror event
==============================

The `fullscreenerror` event is fired when the browser cannot switch to fullscreen mode.

As with the `fullscreenchange` event, two `fullscreenerror` events are fired; the first is sent to the `Element` which failed to change modes, and the second is sent to the `Document` which owns that element.

For some reasons that switching into fullscreen mode might fail, see the guide to the Fullscreen API.

This event is not cancelable.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------


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

function handleError(event) {
  console.error("an error occurred changing into fullscreen");
  console.log(event);
}

requestor.addEventListener("fullscreenerror", handleError);
// or
requestor.onfullscreenerror = handleError;

requestor.requestFullscreen();
```

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

| Specification |
| --- |
| Fullscreen API Standard # handler-document-onfullscreenerror |

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

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

See also
--------

* `fullscreenchange`
* Fullscreen API
* Guide to the Fullscreen API
Element: gesturestart 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 **`gesturestart`** event is fired when multiple fingers contact the touch surface, thus starting a new gesture. During the gesture, `gesturechange` events will be fired. When the gesture has ended, a `gestureend` event will be fired.

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

ongesturestart = (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: touchmove event
========================

The `touchmove` event is fired when one or more touch points are moved along the touch surface.

Syntax
------

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


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

ontouchmove = (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-touchmove |
| Touch Events # dom-globaleventhandlers-ontouchmove |

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

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

See also
--------

* Touch events
* `mousemove`
Element: focusin event
======================

The **`focusin`** event fires when an element has received focus, after the `focus` event. The two events differ in that `focusin` bubbles, while `focus` does not.

The opposite of `focusin` is the `focusout` event, which fires when the element has lost focus.

The `focusin` event is not cancelable.

Syntax
------

Use the event name in methods like `addEventListener()`.


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

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

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

Event

UIEvent

FocusEventEvent properties
----------------

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

`FocusEvent.relatedTarget`

The element losing focus, if any.

Examples
--------

### Live example

#### HTML


```html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>
```


#### JavaScript


```js
const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});
```


#### Result

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

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

**Note:** The *UI Events* specification describes an order of focus events that's different from what current browsers implement.

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

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

See also
--------

* Related events: `blur`, `focus`, `focusout`
* Focusing: focus/blur
Element: touchstart event
=========================

The `touchstart` event is fired when one or more touch points are placed on the touch surface.

Syntax
------

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


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

ontouchstart = (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-touchstart |
| Touch Events # dom-globaleventhandlers-ontouchstart |

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

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

See also
--------

* Touch events
Element: prefix property
========================

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

Value
-----

A string.

Examples
--------

The following logs "x" to the console.


```xml
<x:div onclick="console.log(this.prefix)"/>
```

Notes
-----

 This will only work when a namespace-aware parser is used, i.e. when a document is
 served with an XML MIME type. This will not work for HTML documents.

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

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

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

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

See also
--------

* `Element.namespaceURI`
* `Element.localName`
* `Attr.prefix`
Element: hasAttributeNS() method
================================

`hasAttributeNS` returns a boolean value indicating whether the current element has the specified attribute.

Syntax
------


```js
hasAttributeNS(namespace,localName)
```

### Parameters

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

A boolean.

Examples
--------


```js
// Check that the attribute exists before you set a value
const d = document.getElementById("div1");
if (
  d.hasAttributeNS("http://www.mozilla.org/ns/specialspace/", "special-align")
) {
  d.setAttribute("align", "center");
}
```

Notes
-----

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 # ref-for-dom-element-hasattributens① |

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

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

The **`ariaModal`** property of the `Element` interface reflects the value of the `aria-modal` attribute, which indicates whether an element is modal when displayed. Applying the `aria-modal` property to an element with `role="dialog"` replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert.

Value
-----

A string with one of the following values:

`"true"`

The element is modal.

`"false"`

The element is not modal.

Examples
--------

In this example the `aria-modal` attribute on the element with an ID of `address-modal` is set to "true" indicating that this is a modal dialog. Using `ariaModal` we update the value to "false".


```html
<div
 role="dialog"
 id="address-modal"
 aria-labelledby="dialog1Title"
 aria-describedby="dialog1Desc"
 aria-modal="true"></div>
```



```js
let el = document.getElementById("address-modal");
console.log(el.ariaModal); // "true"
el.ariaModal = "false";
console.log(el.ariaModal); // "false"
```

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

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

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

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

See also
--------

* ARIA: dialog role
Element: toggleAttribute() method
=================================

 The **`toggleAttribute()`** method of the
 `Element` interface toggles a Boolean attribute (removing it if it is
 present and adding it if it is not present) on the given element.

Syntax
------


```js
toggleAttribute(name)
toggleAttribute(name, force)
```

### Parameters

`name`

 A string specifying the name of the attribute to be toggled. The
 attribute name is automatically converted to all lower-case when
 `toggleAttribute()` is called on an HTML element in an HTML document.


`force` Optional

A boolean value which has the following effects:

* if not specified at all, the `toggleAttribute` method "toggles" the attribute named `name` — removing it if it is present, or else adding it if it is not present
* if true, the `toggleAttribute` method adds an attribute named `name`
* if false, the `toggleAttribute` method removes the attribute named `name`

### Return value

`true` if attribute **`name`** is eventually
 present, and `false` otherwise.

### Exceptions

`InvalidCharacterError` `DOMException`

 The specified attribute `name` contains one or more characters which
 are not valid in attribute names.


Examples
--------

 In the following example, `toggleAttribute()` is used to toggle the
 `disabled` attribute of an `<input>`.

### HTML


```html
<input value="text" /> <button>toggleAttribute("disabled")</button>
```

### JavaScript


```js
const button = document.querySelector("button");
const input = document.querySelector("input");

button.addEventListener("click", () => {
  input.toggleAttribute("disabled");
});
```

### Result

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 # ref-for-dom-element-toggleattribute① |

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

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