FRONTEND_1 Telegram 3969
🎯 HTML attributes vs DOM properties

Разница между атрибутами и свойствами в HTML/DOM может быть запутанной, особенно когда названия совпадают. Кратко:

* Атрибут — часть HTML.
* Свойство — часть DOM-объекта.

Пример:


<input value="Hello">



const input = document.querySelector('input');
console.log(input.getAttribute('value')); // "Hello"
console.log(input.value); // "Hello"
input.value = 'World';
console.log(input.getAttribute('value')); // "Hello"


Значение атрибута остаётся неизменным, даже если свойство обновляется в JS. DOM-свойства могут не синхронизироваться с атрибутами после инициализации.

🔹Свойства могут отличаться от атрибутов


<input disabled>



input.hasAttribute('disabled'); // true
input.disabled; // true
input.removeAttribute('disabled');
input.disabled; // false


Свойство disabled — булево. Атрибут disabled работает как флаг: его наличие имеет значение, не важно, какое значение вы ему присвоили.


<input disabled="false">


Это всё равно disabled. Так работает HTML.

🔹Когда использовать атрибуты, а когда свойства?

* Используйте атрибуты, когда:

* Вам нужно установить начальное значение в HTML.
* Вы работаете с HTML-строкой.
* Вы хотите сохранить значение при сериализации (например, outerHTML).

* Используйте свойства, когда:

* Вы работаете с DOM в JS.
* Нужно прочитать или изменить текущее состояние элемента.

🔹Иногда стоит быть осторожнее


input.setAttribute('value', 'New');
console.log(input.value); // "New"


Иногда установка атрибута также влияет на свойство, но не всегда — зависит от элемента и конкретного атрибута/свойства.

https://jakearchibald.com/2024/attributes-vs-properties/

👉 @frontend_1



tgoop.com/frontend_1/3969
Create:
Last Update:

🎯 HTML attributes vs DOM properties

Разница между атрибутами и свойствами в HTML/DOM может быть запутанной, особенно когда названия совпадают. Кратко:

* Атрибут — часть HTML.
* Свойство — часть DOM-объекта.

Пример:


<input value="Hello">



const input = document.querySelector('input');
console.log(input.getAttribute('value')); // "Hello"
console.log(input.value); // "Hello"
input.value = 'World';
console.log(input.getAttribute('value')); // "Hello"


Значение атрибута остаётся неизменным, даже если свойство обновляется в JS. DOM-свойства могут не синхронизироваться с атрибутами после инициализации.

🔹Свойства могут отличаться от атрибутов


<input disabled>



input.hasAttribute('disabled'); // true
input.disabled; // true
input.removeAttribute('disabled');
input.disabled; // false


Свойство disabled — булево. Атрибут disabled работает как флаг: его наличие имеет значение, не важно, какое значение вы ему присвоили.


<input disabled="false">


Это всё равно disabled. Так работает HTML.

🔹Когда использовать атрибуты, а когда свойства?

* Используйте атрибуты, когда:

* Вам нужно установить начальное значение в HTML.
* Вы работаете с HTML-строкой.
* Вы хотите сохранить значение при сериализации (например, outerHTML).

* Используйте свойства, когда:

* Вы работаете с DOM в JS.
* Нужно прочитать или изменить текущее состояние элемента.

🔹Иногда стоит быть осторожнее


input.setAttribute('value', 'New');
console.log(input.value); // "New"


Иногда установка атрибута также влияет на свойство, но не всегда — зависит от элемента и конкретного атрибута/свойства.

https://jakearchibald.com/2024/attributes-vs-properties/

👉 @frontend_1

BY Frontend разработчик




Share with your friend now:
tgoop.com/frontend_1/3969

View MORE
Open in Telegram


Telegram News

Date: |

A Hong Kong protester with a petrol bomb. File photo: Dylan Hollingsworth/HKFP. Commenting about the court's concerns about the spread of false information related to the elections, Minister Fachin noted Brazil is "facing circumstances that could put Brazil's democracy at risk." During the meeting, the information technology secretary at the TSE, Julio Valente, put forward a list of requests the court believes will disinformation. Write your hashtags in the language of your target audience. How to create a business channel on Telegram? (Tutorial) The court said the defendant had also incited people to commit public nuisance, with messages calling on them to take part in rallies and demonstrations including at Hong Kong International Airport, to block roads and to paralyse the public transportation system. Various forms of protest promoted on the messaging platform included general strikes, lunchtime protests and silent sit-ins.
from us


Telegram Frontend разработчик
FROM American