So sánh html attribute và dom property năm 2024

Attributes are defined by Html, whereas properties are defined by the DOM. Attribute initialize DOM properties, once the initialization complete the attribute job is done. Property value can change, whereas attribute value can’t.

Angular recommends property binding instead of attribute binding. Attribute binding only used when you don’t have a corresponding property for that attribute.

If youwant to bind a value to attribute by angular use below syntax attr.propertyName

• Interpolation and Property binding deal with binding component class properties to HTML element properties and NOT attributes.
• But not all HTML element attributes have corresponding properties. For ex, colspan attribute does not have a corresponding property.
• In situations like this, we want to be able to bind to HTML element attributes.
• Hence angular provides attributes binding.

Css Class Binding:

Hello Brother

When we use attribute binding it remove existing css class binding.

Style Binding:

Event Binding:

ngClass

Canonical Form:

canical form

Lưu ý: Theo kinh nghiệm của bản thân tác giả thì các bạn không nên cố gắng sử dụng thuật ngữ tiếng Việt cho hai thuật ngữ này vì bản thân chúng cũng rất dễ gây nhầm lẫn và cũng không phản ánh hết được ý nghĩa của từng thuật ngữ trong lập trình nói chung và trong phạm vi của bài viết này nói riêng.

1. Attribute của HTML

Đầu tiên bạn đọc cần hiểu rõ rằng trong document của HTML chỉ có khái niệm attribute của phần tử và không có khái niệm property của phần tử.

Ví dụ với mã HTML như sau:

Thì phần tử input của trang sẽ có các thuộc tính như id, name, type, value.

2. Attribute và Property của DOM Object

Khi trình duyệt tải mã HTML của trang, thì nó sẽ tạo ra các đối tượng DOM Object thông qua ngôn ngữ JavaScript. Các DOM Object này sẽ thực hiện việc hình mẫu hóa các phần tử trên trang HTML. Ví dụ với phần tử input sẽ có một đối tượng DOM được tạo ra bởi trình duyệt tương ứng với nó.

Ví dụ với đoạn mã HTML ở trên bạn chạy đoạn mã HTML như sau:

var inputElement = document.getElementById("test-id");
alert(inputElement);

Bạn sẽ thấy trình duyệt hiển thị thông báo như sau:

Với ví dụ trên thì biến inputElement là một DOM Object tạo bởi JavaScript và đối tượng này được dùng để gắn với phần tử input trong HTML. Biến inputElement này có cả hai Attribute và Property. Và sự khác nhau giữa attribute và property nằm ở chỗ:

+ Attribute của DOM object phản ánh (và liên hệ chặt chẽ với) attribute của phần tử HTML. + Ngược lại, property của DOM object được quy định bởi JavaScript và không hẳn liên quan tới phần tử HTML.

Ví dụ đối tượng inputElement của JavaScript ở trên còn có các property khác như children, childNodes, childElementCount, baseURI.... Các property vừa được liệt kê đều là các public property hay nói cách khác bạn hay bất cứ developer này có thể truy cập giá trị của các property này trực tiếp:

alert(inputElement.children)
alert(inputElement.childElementCount)
alert(inputElement.baseURI)

Một số property của đối tượng DOM trong JavaScript có thể vẫn liên quan tới nội dung của phần tử HTML (ví dụ như childElementCount sẽ đếm số phần tử bên trong phần tử hiện tại), tuy nhiên rất nhiều property không liên quan trực tiếp tới nội dung của phần tử tương ứng (ví dụ thuộc tính baseURI như ở ví dụ trên). Bạn nhớ rằng phần tử HTML không có property mà chỉ có attribute. Ngược lại DOM Object có cả attribute và property.

Chúng ta sẽ tìm hiểu kỹ hơn về sự khác biệt này thông qua ví dụ cụ thể được trình bày ở phần tiếp theo ngay sau đây.

    
    


    
    
Attribute:
    Giá trị của attribute id: 
    Hiển thị
    

    Giá trị của attribute name: 
    Hiển thị
    

    Giá trị của attribute type: 
    Hiển thị
    

    Giá trị của attribute value: 
    Hiển thị
    

    
Propety:
    Giá trị của property id: 
    Hiển thị
    

    Giá trị của property name: 
    Hiển thị
    

    Giá trị của property type: 
    Hiển thị
    

    Giá trị của property value: 
    Hiển thị
    

    

Sau đó mở trang HTML trên trình duyệt bạn sẽ thấy kết quả như sau:

Bây giờ bạn click lần lượt vào từng button bên cạnh dòng chữ để so sánh bạn sẽ thấy kết quả như sau: Giá trị của attribute type: test-type Giá trị của attribute property: text

Bạn có nhận ra sự khác biệt? Ở trên attribute type trả về là test-type giống với giá trị attribute type của phần tử HTML. Ngược lại giá trị property type trả về là text. Điều này diễn ra bởi vì giá trị property type được quy định bởi JavaScript thay vì lệ thuộc hoàn toàn vào giá trị có trong mã lệnh HTML mà developer nhập vào.

Tiếp theo bạn thay đổi giá trị trong trường input thành Test Value 123 và click lần lượt vào từng button bên cạnh dòng chữ. Giá trị của attribute value: Test Value Giá trị của property value: Test Value 123

Một lần nữa bạn thấy rằng giá trị attribute value phản ánh đúng với giá trị ban đầu trong mã HTML trong khi đó giá trị của property value lại phản ánh giá trị hiện tại của trường input. Xin cảm ơn và hẹn gặp lại các bạn trong bài viết tiếp theo!

Bài viết được tham khảo tại: https://www.codehub.vn/Phan-Biet-Attribute-va-Property-trong-JavaScript-va-HTML