Attribute(Attr)Property( Prop) 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ữ AttrProp này nhé

Attribute và Property khi dịch sang tiếng Việt:

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

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 và value.

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 (bạn có thể chạy sử dụng tab Console trên công cụ Developer Tools):

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:

Sự khác nhau giữa attribute và property JavaScript (và HTML) image 1

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.

Xem thêm : DOM là gì?

Sự khác nhau giữa attribute và property :

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 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 gì 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.

Viết câu trả lời

Drop Images

0 Bình luận