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

 The
 **`Element.getElementsByTagName()`** method returns a live
 `HTMLCollection` of elements with the given tag name.

 All descendants of the
 specified element are searched, but not the element itself. The returned list is
 *live*, which means it updates itself with the DOM tree automatically.
 Therefore, there is no need to call `Element.getElementsByTagName()` with
 the same element and arguments repeatedly if the DOM changes in between calls.

 When called on an HTML element in an HTML document, `getElementsByTagName`
 lower-cases the argument before searching for it. This is undesirable when trying to
 match camel-cased SVG elements (such as
 `<linearGradient>`)
 in an HTML document. Instead, use `Element.getElementsByTagNameNS()`,
 which preserves the capitalization of the tag name.

`Element.getElementsByTagName` is similar to
 `Document.getElementsByTagName()`, except that it only searches for
 elements that are descendants of the specified element.

Syntax
------


```js
getElementsByTagName(tagName)
```

### Parameters

* `tagName` is the qualified name to look for. The special string
 `"*"` represents all elements. For compatibility with XHTML, lower-case
 should be used.
### Return value

A *live* `HTMLCollection` of elements with a matching tag name, in the order they appear. If no elements are found, the `HTMLCollection` is empty.

Examples
--------


```js
// Check the status of each data cell in a table
const table = document.getElementById("forecast-table");
const cells = table.getElementsByTagName("td");

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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: afterscriptexecute 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.

**Warning:** This event was a proposal in an early version of the specification. Do not rely on it.

The **`afterscriptexecute`** event is fired after a script has been executed.

It is a proprietary event specific to Gecko (Firefox).

This event is not cancelable.

Syntax
------

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


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

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

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

A generic `Event`.

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

* `beforescriptexecute` event
Element: contentvisibilityautostatechange event
===============================================

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

The **`contentvisibilityautostatechange`** event fires on any element with `content-visibility: auto` set on it when it starts or stops being relevant to the user and skipping its contents.

 While the element is not relevant (between the start and end events), the user agent skips an element's rendering, including layout and painting, which can significantly improve page rendering speed.
 The `contentvisibilityautostatechange` event provides a way for an app's code to also start or stop rendering processes (e.g. drawing on a `<canvas>`) when they are not needed, thereby conserving processing power.

Note that even when hidden from view, element contents will remain semantically relevant (e.g. to assistive technology users), so this signal should not be used to skip significant semantic DOM updates.

Syntax
------

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


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


**Note:** The event object is of type `ContentVisibilityAutoStateChangeEvent`.

Examples
--------


```js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
  // …
}

// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
  // …
}
```

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

| Specification |
| --- |
| CSS Containment Module Level 2 # content-visibility-auto-state-change |

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

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

See also
--------

* `ContentVisibilityAutoStateChangeEvent`
* CSS Containment
* The `content-visibility` property
* The `contain` property
Element: ariaHidden property
============================

The **`ariaHidden`** property of the `Element` interface reflects the value of the `aria-hidden`) attribute, which indicates whether the element is exposed to an accessibility API.

Value
-----

A string with one of the following values:

`"true"`

The element is hidden from the accessibility API.

`"false"`

The element is exposed to the accessibility API as if it were rendered.

`undefined`

The element's hidden state is determined by the user agent based on whether it is rendered.

Examples
--------

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


```html
<div id="hidden" aria-hidden="true">Some things are better left unsaid.</div>
```



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

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

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

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

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

`setAttributeNodeNS` adds a new namespaced attribute node to an element.

Syntax
------


```js
setAttributeNodeNS(attributeNode)
```

### Parameters

* `attributeNode` is an `Attr` node.
### Return value

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

Examples
--------


```js
// <div id="one" xmlns:myNS="http://www.mozilla.org/ns/specialspace"
// myNS:special-align="utterleft">one</div>
// <div id="two">two</div>

const myns = "http://www.mozilla.org/ns/specialspace";
const d1 = document.getElementById("one");
const d2 = document.getElementById("two");
const a = d1.getAttributeNodeNS(myns, "special-align");
d2.setAttributeNodeNS(a.cloneNode(true));
alert(d2.attributes[1].value); // returns: `utterleft'
```

Notes
-----

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

Note that if you try to set without cloning the node, Mozilla gives an NS\_ERROR\_DOM\_INUSE\_ATTRIBUTE\_ERR "Attribute already in use" error, as the DOM requires cloning for Attr to be reused (unlike other Nodes which can be moved).

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

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

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

See also
--------

* `Document.createAttribute()`
* `Document.createAttributeNS()`
Element: clientLeft property
============================

 The width of the left border of an element in pixels. It includes the width of the
 vertical scrollbar if the text direction of the element is right-to-left and if there
 is an overflow causing a left vertical scrollbar to be rendered.
 `clientLeft` does not include the left margin or the left padding.
 `clientLeft` is read-only.


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



**Note:** When an element has
 `display: inline`, `clientLeft` returns `0`
 regardless of the element's border.


Value
-----

A number.

Examples
--------

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

### HTML


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

### CSS


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

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

### Result

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

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

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

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

**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.scrollIntoViewIfNeeded()`** method scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. If the element is already within the visible area of the browser window, then no scrolling takes place. This method is a proprietary variation of the standard `Element.scrollIntoView()` method.

Syntax
------


```js
scrollIntoViewIfNeeded()
scrollIntoViewIfNeeded(centerIfNeeded)
```

### Parameters

`centerIfNeeded` Optional

An optional boolean value with a default of `true`:

* If `true`, the element will be aligned so it is centered within the visible area of the scrollable ancestor.
* If `false`, the element will be aligned to the nearest edge of the visible area of the scrollable ancestor. Depending on which edge of the visible area is closest to the element, either the top of the element will be aligned to the top edge of the visible area, or the bottom edge of the element will be aligned to the bottom edge of the visible area.

### Return value

None (`undefined`).

Examples
--------


```js
const element = document.getElementById("my-el");

element.scrollIntoViewIfNeeded(); // Centers the element in the visible area
element.scrollIntoViewIfNeeded(false); // Aligns the element to the nearest edge in the visible area
```

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

Not part of any specification. This is a proprietary, WebKit-specific method.

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

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

See also
--------

* W3C CSSOM bug 17152: Support centering an element when scrolling into view. (feature request for a standardized equivalent to `scrollIntoViewIfNeeded`)
Element: tagName property
=========================

 The **`tagName`** read-only property
 of the `Element` interface returns the tag name of the element on which
 it's called.

 For example, if the element is an `<img>`, its
 `tagName` property is `"IMG"` (for HTML documents; it may be cased
 differently for XML/XHTML documents).

Value
-----

 A string indicating the element's tag name. This string's capitalization depends on the
 document type:

* For DOM trees which represent HTML documents, the returned tag name is always in the
 canonical upper-case form. For example, `tagName` called on a
 `<div>` element returns `"DIV"`.
* The tag names of elements in an XML DOM tree are returned in the same case in which
 they're written in the original XML file. If an XML document includes a tag
 `"<SomeTag>"`, then the `tagName` property's value is
 `"SomeTag"`.

 For `Element` objects, the value of `tagName` is the same as
 the value of the `nodeName` property the element object
 inherits from `Node`.

Examples
--------

### HTML


```html
<span id="born">When I was born…</span>
```

### JavaScript


```js
const span = document.getElementById("born");
console.log(span.tagName);
```


 In XHTML (or any other XML format), the original case will be maintained, so
 `"span"` would be output in case the original tag name was created lowercase.
 In HTML, `"SPAN"` would be output instead regardless of the case used while
 creating the original document.

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

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

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

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

 The **`getAttributeNames()`** method of the
 `Element` interface returns the attribute names of the element as an
 `Array` of strings. If the element has no attributes it returns an empty
 array.

 Using `getAttributeNames()` along with
 `getAttribute()`, is a memory-efficient and
 performant alternative to accessing `Element.attributes`.

The names returned by **`getAttributeNames()`** are *qualified* attribute names, meaning that attributes with a namespace prefix have their names returned with that namespace prefix (*not* the actual namespace), followed by a colon, followed by the attribute name (for example, **`xlink:href`**), while any attributes which have no namespace prefix have their names returned as-is (for example, **`href`**).

Syntax
------


```js
getAttributeNames()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

The following example shows how:

* For an attribute which has a namespace prefix, `getAttributeNames()` returns that namespace prefix along with the attribute name.
* For an attribute which has no namespace prefix, `getAttributeNames()` returns just the attribute name, as-is.

It's important to understand that:

1. An attribute can be present in the DOM with a namespace but lacking a namespace prefix.
2. For an attribute in the DOM that has a namespace but lacks a namespace prefix, `getAttributeNames()` will return just the attribute name, with no indication that the attribute is in a namespace.

The example below includes such a "namespaced but without a namespace prefix" case.


```js
const element = document.createElement("a");

// set "href" attribute with no namespace and no namespace prefix
element.setAttribute("href", "https://example.com");
// set "href" attribute with namespace and also "xlink" namespace prefix
element.setAttributeNS(
  "http://www.w3.org/1999/xlink",
  "xlink:href",
  "https://example.com",
);
// set "show" attribute with namespace but no namespace prefix
element.setAttributeNS("http://www.w3.org/1999/xlink", "show", "new");

// Iterate over element's attributes
for (const name of element.getAttributeNames()) {
  const value = element.getAttribute(name);
  console.log(name, value);
}

// logs:
// href https://example.com
// xlink:href https://example.com
// show new
```

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

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

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

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

The **`ariaMultiSelectable`** property of the `Element` interface reflects the value of the `aria-multiselectable` attribute, which indicates that the user may select more than one item from the current selectable descendants.

**Note:** Where possible use an HTML `<select>` element as this has built in semantics and does not require ARIA attributes.

Value
-----

A string with one of the following values:

`"true"`

More than one item may be selected at a time.

`"false"`

Only one item may be selected.

Examples
--------

In this example the `aria-multiselectable` attribute on the element with an ID of `listbox1` is set to "true" indicating that this input accepts multiple selected items. Using `ariaMultiSelectable` we update the value to "false".


```html
<div role="listbox" tabindex="0" id="listbox1"
 aria-multiselectable="true" aria-labelledby="listbox1label" aria-activedescendant="listbox1-1">
  <div role="option" id="listbox1-1" class="selected" aria-selected="true">Green</div>
  <div role="option" id="listbox1-2">Orange</div>
  <div role="option" id="listbox1-3">Red</div<
</div>
```



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

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

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

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

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

See also
--------

* ARIA: listbox role
Element: scrollLeftMax 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.scrollLeftMax`** read-only property returns a
 number representing the maximum left 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.scrollTopMax` giving the same information for the other axis.
Element: ariaAtomic property
============================

The **`ariaAtomic`** property of the `Element` interface reflects the value of the `aria-atomic` attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the `aria-relevant` attribute.

Value
-----

A string with one of the following values:

`"false"`

Assistive technologies will present only the changed node or nodes.

`"true"`

Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists.

Examples
--------

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


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



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

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

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

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

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

The **`copy`** event of the Clipboard API fires when the user initiates a copy action through the browser's user interface.

The event's default action is to copy the selection (if any) to the clipboard.

A handler for this event can *modify* the clipboard contents by calling `setData(format, data)` on the event's `ClipboardEvent.clipboardData` property, and cancelling the event's default action using `event.preventDefault()`.

However, the handler cannot *read* the clipboard data.

It's possible to construct and dispatch a synthetic `copy` event, but this will not affect the system clipboard.

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

oncopy = (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 source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  event.preventDefault();
});
```


#### Result

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

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

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

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

See also
--------

* Related events: `cut`, `paste`
* This event on `Document` targets: `copy`
* This event on `Window` targets: `copy`
Element: scrollBy() method
==========================

 The **`scrollBy()`** method of the `Element`
 interface scrolls an element by the given amount.

Syntax
------


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

### Parameters

* `x-coord` is the horizontal pixel value that you want to
 scroll by.
* `y-coord` is the vertical pixel value that you want to scroll
 by.

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

Specifies whether the scrolling should animate smoothly (`smooth`), happen instantly in a single jump (`instant`), or let the browser choose (`auto`, default).


### Return value

None (`undefined`).

Examples
--------


```js
// scroll an element
element.scrollBy(300, 300);
```


Using `options`:


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

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

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

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

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