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

The **`Element.scrollTop`** property gets or sets the number of pixels that an element's content is scrolled vertically.

An element's `scrollTop` value is a measurement of the distance from the element's top to its topmost *visible* content. When an element's content does not generate a vertical scrollbar, then its `scrollTop` value is `0`.

`scrollTop` can be set to any integer value, with certain caveats:

* If the element can't be scrolled (e.g. it has no overflow or if the element has a property of "**non-scrollable**"), `scrollTop` is `0`.
* `scrollTop` doesn't respond to negative values; instead, it sets itself back to `0`.
* If set to a value greater than the maximum available for the element, `scrollTop` settles itself to the maximum value.

When `scrollTop` is used on the root element (the `<html>` element), the `scrollY` of the window is returned. This is a special case of `scrollTop`.

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

Value
-----

A number.

Examples
--------

### Scrolling an element

In this example, try scrolling the inner container with the dashed border, and see how the value of `scrollTop` changes.

#### HTML


```html
<div id="container">
  <div id="scroller">
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
      Orbiting this at a distance of roughly ninety-two million miles is an
      utterly insignificant little blue green planet whose ape-descended life
      forms are so amazingly primitive that they still think digital watches are
      a pretty neat idea.
    </p>
  </div>
</div>

<div id="output">scrollTop: 0</div>
```


#### CSS


```css
#scroller {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

#output {
  padding: 1rem 0;
}
```


#### JavaScript


```js
const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");

scroller.addEventListener("scroll", (event) => {
  output.textContent = `scrollTop: ${scroller.scrollTop}`;
});
```


#### Result

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

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

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

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

See also
--------

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

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

Syntax
------


```js
removeAttributeNS(namespace, attrName)
```

### Parameters

* `namespace` is a string that contains the namespace of the attribute.
* `attrName` is a string that names the attribute to be removed from the
 current node.
### Return value

None (`undefined`).

Examples
--------


```js
// Given:
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
// special:specialAlign="utterleft" width="200px" />
d = document.getElementById("div1");
d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
// Now: <div id="div1" width="200px" />
```

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-removeattributens① |

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

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

 In Firefox 3 and later, this method resets DOM values to
 their defaults.
Element: ariaChecked property
=============================

The **`ariaChecked`** property of the `Element` interface reflects the value of the `aria-checked` attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.

**Note:** Where possible use an HTML `<input>` element with `type="checkbox"` as this element has built in semantics and does not require ARIA attributes.

Value
-----

A string with one of the following values:

`"true"`

The element is checked.

`"mixed"`

Indicates a mixed mode value for a tri-state checkbox or menuitemcheckbox.

`"false"`

The element supports being checked but is not currently checked.

`"undefined"`

The element does not support being checked.

Examples
--------

In this example the `aria-checked` attribute on the element with an ID of `checkBoxInput` is set to "false" indicating that this input is currently unchecked. Using `ariaChecked` we update the value to "true".


```html
<span
 role="checkbox"
 id="checkBoxInput"
 aria-checked="false"
 tabindex="0"
 aria-labelledby="chk1-label">
</span>
<label id="chk1-label">Remember my preferences</label>
```



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

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

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

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

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

See also
--------

* ARIA: checkbox role
Element: ariaMultiLine property
===============================

The **`ariaMultiLine`** property of the `Element` interface reflects the value of the `aria-multiline` attribute, which indicates whether a text box accepts multiple lines of input or only a single line.

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

This is a multi-line text box.

`"false"`

This is a single-line text box.

Examples
--------

In this example the `aria-multiline` attribute on the element with an ID of `txtBoxInput` is set to "true" indicating that this box allows for multiple lines of input. Using `ariaMultiLine` 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-required="true"></div>
```



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

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

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

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

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

See also
--------

* ARIA: textbox role
Element: scrollTopMax property
==============================

**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 **`Element.scrollTopMax`** read-only property returns a
 number representing the maximum top scroll offset possible for the
 element.

Value
-----

A number.

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

*This property is not part of any specification.*

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

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

See also
--------

* `Element.scrollLeftMax` giving the same information for the other axis.
Element: getAttributeNode() method
==================================

Returns the specified attribute of the specified element, as an `Attr` node.

Syntax
------


```js
getAttributeNode(attrName)
```

### Parameters

* `attrName` is a string containing the name of the attribute.
### Return value

An `Attr` node for the attribute.

Examples
--------


```js
// html: <div id="top" />
let t = document.getElementById("top");
let idAttr = t.getAttributeNode("id");
alert(idAttr.value === "top");
```

Notes
-----

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

The `Attr` node inherits from `Node`, but is not considered a part of the document tree. Common `Node` attributes like parentNode, previousSibling, and nextSibling are `null` for an `Attr` node. You can, however, get the element to which the attribute belongs with the `ownerElement` property.

getAttribute is usually used instead of `getAttributeNode` to get the value of an element's attribute.

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

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

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

 The **`Element.before()`** method inserts a set of
 `Node` or string objects in the children list of this
 `Element`'s parent, just before this `Element`.
 String objects are inserted as equivalent `Text` nodes.

Syntax
------


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

### Inserting an element


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span);

console.log(container.outerHTML);
// "<div><span></span><p></p></div>"
```

### Inserting text


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

p.before("Text");

console.log(container.outerHTML);
// "<div>Text<p></p></div>"
```

### Inserting an element and text


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span, "Text");

console.log(container.outerHTML);
// "<div><span></span>Text<p></p></div>"
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-before① |

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

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

See also
--------

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

 The **`Element.after()`** method inserts a set of
 `Node` or string objects in the children list of the
 `Element`'s parent, just after the `Element`.
 String objects are inserted as equivalent `Text` nodes.

Syntax
------


```js
after(node1)
after(node1, node2)
after(node1, node2, /\* …, \*/ nodeN)
```

### Parameters

`node1`, …, `nodeN`

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

### Inserting an element


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.after(span);

console.log(container.outerHTML);
// "<div><p></p><span></span></div>"
```

### Inserting text


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

p.after("Text");

console.log(container.outerHTML);
// "<div><p></p>Text</div>"
```

### Inserting an element and text


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.after(span, "Text");

console.log(container.outerHTML);
// "<div><p></p><span></span>Text</div>"
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-after① |

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

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

See also
--------

* `Element.before()`
* `Element.append()`
* `Node.appendChild()`
* `Element.insertAdjacentElement()`
* `NodeList`
Element: ariaColIndex property
==============================

The **`ariaColIndex`** property of the `Element` interface reflects the value of the `aria-colindex` attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

Value
-----

A string which contains an integer.

Examples
--------

In this example the `aria-colindex` attribute on the element with an ID of `role-heading` is set to "1". Using `ariaColIndex` we update the value to "2".


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

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

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

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

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

See also
--------

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

The **`ariaLabel`** property of the `Element` interface reflects the value of the `aria-label` attribute, which defines a string value that labels the current element.

Value
-----

A string or `null`.

Examples
--------

In this example the `aria-label` attribute on the element with an ID of `close-button` is set to "Close". Using `ariaLabel` we update the value to "Close dialog".


```html
<button aria-label="Close" id="close-button">X</button>
```



```js
let el = document.getElementById("close-button");
console.log(el.ariaLabel); // "Close"
el.ariaLabel = "Close dialog";
console.log(el.ariaLabel); // "Close dialog"
```

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

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

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

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

 The **`Element.clientHeight`** read-only property is zero for
 elements with no CSS or inline layout boxes; otherwise, it's the inner height of an
 element in pixels. It includes padding but excludes borders, margins, and horizontal
 scrollbars (if present).

`clientHeight` can be calculated as: CSS `height` + CSS
 `padding` - height of horizontal scrollbar (if present).

 When `clientHeight` is used on the root element (the
 `<html>` element), (or on `<body>` if the document is
 in quirks mode), the viewport's height (excluding any scrollbar) is returned. This is a special case of `clientHeight`.


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


Value
-----

A number.

Examples
--------

![How clientHeight property determines the inner height of an element considering the height and padding](/en-US/docs/Web/API/Element/clientHeight/dimensions-client.png)

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

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

### Notes

`clientHeight` is a property introduced in the Internet Explorer object
 model.

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

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

See also
--------

* `HTMLElement.offsetHeight`
* `Element.scrollHeight`
* Determining the dimensions of elements
Element.ariaColIndexText
========================

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

The **`ariaColIndexText`** property of the `Element` interface reflects the value of the `aria-colindextext` attribute, which defines a human readable text alternative of aria-colindex.

Value
-----

A string.

Examples
--------

In this example the `aria-colindex` attribute on the element with an ID of `role-heading` is set to "Aria Role column". Using `ariaColIndexText` we update the value to the string "New column name".


```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-colindextext="Aria Role column">
        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.ariaColIndexText); // "Aria Role"
el.ariaColIndexText = "New column name";
console.log(el.ariaColIndexText); // "New column name"
```

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

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

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

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

See also
--------

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

The **`ariaRequired`** property of the `Element` interface reflects the value of the `aria-required` attribute, which indicates that user input is required on the element before a form may be submitted.

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

Users need to provide input on an element before a form is submitted.

`"false"`

User input is not necessary to submit the form.

Examples
--------

In this example the `aria-required` attribute on the element with an ID of `txtBoxInput` is set to "true" indicating that this input must be completed. Using `ariaRequired` 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-required="true"></div>
```



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

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

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

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

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

See also
--------

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

 The **`Element.replaceWith()`** method replaces this
 `Element` in the children list of its parent with a set of
 `Node` or string objects. String
 objects are inserted as equivalent `Text` nodes.

Syntax
------


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

### Parameters

`param1`, …, `paramN`

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

### Return value

None (`undefined`).

### Exceptions

`HierarchyRequestError` `DOMException`

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

Examples
--------

### Using `replaceWith()`


```js
const div = document.createElement("div");
const p = document.createElement("p");
div.appendChild(p);
const span = document.createElement("span");

p.replaceWith(span);

console.log(div.outerHTML);
// "<div><span></span></div>"
```

### `replaceWith()` is unscopable

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


```js
with (node) {
  replaceWith("foo");
}
// ReferenceError: replaceWith is not defined
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-replacewith① |

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

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

See also
--------

* `Node.replaceChild()`
* `NodeList`