Sự khác biệt giữa thuộc tính HTML (Attributes) và thuộc tính DOM (Properties)

Sự khác biệt giữa thuộc tính HTML và thuộc tính DOM

Thuộc tính HTML và thuộc tính DOM về bản chất là hai thứ khác nhau. Chúng có thể có thuộc tính và property cùng tên, nhưng có thể được đặt thành các giá trị khác nhau.

• Những khác biệt chính giữa attribute và property

  • Tuần tự hóa HTML: attribute được tuần tự hóa thành HTML, còn property thì không
  • Kiểu giá trị: giá trị của attribute luôn là chuỗi, còn property có thể là bất kỳ kiểu nào
  • Phân biệt chữ hoa chữ thường: tên attribute không phân biệt hoa thường, còn tên property thì có. Tuy nhiên, giá trị của attribute có phân biệt hoa thường

• Phản chiếu (Reflection)

  • Để thuận tiện, hầu hết các đặc tả đều tạo ra property tương đương cho mọi attribute đã được định nghĩa
  • Khi property phản chiếu một attribute, attribute là nguồn dữ liệu. Khi đặt attribute thì property được cập nhật, và khi đọc từ property thì thực chất là đọc từ attribute
  • Tuy nhiên, một số cơ chế phản chiếu phức tạp hơn. Đôi khi tên property và tên attribute mà nó phản chiếu không giống nhau

• Kiểm tra hợp lệ, ép kiểu và giá trị mặc định

  • Property có kiểm tra hợp lệ và giá trị mặc định, còn attribute thì không
  • Một số property thực hiện ép kiểu

• value của trường input

  • Có attribute value và property value, nhưng property value không phản chiếu attribute value. Thay vào đó, property defaultValue phản chiếu attribute value
  • Property value không phản chiếu bất kỳ attribute nào. Đây không phải trường hợp hiếm, nhiều property như offsetWidth, parentNode cũng vậy
  • Property value ban đầu theo property defaultValue. Sau đó, nếu property value được đặt thông qua JavaScript hoặc tương tác của người dùng, nó sẽ chuyển sang giá trị nội bộ

• Attribute nên dành cho cấu hình

  • Attribute nên dành cho cấu hình, còn property có thể chứa trạng thái
  • Cây light-DOM nên có một chủ sở hữu duy nhất
  • Phần tử <details> và <dialog> biểu thị trạng thái open bằng attribute open, và trình duyệt tự thêm/xóa attribute này để phản hồi tương tác của người dùng. Điều này được xem là một sai lầm trong thiết kế

• Cách các framework xử lý khác biệt

  • Preact và VueJS nếu propName in element thì đặt prop dưới dạng property, nếu không thì đặt thành attribute. Chúng ưu tiên property hơn attribute
  • React làm ngược lại. Ngoại trừ một số trường hợp được định nghĩa sẵn là ưu tiên property, còn lại nó sẽ đặt dưới dạng attribute
  • lit-html giữ nguyên sự phân biệt giữa attribute và property, và để đặt property thay vì attribute thì phải thêm dấu . trước tên

Ý kiến của GN⁺

• Việc hiểu sự khác nhau giữa attribute HTML và property DOM rất quan trọng khi làm việc với DOM ở mức thấp. Trong đa số trường hợp thì khác biệt không lớn, nhưng khi dùng framework cần chú ý

• Có vẻ hợp lý khi phân biệt rằng attribute biểu thị cấu hình (configuration), còn property biểu thị trạng thái (state). Đáng tiếc là một số phần tử HTML gần đây không tuân theo điều này

• Đặc biệt cần cẩn thận khi dùng custom element trong React. React đặt các giá trị của custom element thành attribute thay vì property, nên những thứ chỉ hỗ trợ property có thể không hoạt động. Điều này dự kiến sẽ được cải thiện trong React 19

• Việc so sánh cách các framework lớn như Preact, Vue, React, lit-html xử lý attribute và property cũng rất thú vị. Điều đó phản ánh triết lý và các quyết định thiết kế của từng framework

• Tiêu chuẩn web và cách trình duyệt triển khai không phải lúc nào cũng thân thiện với lập trình viên. Trường hợp attribute và property value của phần tử <input> là ví dụ tiêu biểu. Vì tính tương thích ngược nên có lẽ khó thay đổi dễ dàng, nhưng hy vọng về sau sẽ có thiết kế nhất quán hơn

[superwoou]

https://emewjin.github.io/html-attribute-dom-property/

[superwoou]

Có vẻ attribute và property đã bị dịch chung thành cùng một “thuộc tính” rồi..