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

`setAttributeNS` adds a new attribute or changes the value of an attribute
 with the given namespace and name.

Syntax
------


```js
setAttributeNS(namespace, name, value)
```

### Parameters

* `namespace` is a string specifying the namespace of the attribute.
* `name` is a string identifying the attribute by its qualified name;
 that is, a namespace prefix followed by a colon followed by a local name.
* `value` is the desired string value of the new attribute.
### Return value

None (`undefined`).

Examples
--------


```js
let d = document.getElementById("d1");
d.setAttributeNS(
  "http://www.mozilla.org/ns/specialspace",
  "spec: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` | - |

`setAttributeNS` is the only method for namespaced attributes which expects
 the fully qualified name, i.e. `"namespace:localname"`.

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

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

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

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

The **`ariaHasPopup`** property of the `Element` interface reflects the value of the `aria-haspopup` attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Value
-----

A string with one of the following values:

`"false"`

The element does not have a popup.

`"true"`

The element has a popup that is a menu.

`"menu"`

The element has a popup that is a menu.

`"listbox"`

The element has a popup that is a listbox.

`"tree"`

The element has a popup that is a tree.

`"grid"`

The element has a popup that is a grid.

`"dialog"`

The element has a popup that is a dialog.


**Warning:** Be aware that support for the different `aria-haspopup` values can vary depending on the element to which the attribute is specified. Ensure that when using `aria-haspopup`, it is done in accordance to the ARIA specification, and that it behaves as expected when testing with necessary browsers and assistive technologies.

Examples
--------

In this example, the `aria-haspopup` attribute on the element with an ID of `animal` is set to "`true`". Using `ariaHasPopup`, we update the value to "`listbox`", which is the expected value for a combobox that invokes a `listbox` popup.


```html
<div class="animals-combobox">
  <label for="animal">Animal</label>
  <input
 id="animal"
 type="text"
 role="combobox"
 aria-autocomplete="list"
 aria-controls="animals-listbox"
 aria-activedescendant=""
 aria-expanded="false"
 aria-haspopup="true" />
  <ul id="animals-listbox" role="listbox" aria-label="Animals">
    <li id="animal-cat" role="option">Cat</li>
    <li id="animal-dog" role="option">Dog</li>
  </ul>
</div>
```



```js
let el = document.getElementById("animal");
console.log(el.ariaHasPopup); // true
el.ariaHasPopup = "listbox";
console.log(el.ariaHasPopup); // listbox
```

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

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

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

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

The **`blur`** event fires when an element has lost focus. The event does not bubble, but the related `focusout` event that follows does bubble.

 An element will lose focus if another element is selected.
 An element will also lose focus if a style that does not allow focus is applied, such as `hidden`, or if the element is removed from the document — in both of these cases focus moves to the `body` element (viewport).
 Note however that `blur` is not fired when a focused element is removed from the document.

The opposite of `blur` is the `focus` event, which fires when the element has *received* focus.

The `blur` event is not cancelable.

Syntax
------

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


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

onblur = (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 receiving focus, if any.

Examples
--------

### Simple 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 password = document.querySelector('input[type="password"]');

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

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


#### Result

### Event delegation

There are two ways of implementing event delegation for this event: by using the `focusout` event, or by setting the `useCapture` parameter of `addEventListener()` to `true`.

#### 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(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

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


#### Result

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

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

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

The value of `Document.activeElement` varies across browsers while this event is being handled (Firefox bug 452307): IE10 sets it to the element that the focus will move to, while Firefox and Chrome often set it to the `body` of the document.

See also
--------

* The `HTMLElement.blur()` method
* Related events: `focus`, `focusin`, `focusout`
* This event on `Window` targets: `blur` event
* Focusing: focus/blur
Element: ariaColSpan property
=============================

The **`ariaColSpan`** property of the `Element` interface reflects the value of the `aria-colspan` attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

Value
-----

A string which contains an integer.

Examples
--------

In this example the `aria-colspan` attribute on the element with an ID of `spanning-heading` is set to "2". Using `ariaColSpan` we update the value to "3".


```html
<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</td>
  </tr>
  <tr>
    <td colspan="2" aria-colspan="2" id="spanning-column">Spanning</td>
    <td>One</td>
  </tr>
</table>
```



```js
let el = document.getElementById("spanning-column");
console.log(el.ariaColSpan);
el.ariaColSpan = "3";
console.log(el.ariaColSpan);
```

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

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

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

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

See also
--------

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

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

Value
-----

A string which contains an integer.

Examples
--------

In this example the `aria-rowindex` attribute on the element with an ID of `role-heading` is set to "1". Using `ariaRowIndex` 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 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.ariaRowIndex); // 1
el.ariaRowIndex = "2";
console.log(el.ariaRowIndex); // 2
```

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

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

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

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

See also
--------

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

 The **`Element.firstElementChild`** read-only property
 returns an element's first child `Element`, or `null` if there
 are no child elements.

`Element.firstElementChild` includes only element nodes.
 To get all child nodes, including non-element nodes like text and comment nodes, use `Node.firstChild`.

Value
-----

An `Element` object, or `null`.

Examples
--------


```html
<ul id="list">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

<script>
 const list = document.getElementById("list");
 console.log(list.firstElementChild.textContent);
 // logs "First (1)"
</script>
```

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

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

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

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

See also
--------

* `Element.nextElementSibling`
* `Element.lastElementChild`
Element: assignedSlot property
==============================

 The **`assignedSlot`** read-only
 property of the `Element` interface returns an
 `HTMLSlotElement` representing the `<slot>` element the
 node is inserted in.

Value
-----

 An `HTMLSlotElement` instance, or `null` if the element is not
 assigned to a slot, or if the associated shadow root was attached with its
 `mode` set to `closed` (see
 `Element.attachShadow` for further details).

Examples
--------

 In our simple-template example (see it live), we create a trivial custom element example called
 `<my-paragraph>` in which a shadow root is attached and then populated
 using the contents of a template that contains a slot named `my-text`.

 When `<my-paragraph>` is used in the document, the slot is populated
 by a slottable element by including it inside the element with a
 `slot` attribute
 with the value `my-text`. Here is one such example:


```html
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>
```


 In our JavaScript file we get a reference to the `<span>` shown above,
 then log a reference to the original `<slot>` element the
 `<span>` was inserted in.


```js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">'
```

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

| Specification |
| --- |
| DOM Standard # dom-slotable-assignedslot |

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

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

 The **`Element.lastElementChild`** read-only property
 returns an element's last child `Element`, or `null` if there
 are no child elements.

`Element.lastElementChild` includes only element nodes.
 To get all child nodes, including non-element nodes like text and comment nodes, use `Node.lastChild`.

Value
-----

An `Element` object, or `null`.

Examples
--------


```html
<ul id="list">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

<script>
 const list = document.getElementById("list");
 console.log(list.lastElementChild.textContent);
 // logs "Third (3)"
</script>
```

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

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

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

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

See also
--------

* `Element.previousElementSibling`
* `Element.firstElementChild`
Element: focusout event
=======================

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

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

The `focusout` event is not cancelable.

Syntax
------

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


```js
addEventListener("focusout", (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 receiving 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-focusout |

**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`, `focusin`
* Focusing: focus/blur
Element: part property
======================

 The **`part`** property of the `Element` interface
 represents the part identifier(s) of the element (i.e. set using the `part`
 attribute), returned as a `DOMTokenList`. These can be used to style parts
 of a shadow DOM, via the `::part` pseudo-element.

Value
-----

A `DOMTokenList` object.

Examples
--------

 The following excerpt is from our shadow-part
 example. Here the `part` attribute is used to find the shadow parts, and the
 `part` property is then used to change the part identifiers of each tab so
 the correct styling is applied to the active tab when tabs are clicked.


```js
const tabs = [];
const children = this.shadowRoot.children;

for (const elem of children) {
  if (elem.getAttribute("part")) {
    tabs.push(elem);
  }
}

tabs.forEach((tab) => {
  tab.addEventListener("click", (e) => {
    tabs.forEach((tab) => {
      tab.part = "tab";
    });
    e.target.part = "tab active";
  });

  console.log(tab.part);
});
```

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

| Specification |
| --- |
| CSS Shadow Parts # idl |

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

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

See also
--------

* `::part`
* part
Element: ariaRoleDescription property
=====================================

The **`ariaRoleDescription`** property of the `Element` interface reflects the value of the `aria-roledescription` attribute, which defines a human-readable, author-localized description for the role of an element.

Value
-----

A string.

Examples
--------

In this example the `aria-roledescription` attribute on the element with an ID of `myApplication` has been set. Using `ariaRoleDescription` we can update the value.


```html
<div
 id="myApplication"
 role="application"
 aria-roledescription="a description of this widget">
  …
</div>
```



```js
let el = document.getElementById("myApplication");
console.log(el.ariaRoleDescription); // "a description of this widget"
el.ariaRoleDescription = "an updated description of this widget";
console.log(el.ariaRoleDescription); // "an updated description of this widget"
```

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

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

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

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

* ARIA: application role
Element: gesturechange 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 **`gesturechange`** event is fired when digits move during a touch gesture.

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

ongesturechange = (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: hasAttribute() method
==============================

 The **`Element.hasAttribute()`** method returns a
 **Boolean** value indicating whether the specified element has the
 specified attribute or not.

Syntax
------


```js
hasAttribute(name)
```

### Parameters

`name`

is a string representing the name of the attribute.

### Return value

A boolean.

Examples
--------


```js
const foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) {
  // do something
}
```

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

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

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

The **`ariaSelected`** property of the `Element` interface reflects the value of the `aria-selected` attribute, which indicates the current "selected" state of elements that have a selected state.

Value
-----

A string with one of the following values:

`"true"`

The item is selected.

`"false"`

The item is not selected.

`"undefined"`

The item is not selectable.

Examples
--------

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


```html
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">
  Tab label
</button>
```



```js
let el = document.getElementById("tab-id");
console.log(el.ariaSelected); // true
el.ariaSelected = "false";
console.log(el.ariaSelected); // false
```

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

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

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

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

See also
--------

* ARIA: tab role