Phân biệt Attribute - Property trong JavaScript và HTML

Attribute và Property là hai thuật ngữ cực kỳ dễ gây nhầm lẫn với các bạn developer ngay cả những người đã có vài năm kinh nghiệm làm việc. Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu sự khác nhau giữa hay thuật ngữ này.
Hai thuật ngữ này được dịch sang tiếng Việt như sau:

Attribute: Thuộc Tính.
Property: Đặc Tính.

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:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <input id="test-id" name="test-name" type="text" value="Test Value">
</body>
</html>

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.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="test-id" name="test-name" type="test-type" value="Test Value" />

    <h3>Attribute:</h3>
    Giá trị của attribute <b>id</b>: 
    <button onclick="showValueOfIdAttribute()">Hiển thị</button>
    <br>
    Giá trị của attribute <b>name</b>: 
    <button onclick="showValueOfNameAttribute()">Hiển thị</button>
    <br>
    Giá trị của attribute <b>type</b>: 
    <button onclick="showValueOfTypeAttribute()">Hiển thị</button>
    <br>
    Giá trị của attribute <b>value</b>: 
    <button onclick="showValueOfValueAttribute()">Hiển thị</button>
    <br>
    <h3>Propety:</h3>
    Giá trị của property <b>id</b>: 
    <button onclick="showValueOfIdProperty()">Hiển thị</button>
    <br>
    Giá trị của property <b>name</b>: 
    <button onclick="showValueOfNameProperty()">Hiển thị</button>
    <br>
    Giá trị của property <b>type</b>: 
    <button onclick="showValueOfTypeProperty()">Hiển thị</button>
    <br>
    Giá trị của property <b>value</b>: 
    <button onclick="showValueOfValueProperty()">Hiển thị</button>
    <br>


    <script type="text/javascript">
    var inputElement = document.getElementById('test-id');
    function showValueOfIdAttribute() {
        alert("Giá trị của attribute ID:\n\n" + inputElement.getAttribute('id'));
    }
    function showValueOfTypeAttribute() {
        alert("Giá trị của attribute TYPE:\n\n" + inputElement.getAttribute('type'));
    }
    function showValueOfNameAttribute() {
        alert("Giá trị của attribute NAME:\n\n" + inputElement.getAttribute('name'));
    }
    function showValueOfValueAttribute() {
        alert("Giá trị của attribute VALUE:\n\n" + inputElement.getAttribute('value'));
    }
    function showValueOfIdProperty() {
        alert("Giá trị của property ID\n:\n" + inputElement.id);
    }
    function showValueOfTypeProperty() {
        alert("Giá trị của property TYPE\n:\n" + inputElement.type);
    }
    function showValueOfNameProperty() {
        alert("Giá trị của property NAME\n:\n" + inputElement.name);
    }
    function showValueOfValueProperty() {
        alert("Giá trị của property VALUE\n:\n" + inputElement.value);
    }
    </script>
</body>
</html>

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