1-HTML attribute vs. DOM property

The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

  • A few HTML attributes have 1:1 mapping to properties. id is one example.
  • Some HTML attributes don't have corresponding properties. colspan is one example.
  • Some DOM properties don't have corresponding attributes. textContent is one example.
  • Many HTML attributes appear to map to properties ... but not in the way you might think!

That last category is confusing until you grasp this general rule:

Attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.

For example, when the browser renders <input type="text" value="Bob">, it creates a corresponding DOM node with a value property initialized to "Bob".

When the user enters "Sally" into the input box, the DOM element value property becomes "Sally". But the HTML value attribute remains unchanged as you discover if you ask the input element about that attribute: input.getAttribute('value') returns "Bob".

The HTML attribute value specifies the initial value; the DOM value property is the current value.

The disabled attribute is another peculiar example. A button's disabled property is false by default so the button is enabled. When you add the disabled attribute, its presence alone initializes the button's disabled property to true so the button is disabled.

Adding and removing the disabled attribute disables and enables the button. The value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled="false">Still Disabled</button>.

Setting the button's disabled property (say, with an Angular binding) disables or enables the button. The value of the property matters.

The HTML attribute and the DOM property are not the same thing, even when they have the same name.

This fact bears repeating:

Template binding works with properties and events, not attributes.

2-A world without attributes

In the world of Angular, the only role of attributes is to initialize element and directive state. When you write a data binding, you're dealing exclusively with properties and events of the target object. HTML attributes effectively disappear.

1-Thuộc tính HTML (attribute) và thuộc tính DOM (property)

Việc phân biệt giữa attribute của HTML và property của DOM là điều then chốt để hiểu cách binding trong Angular hoạt động.

Attribute được định nghĩa bởi HTML. Property được định nghĩa bởi DOM (Document Object Model).

  • Một vài attribute của HTML ánh xạ 1:1 sang property. id là một ví dụ.
  • Một số attribute của HTML không có property tương ứng. colspan là một ví dụ.
  • Một số property của DOM không có attribute tương ứng. textContent là một ví dụ.
  • Nhiều attribute của HTML trông như có ánh xạ sang property ... nhưng không theo cách bạn nghĩ!

Trường hợp cuối cùng này gây nhầm lẫn cho đến khi bạn nắm được quy tắc chung sau:

Attribute chỉ khởi tạo các property của DOM rồi hết nhiệm vụ. Giá trị property có thể thay đổi; giá trị attribute thì không.

Ví dụ, khi trình duyệt render <input type="text" value="Bob">, nó tạo ra một node DOM tương ứng với property value được khởi tạo là "Bob".

Khi người dùng nhập "Sally" vào ô input, property value của phần tử DOM trở thành "Sally". Nhưng attribute value của HTML vẫn không đổi, như bạn sẽ thấy nếu hỏi phần tử input về attribute đó: input.getAttribute('value') vẫn trả về "Bob".

Attribute value của HTML quy định giá trị ban đầu; property value của DOM là giá trị hiện tại.

Attribute disabled là một ví dụ đặc biệt khác. Property disabled của một nút mặc định là false, nên nút đang được bật. Khi bạn thêm attribute disabled, chỉ riêng sự hiện diện của nó đã khởi tạo property disabled của nút thành true, khiến nút bị vô hiệu hóa.

Việc thêm và xóa attribute disabled sẽ vô hiệu hóa và bật lại nút. Giá trị của attribute không quan trọng, đó là lý do bạn không thể bật một nút bằng cách viết <button disabled="false">Vẫn bị vô hiệu hóa</button>.

Đặt property disabled của nút (chẳng hạn bằng một binding của Angular) sẽ vô hiệu hóa hoặc bật nút. Ở đây, giá trị của property mới là điều quan trọng.

Attribute của HTML và property của DOM không phải là một, ngay cả khi chúng trùng tên.

Điều này cần được nhắc lại:

Template binding làm việc với property và event, không phải với attribute.

2-Thế giới không có attribute

Trong thế giới của Angular, vai trò duy nhất của attribute là khởi tạo trạng thái của phần tử và directive. Khi bạn viết một data binding, bạn chỉ làm việc với các property và event của đối tượng đích. Các attribute của HTML gần như biến mất.