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 ObjectKhi 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:  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ỗ:
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ể 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. 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. Đầu tiên bạn hãy cập nhật lại đoạn mã HTML của trang phần nằm ngay dưới thẻ mở <body> thành như sau: <input id="test-id" name="test-name" type="test-type" value="Test Value"> <h3>Attribute:</h3> Gía trị của attribute <strong>id</strong>: <button onclick="showValueOfIdAttribute()">Hiển thị</button><br> Gía trị của attribute <strong>name</strong>: <button onclick="showValueOfNameAttribute()">Hiển thị</button><br> Gía trị của attribute <strong>type</strong>: <button onclick="showValueOfTypeAttribute()">Hiển thị</button><br> Gía trị của attribute <strong>value</strong>: <button onclick="showValueOfValueAttribute()">Hiển thị</button><br> <h3>Propety:</h3> Gía trị của property <strong>id</strong>: <button onclick="showValueOfIdProperty()">Hiển thị</button><br> Gía trị của property <strong>name</strong>: <button onclick="showValueOfNameProperty()">Hiển thị</button><br> Gía trị của property <strong>type</strong>: <button onclick="showValueOfTypeProperty()">Hiển thị</button><br> Gía trị của property <strong>value</strong>: <button onclick="showValueOfValueProperty()">Hiển thị</button><br>Tiếp theo ngay trước thẻ đóng <body> bạn nhúng thêm đoạn mã JavaScript như sau: <script type="text/javascript"> var inputElement = document.getElementById('test-id'); function showValueOfIdAttribute() { alert("Gía trị của attribute ID:\n\n" + inputElement.getAttribute('id')); } function showValueOfTypeAttribute() { alert("Gía trị của attribute TYPE:\n\n" + inputElement.getAttribute('type')); } function showValueOfNameAttribute() { alert("Gía trị của attribute NAME:\n\n" + inputElement.getAttribute('name')); } function showValueOfValueAttribute() { alert("Gía trị của attribute VALUE:\n\n" + inputElement.getAttribute('value')); } function showValueOfIdProperty() { alert("Gía trị của property ID\n:\n" + inputElement.id); } function showValueOfTypeProperty() { alert("Gía trị của property TYPE\n:\n" + inputElement.type); } function showValueOfNameProperty() { alert("Gía trị của property NAME\n:\n" + inputElement.name); } function showValueOfValueProperty() { alert("Gía trị của property VALUE\n:\n" + inputElement.value); } </script>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ữ Gía trị của attribute type: và Gía trị của property type: để so sánh bạn sẽ thấy kết quả như sau: Và: Bạn có nhận ra sự khác biệt? Ở trên giá trị attribute type của đối tượng inputElement trả về là test-type giống với giá trị attribute type của phần tử HTML input. Ngược lại giá trị Tiếp theo bạn thay đổi gía 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ữ Gía trị của attribute value: và Gía trị của value: để so sánh bạn sẽ thấy kết quả như sau: Và: 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. HTMLNhư các bạn đã biết HTML là ngôn ngữ đánh dấu siêu văn bản. Nó là một XML namespace, hay hiểu đại khái là tập các thẻ XML mà các trình duyệt quen mặt. Chúng ta nhìn vào một file HTML thì nhìn thấy text, còn trình duyệt nhìn vào sẽ thấy cây DOM. DOMViết tắt của Document Object Model, DOM là một cấu trúc dạng cây, cho trình duyệt biết cấu trúc của văn bản, từ đó thể hiện dưới dạng hình ảnh trực quan. Ví dụ, cho đoạn mã HTML như sau <section> <h2>Title</h2> <p>Content</p> </section>trình duyệt, hay máy xử lý siêu văn bản, biết rằng có một đoạn văn bản có tiêu đề 'Title' và nội dung là 'Content'. Như vậy, một siêu văn bản (hyper text document) được thể hiện dưới 2 dạng: Trình xử lý văn bản thông thường sẽ nhìn thấy như mã HTML, còn trình xử lý siêu văn bản, hay trình duyệt, sẽ nhìn thấy như cây DOM. Không chỉ dừng lại là một cấu trúc dữ liệu, nói đến DOM ta còn hiểu nó là một giao diện (programming interface) cho phép thao tác với các phần trong văn bản. Ví dụ đoạn mã sau, viết bằng Javascript, đặt nội dung của đoạn văn là 'nội dung đoạn văn' var paragraphs = document.getElementsByTagName('P'); var firstParagraph = paragraphs[0]; firstParagraph.innerText = 'Nội dung đoạn văn';Đáng lưu ý ở đây, đối tượng document (có phương thức getElementsByTagName()) không phải là một đối tượng sẵn có trong Javascript. Đây là một đối tượng của DOM, chính là nút gốc của cây DOM. Từ ví dụ trên, ta thấy DOM thể hiện và lưu giữ cấu trúc của văn bản, còn javascript được dùng để truy cập và sửa đổi cấu trúc này. Web (XML) API được hiểu là giao diện cho Javascript truy xuất DOM. Đến nay javascript gần như là con đường duy nhất để làm việc này. Vì sự gắn kết chặt chẽ như vậy nên các đối tượng DOM cùng các phương thức của chúng thường bị hiểu lầm là đối tượng và phương thức của JS.
1.Thuộc tính DOMChúng ta đã thấy các thuộc tính DOM tích hợp sẵn. Có rất nhiều. Nhưng về mặt kỹ thuật thì không ai giới hạn chúng ta, và nếu không đủ, chúng ta có thể thêm cái của mình. Các nút DOM là các đối tượng JavaScript thông thường. Chúng ta có thể thay đổi chúng. Ví dụ: hãy tạo một thuộc tính mới trong document.body: document.body.myData = { name: 'Caesar', title: 'Imperator' }; alert(document.body.myData.title); // ImperatorChúng ta cũng có thể thêm một phương thức: document.body.sayTagName = function() { alert(this.tagName); }; document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)Chúng ta cũng có thể sửa đổi các nguyên mẫu tích hợp sẵn như Element.prototype và thêm các phương thức mới vào tất cả các phần tử: Element.prototype.sayHi = function() { alert(`Hello, I'm ${this.tagName}`); }; document.documentElement.sayHi(); // Hello, I'm HTML document.body.sayHi(); // Hello, I'm BODYVì vậy, các thuộc tính và phương thức DOM hoạt động giống như các thuộc tính và phương thức của các đối tượng JavaScript thông thường:
|
