> For the complete documentation index, see [llms.txt](https://edrus.gitbook.io/mt-it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://edrus.gitbook.io/mt-it/2nd-month/week-6/dom-document-object-model/working-with-attributes/understanding-relationships-between-html-attributes-and-dom-objects-properties.md).

# Understanding Relationships Between HTML Attributes & DOM Object’s Properties

When the web browser [loads an HTML page](https://www.javascripttutorial.net/javascript-dom/javascript-page-load-events/), it generates the corresponding DOM objects based on the DOM nodes of the document.

For example, if a page contains the following `input` element:

```javascript
<input type="text" id="username">Code language: JavaScript (javascript)
```

The web browser will generate an `HTMLInputElement` object.

The `input` element has two attributes:

* The `type` attribute with the value `text`.
* The `id` attribute with the value `username`.

The generated `HTMLInputElement` object will have the corresponding properties:

* The `input.type` with the value `text`.
* The `input.id` with the value `username`.

In other words, the web browser will automatically convert attributes of HTML elements to properties of DOM objects.

However, the web browser only converts the *standard* attributes to the DOM object’s properties. The standard attributes of an element are listed on the element’s specification.

Attribute-property mapping is not always one-to-one. For example:

```javascript
<input type="text" id="username" secured="true">Code language: JavaScript (javascript)
```

In this example, the `secured` is a non-standard attribute:

```javascript
let input = document.querySelector('#username');
console.log(input.secured); // undefinedCode language: JavaScript (javascript)
```

### Attribute methods

To access both standard and non-standard attributes, you use the following methods:

* `element.getAttribute(name)` – [get the attribute value](https://www.javascripttutorial.net/javascript-dom/javascript-getattribute/)
* `element.setAttribute(name, value)` – [set the value for the attribute](https://www.javascripttutorial.net/javascript-dom/javascript-setattribute/)
* `element.hasAttribute(name)` – [check for the existence of an attribute](https://www.javascripttutorial.net/javascript-dom/javascript-hasattribute/)
* `element.removeAttribute(name)` – [remove the attribute](https://www.javascripttutorial.net/javascript-dom/javascript-removeattribute/)

### element.attributes

The `element.attributes` property provides a live collection of attributes available on a specific element. For example:

```javascript
let input = document.querySelector('#username');

for(let attr of input.attributes) {
    console.log(`${attr.name} = ${attr.value}` )  
}Code language: JavaScript (javascript)
```

Output:

```javascript
type = text
id = username
secure = trueCode language: JavaScript (javascript)
```

Note that `element.attributes` is a `NamedNodeMap`, not an [`Array`](https://www.javascripttutorial.net/javascript-array/), therefore, it has no Array’s methods.

### Attribute-property synchronization

When a standard attribute changes, the corresponding property is auto-updated with some exceptions and vice versa.

Suppose that you have the following `input` element:

```javascript
<input type="text" id="username" tabindex="1">Code language: JavaScript (javascript)
```

The following example illustrates the change of the `tabindex` attribute is propagated to the `tabIndex` property and vice versa:

```javascript
let input = document.querySelector('#username');

// attribute -> property
input.setAttribute('tabindex', 2);
console.log(input.tabIndex);  // 2


// property -> attribute
input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3Code language: JavaScript (javascript)
```

The following example shows when the `value` attribute changes, it reflects in the `value` property, but not the other way around:

```javascript
let input = document.querySelector('#username');

// attribute -> property: OK
input.setAttribute('value','guest');
console.log(input.value);  // guest


// property -> attribute: doesn't change
input.value = 'admin';
console.log(input.getAttribute('value')); // guestCode language: JavaScript (javascript)
```

### DOM properties are typed

The value of an attribute is always a string. However, when the attribute is converted to the property of a DOM object, the property value can be a string, a boolean, an object, etc.

The following `checkbox` element has the `checked` attribute. When the `checked` attribute is converted to the property, it is a boolean value:

```javascript
<input type="checkbox" id="chkAccept" checked> Accept

let checkbox = document.querySelector('#chkAccept');
console.log(checkbox.checked); // trueCode language: JavaScript (javascript)
```

The following shows an `input` element with the `style` attribute:

```javascript
<input type="password" id="password" style="color:red;with:100%">Code language: JavaScript (javascript)
```

The `style` attribute is a string while the `style` property is an object:

```javascript
let input = document.querySelector('#password');

let styleAttr = input.getAttribute('style');
console.log(styleAttr);

console.dir(input.style);Code language: JavaScript (javascript)
```

Output:

```javascript
[object CSSStyleDeclaration]Code language: JavaScript (javascript)
```

### The data-\* attributes

If you want to add a custom attribute to an element, you should prefix it with the `data-` e.g., `data-secured` because all attributes start with `data-` are reserved for the developer’s uses.

To access `data-*` attributes, you can use the `dataset` property. For example, we have the following `div` element with custom attributes:

```javascript
<div id="main" data-progress="pending" data-value="10%"></div>Code language: JavaScript (javascript)
```

The following shows how to access the `data-*` attributes via the `dataset` property:

```javascript
let bar = document.querySelector('#main');
console.log(bar.dataset);Code language: JavaScript (javascript)
```

Output:

```javascript
[object DOMStringMap] {
    progress: "pending",
    value: "10%"
}Code language: JavaScript (javascript)
```

### Summary

* Attributes are specified in HTML elements.
* Properties are specified DOM objects.
* Attributes are converted to properties respectively.
* Use the `element.attributes` property to access standard and custom attributes of an element.
* Use the `element.dataset` property to access the `data-*` attributes.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://edrus.gitbook.io/mt-it/2nd-month/week-6/dom-document-object-model/working-with-attributes/understanding-relationships-between-html-attributes-and-dom-objects-properties.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.