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

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

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

* Learn more
* See full compatibility
* Report feedback

 The `Element.shadowRoot` read-only property
 represents the shadow root hosted by the element.

Use `Element.attachShadow()` to add a shadow root to an existing element.

Value
-----

 A `ShadowRoot` object instance, or `null` if the associated
 shadow root was attached with its `mode` set to
 `closed`. (See `Element.attachShadow()` for further details).

Examples
--------

 The following snippets are taken from our life-cycle-callbacks
 example (see it live also), which creates an element that displays a square of a size and color
 specified in the element's attributes.

 Inside the `<custom-square>` element's class definition we include
 some life cycle callbacks that make a call to an external function,
 `updateStyle()`, which actually applies the size and color to the element.
 You'll see that we are passing it `this` (the custom element itself) as a
 parameter.


```js
class Square extends HTMLElement {
  connectedCallback() {
    console.log("Custom square element added to page.");
    updateStyle(this);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log("Custom square element attributes changed.");
    updateStyle(this);
  }
}
```


 In the `updateStyle()` function itself, we get a reference to the shadow DOM
 using `Element.shadowRoot`. From here we use standard DOM traversal
 techniques to find the `<style>` element inside the shadow DOM and then
 update the CSS found inside it:


```js
function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = Array.from(shadow.childNodes);

  childNodes.forEach((childNode) => {
    if (childNode.nodeName === "STYLE") {
      childNode.textContent = `
 div {
 width: ${elem.getAttribute("l")}px;
 height: ${elem.getAttribute("l")}px;
 background-color: ${elem.getAttribute("c")};
 }
 `;
    }
  });
}
```

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

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

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

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

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

Differences from `Node.appendChild()`:

* `Element.append()` allows you to also append string
 objects, whereas `Node.appendChild()` only accepts `Node`
 objects.
* `Element.append()` has no return value, whereas
 `Node.appendChild()` returns the appended `Node` object.
* `Element.append()` can append several nodes and strings, whereas
 `Node.appendChild()` can only append one node.
Syntax
------


```js
append(param1)
append(param1, param2)
append(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
--------

### Appending an element


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

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

### Appending text


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

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

### Appending an element and text


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

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

### The append method is unscopable

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


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

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

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

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

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

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

See also
--------

* `Element.prepend()`
* `Node.appendChild()`
* `Element.after()`
* `Element.insertAdjacentElement()`
* `NodeList`
Element: className property
===========================

 The **`className`** property of the
 `Element` interface gets and sets the value of the `class` attribute
 of the specified element.

Value
-----

A string variable representing the class or space-separated classes of the current element.

Examples
--------


```js
const el = document.getElementById("item");
el.className = el.className === "active" ? "inactive" : "active";
```

Notes
-----

 The name `className` is used for this property instead of `class`
 because of conflicts with the "class" keyword in many languages which are used to
 manipulate the DOM.

`className` can also be an instance of `SVGAnimatedString` if
 the `element` is an `SVGElement`. It is better to get/set the
 `className` of an element using `Element.getAttribute` and
 `Element.setAttribute` if you are dealing with SVG elements. However, take
 into account that `Element.getAttribute` returns
 `null`
 instead of `""` if the `element` has an empty `class` attribute.


```js
elm.setAttribute("class", elm.getAttribute("class"));
```


**Note:** The `class` is an **HTML Attribute**, while the
 `className` is a **DOM Property**.


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

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

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

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

See also
--------

* `element.classList`
Element: ariaValueText property
===============================

The **`ariaValueText`** property of the `Element` interface reflects the value of the `aria-valuetext` attribute, which defines the human-readable text alternative of aria-valuenow for a range widget.

Value
-----

A string.

Examples
--------

In this example the `aria-valuetext` attribute on the element with an ID of `slider` is set to "Sunday" to give a human-readable value for the range. Using `ariaValueText` we update the value to "Monday".


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



```js
let el = document.getElementById("slider");
console.log(el.ariaValueText); // Sunday
el.ariaValueText = "Monday";
console.log(el.ariaValueText); // Monday
```

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

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

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

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

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

The **`elementTiming`** property of the `Element` interface identifies elements for observation in the `PerformanceElementTiming` API. The `elementTiming` property reflects the value of the `elementtiming` attribute.

Value
-----

A string.

Examples
--------

### Logging the value of `elementTiming`

In this example, adding the `elementtiming` attribute to the `<img>` element sets the image to be observed.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```


You can get the string value of the `elementtiming` HTML attribute by calling `el.elementTiming`.


```js
const el = document.getElementById("myImage");
console.log(el.elementTiming); // "big-image"
```


For a more complete example on how to use the Element Timing API, see `PerformanceElementTiming`.

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

| Specification |
| --- |
| Element Timing API # dom-element-elementtiming |

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

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

See also
--------

* `PerformanceElementTiming`
* `elementtiming` HTML attribute
Element: ariaPlaceholder property
=================================

The **`ariaPlaceholder`** property of the `Element` interface reflects the value of the `aria-placeholder` attribute, which defines a short hint intended to aid the user with data entry when the control has no value.

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

Examples
--------

In this example the `aria-placeholder` attribute on the element with an ID of `txtBoxInput` has been set to a string. Using `ariaPlaceholder` we update the string to another value.


```html
<div id="txtboxLabel">Enter your five-digit zipcode</div>
<div
 role="textbox"
 id="txtBoxInput"
 contenteditable="true"
 aria-placeholder="5-digit zipcode"
 aria-labelledby="txtboxLabel"></div>
```



```js
let el = document.getElementById("txtBoxInput");
console.log(el.ariaPlaceholder); // "5-digit zipcode"
el.ariaPlaceholder = "12345";
console.log(el.ariaPlaceholder); // "12345"
```

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

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

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

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

See also
--------

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

The **`insertAdjacentText()`** method of the `Element` interface, given a relative position and a string, inserts a new text node at the given position relative to the element it is called from.

Syntax
------


```js
insertAdjacentText(where, data)
```

### Parameters

`where`

A string representing the position relative to the element the method is called from; must be one of the following strings:

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

`data`

A string from which to create a new text node to insert at the given position `where` relative to the element the method is called from.

### Return value

None (`undefined`).

### Exceptions

`SyntaxError` `DOMException`

Thrown if `where` is not a recognized value.

### 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", () => {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", () => {
  para.insertAdjacentText("beforeend", textInput.value);
});
```


 Have a look at our insertAdjacentText.html
 demo on GitHub (see the source code too.) Here we have a simple paragraph. You can enter some text into the form
 element, then press the *Insert before* and *Insert after* buttons to
 insert it before or after the existing paragraph text using
 `insertAdjacentText()`. Note that the existing text node is not added to —
 further text nodes are created containing the new additions.

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

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

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

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

See also
--------

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentHTML()`
Element: getAttribute() method
==============================

 The **`getAttribute()`** method of the
 `Element` interface returns the value of a specified attribute on the
 element.

 If the given attribute does not exist, the value returned will
 either be `null` or `""` (the empty string); see Non-existing attributes for details.

Syntax
------


```js
getAttribute(attributeName)
```

### Parameters

* `attributeName` is the name of the attribute whose value you want to get.
### Return value

A string containing the value of `attributeName`.

Examples
--------


```html
<!-- example div in an HTML DOC -->
<div id="div1">Hi Champ!</div>
```



```js
// in a console
const div1 = document.getElementById("div1");
//=> <div id="div1">Hi Champ!</div>

const exampleAttr = div1.getAttribute("id");
//=> "div1"

const align = div1.getAttribute("align");
//=> null
```

Description
-----------

### Lower casing

 When called on an HTML element in a DOM flagged as an HTML document,
 `getAttribute()` lower-cases its argument before proceeding.

### Non-existing attributes

All modern web browsers return `null` when the specified attribute does not exist on the specified element.

### Retrieving nonce values

 For security reasons, CSP nonces from non-script
 sources, such as CSS selectors, and `.getAttribute("nonce")` calls are
 hidden.


```js
let nonce = script.getAttribute("nonce");
// returns empty string
```


 Instead of retrieving the nonce from the content attribute, use the
 `nonce` property:


```js
let nonce = script.nonce;
```

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

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

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

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

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

The **`ariaRowIndexText`** property of the `Element` interface reflects the value of the `aria-rowindextext` attribute, which defines a human readable text alternative of aria-rowindex.

Value
-----

A string.

Examples
--------

In this example the `aria-rowindextext` attribute on the element with an ID of `role-heading` is set to "Heading row". Using `ariaRowIndexText` we update the value to "Updated heading row".


```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-rowindextext="Heading row">
        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.ariaRowIndexText); // "Heading row"
el.ariaRowIndexText = "Updated heading row";
console.log(el.ariaRowIndexText); // "Updated heading row"
```

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

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

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

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

See also
--------

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

The **`securitypolicyviolation`** event is fired when a Content Security Policy is violated.

 The event is fired on the element that violates the policy and bubbles.
 It is normally handled by an event handler on the `Window` or `Document` object.

The handler can be assigned using the `onsecuritypolicyviolation` property or using `EventTarget.addEventListener()`.

**Note:** You must add the handler for this event to a top level object (i.e. `Window` or `Document`).
 While the property exists in HTML elements, you can't assign a handler to the property until the elements have been loaded, by which time this event will already have fired.


Syntax
------

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


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

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

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

A `SecurityPolicyViolationEvent`. Inherits from `Event`.

Event

SecurityPolicyViolationEventExamples
--------

The code below shows how you might add an event handler function using the `onsecuritypolicyviolation` global event handler property or `addEventListener()` on the top level `Window` (you could use exactly the same approach on `Document`).


```js
window.onsecuritypolicyviolation = (e) => {
  // Handle SecurityPolicyViolationEvent e here
};

window.addEventListener("securitypolicyviolation", (e) => {
  // Handle SecurityPolicyViolationEvent e here
});
```

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

| Specification |
| --- |
| Content Security Policy Level 3 # eventdef-globaleventhandlers-securitypolicyviolation |
| HTML Standard # handler-onsecuritypolicyviolation |

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

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

See also
--------

* The `securitypolicyviolation` event of the `Document` interface
* The `securitypolicyviolation` event of the `WorkerGlobalScope` interface
* HTTP > Content Security Policy
Element: ariaPosInSet property
==============================

The **`ariaPosInSet`** property of the `Element` interface reflects the value of the `aria-posinset` attribute, which defines an element's number or position in the current set of listitems or treeitems.

Value
-----

A string containing an integer.

Examples
--------

In this example the `aria-posinset` attribute on the element with an ID of `article2` is set to "2". Using `ariaPosInSet` we update the value to "3".


```html
<article id="article1" aria-posinset="1">…</article>
<article id="article2" aria-posinset="2">…</article>
```



```js
let el = document.getElementById("article2");
console.log(el.ariaPosInSet); // "2"
el.ariaPosInSet = "3";
console.log(el.ariaPosInSet); // "3"
```

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

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

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

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

 The **`scroll`** event fires when an element has been scrolled.
 To detect when scrolling has completed, see the `Element: scrollend event`.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

 The following examples show how to use the `scroll` event with an event listener and with the `onscroll` event handler property.
 The `setTimeout()` method is used to throttle the event handler because `scroll` events can fire at a high rate.
 For additional examples that use `requestAnimationFrame()`, see the `Document: scroll event` page.

### Using `scroll` with an event listener

The following example shows how to use the `scroll` event to detect when the user is scrolling inside an element:


```html
<div
 id="scroll-box"
 style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>
```



```js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.innerHTML = "Scroll event fired!";
  setTimeout(() => {
    output.innerHTML = "Waiting on scroll events...";
  }, 1000);
});
```

### Using `onscroll` event handler property

The following example shows how to use the `onscroll` event handler property to detect when the user is scrolling:


```html
<div
 id="scroll-box"
 style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>
```



```js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.innerHTML = "Element scroll event fired!";
  setTimeout(() => {
    output.innerHTML = "Waiting on scroll events...";
  }, 1000);
};
```

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

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

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

See also
--------

* Element `scrollend` event
* Document `scroll` event
* Document `scrollend` event
Element: removeAttribute() method
=================================

 The `Element` method
 **`removeAttribute()`** removes the attribute with the
 specified name from the element.

Syntax
------


```js
removeAttribute(attrName)
```

### Parameters

`attrName`

 A string specifying the name of the attribute to remove from the
 element. If the specified attribute does not exist, `removeAttribute()`
 returns without generating an error.


### Return value

None (`undefined`).

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

 You should use `removeAttribute()` instead of setting the attribute value to
 `null` either directly or using `setAttribute()`. Many attributes will not behave as expected if you set them to
 `null`.

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

Examples
--------


```js
// Given: <div id="div1" disabled width="200px">
document.getElementById("div1").removeAttribute("disabled");
// Now: <div id="div1" width="200px">
```

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

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

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

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