Javascript

DOM in JS #5: Working with Attributes

DOM in JS 5 Working with Attributes

1. Mở đầu

Hiểu về DOM và cách hoạt động có nó trong Browser là một điều rất quan trọng để bạn có thể đi xa hơn trên con đường Front-end Developer.

Lên hôm nay mình xin được nói thêm về mối quan hệ giữa HTML Attributes & DOM Object’s Properties, để hiểu được tốt phần này mình suugest bạn lên đọc lại phần 1 để có được những khái niệm cơ bản nhất nhé.

Riêng ở bài này, bạn có thể hiểu là sau khi Browser được load xong thì nó sẽ hiển thị HTML đồng thời cho chúng ta một DOM objects. Mỗi HTML Element đều có attributes riêng của nó và những attribute này sẽ được tự động chuyển thành Properties của Element Node từ đó ta có thể access và modifier những thuộc tính này. Đồng thời, nếu HTML Element không có attribute chúng ta cần thì bạn hoàn toàn cũng có thể add thêm vào cho nó hay thậm trí là có thể add thêm cả Methods vào một HTML Element thông qua Element Node.

DOM sẽ cho bạn tất cả nhũng gì bạn cần để làm cho HTML element dễ modifier hơn ^^. Amazinggggggg…………

2. Chi tiết

Mối liên hệ giữa DOM và HTML Element’s Attribute.

Như ở bên trên mình cũng đã nói sơ qua về mới liên hệ này rồi, ở đây mình chỉ muốn bổ sung là HTML’s Attributes và DOM’s properties là mối quan hệ 1:1. Bạn sẽ có properties tương ứng với attributes khi mà Page được load xong (Đây là loại standard attributes) hay cũng như khi mà bạn định nghĩa properties mới thì đồng thời cũng tạo thêm attributes ( Đây là loại non-standard attributes). Chúng là referent đến nhau, việc này làm cho web trở lên linh hoạt thuận lợi cho việc custom.

Tất cả những khái niệm trên mình sẽ giải thích thêm ở phần dươi đồng thời sẽ nói thêm một số ngoại lệ và lấy ví dụ nữa nhé. Mình cũng mong là bạn sẽ F12 lên và thử ngay và lươn với Browser bạn đang sử dụng nhé.

Các phương thức có thể Modifier attribute thông qua DOM methods.

Để modifier attributes bạn có thông qua các thuộc tính mà DOM cung cấp, ở đây mình sẽ giới thiệu đến các bạn phương thức hay dùng nhất đó là element.getAttribute(name), element.setAttribute(name, value), element.hasAttribute(name), element.removeAttribute(name).

  • element.hasAttribute(name): Như tên của nó, thì đây là phương thức để check xem Element có attribute này có tồn tại hay không. Nếu có tồn tại thì phương thức này sẽ return true, trong trường hợp không có nó sẽ return false.
  • element.getAttribute(name): Đây là phương thức sẽ cho bạn get về giá trị của từng attribute cụ thể có trong Element node. Nếu trong trường hợp Attribute này có giá trị thì bạn sẽ nhận được giá trị này, trong trường hợp không có giá trị bạn sẽ nhận được giá trị là null.
  • element.setAttribute(name, value): Đây là phương thức dùng để update giá trị của Attribute nếu như nó đã có key từ trước và sẽ tạo mới trong trường hợp nó không tìm ra được key Attribute này. Nếu trong trường hợp name được truyền vào là Uppercase String nó sẽ được auto convert sang lowercase string, trong trường hợp bạn truyền vào string loại khác sẽ nhận được lỗi ví dụ: “123”, “&123”, 123, … Chú ý trong trường hợp case là Boolean attribute bạn chỉ cần set nó là string rỗng và khi muốn set nó về false thì sẽ remove nó đi.
  • element.removeAttribute(name): Phương thức này cho phép bạn có thể remove attribute của một Element chỉ định, hoặc trong trường hợp muốn set một attribute nào đó về false thì xóa nó đi thay vì set nó là false (False sẽ được convert thành string lên việc set một attribute về false là không có ý nghĩa). Trên đây là 4 cách mà bạn có thể Modifier attribute của một Element node, phía dưới là một phần ví dụ mà bạn có thể tham khảo.
const body = document.querySelector("body");
body.hasAttribute("name"); // false

body.setAttribute("name", "chamdev.com");
body.hasAttribute("name"); // true
body.getAttribute("name"); // chamdev.com

body.removeAttribute("name");
body.getAttribute("name"); // null

Sự khác nhau giữa standard attributes and non – standard attributes.

Đầu tiên standard attributes là gì? Đây là attributes có sẵn trong HTML element ví dụ như body element thì có id attribute, class attribute, … nhưng nó lại không có type attribute như vậy type attribute nếu có định nghĩa nó cũng chỉ là non-standard attributes. Nhưng Input Element lại có type attribute, class và id, … attribute ^^.

non-standard attributes là những attribute bạn định nghĩa nó thông qua các phương thức của DOM cho mà các key là khác standard attributes, bạn có thể tham khảo ở bảng này các standard attributes.

DOM properties và HTML attributes.

Để hiểu hơn về hai khái niệm standard attributesnon-standard attributes thì bạn nên liên hệ với DOM properties và HTML attributes.

Đối với DOM properties: Bạn có thể hiển nó như một object thông thường, nghĩa là bạn có thể thêm, sửa, xóa các thuộc tính cũng như là object thông thường. Nghĩa là sao? Bạn có thể xem ví dụ bên dưới là hiểu nhé.

const body = document.body;
body.id = "bodyId";
body.somethingAttribute = "attribute";
console.log("body.id", body.id); // bodyId
console.log("body.somethingAttribute", body.somethingAttribute); // attribute

Sau đó, bạn hãy xem phần Element nhé, chắc chắn kết quả sẽ là:

<body id="bodyId"></body>

Câu trả lời ở đây là bạn không thể set somethingAttribute thành attribute của Element được vì đơn giản nó không phải là một Standard Attribute ^^, nhưng lại hoàn toàn có thể làm như vậy với Id vì nó là một Standard attribute. Và nếu bạn muốn set somethingAttribute là một attribute thì phải dùng setAttribute() như mình đã giới thiệu ở trên nhé. Tiếp theo hãy nhìn ví dụ này:

<body id="bodyId" somethingAttributeElse="somethingAttributeElse"></body>

const body = document.body;
console.log("body.id", body.id); // bodyId
console.log("body.id", body.getAttribute("id")); // bodyId
console.log("body.id", body.setAttribute("id", "newId"));
console.log("body.id", body.getAttribute("id")); // newId
console.log("body.somethingAttributeElse", body.somethingAttributeElse); // undefined
console.log("body.somethingAttributeElse", body.getAttribute("somethingAttributeElse")); // somethingAttributeElse
console.log("body.somethingAttributeElse", body.setAttribute("somethingAttributeElse", "newSomethingAttributeElse"));
console.log("body.somethingAttributeElse", body.getAttribute("somethingAttributeElse")); // newSomethingAttributeElse

Và có lẽ bây giờ bạn lại càng nhìn thấy sự khác biệt rồi phải không nào? Kết luận: Nếu là standard attributes thì nó sẽ có mỗi liên hệ 1:1 với properties của DOM và cũng liên kết 1:1 với các phương thức của DOM. Còn nếu ngược lại nó chỉ là mối quan hệ 1:1 nhưng lại thông qua các phương thức modifier Attribute như mình đã trình bày ở trên.

Tương tự, bạn cũng có thể add thêm method cho các DOM hoặc ngay cả set global method. Dưới đây là ví dụ: (Hãy F12 lên và thử nhé)

Element.prototype.sayHi = function() {
  alert(`Hello, I'm ${this.tagName}`);
};

document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY

Đối với HTML attributes: Ở đây hãy hiểu là mỗi Element Html lại có các attribute khác nhau, sẽ có một số Element có những attri riêng của nó nhưng sẽ có một số Attribute giống nhau đó là id, class, … Hãy xem bảng này và như vậy Standard attribute là những cái đã được định nghĩa trong bảng còn nếu không thì nó là non-standard attribute.

Một số ngoại lệ.

Property-attribute synchronization: Đây là một ngoại lệ hay gặp nhất đối với value attribute của Input element, hãy xem ví dụ đoạn code bên dưới nhé:

let input = document.querySelector('input');

// attribute => property
input.setAttribute('value', 'text');
alert(input.value); // text

// NOT property => attribute
input.value = 'newValue';
alert(input.getAttribute('value')); // text (not updated!)

Đối với value nó được thiết kế để có thể giữ lại được giá trị ban đầu khi nó được set trong trường hợp user muốn lấy lại nó (reset).

data-* special attribute: Đây là một attribute được giới thiệu như là một giải pháp để viết Non-standard Atrribute để tránh gây nhầm lẫn về sau. Nhầm về sau như nào, nói nghe coi??? Ok, đặt giả sử là web của bạn nó sẽ chạy thêm 10-20 năm nữa và bạn có đặt tên một attribute là A và 12 năm sau HTML nó đưa ra một standard attri cũng là A. Đó, ^^ như vậy nó đã conflict với bạn rồi phải không nào. Vậy data-* sinh ra là để làm việc đó, gom tất cả Non-standard attri lại thành 1 kiểu duy nhất có data- ở đầu ^^. Và Dom cũng cho bạn một thuộc tính để làm việc kiểu này đó là dataset.

<body data-state="chamdev" data-about-web="chamdev.com"></body>

const body = document.body;
console.log(body.dataset.state); // chamdev
console.log(body.dataset.aboutWeb); // chamdev.com

3. Kết luận

Bạn thấy không những thứ tưởng trừng đơn giản nhưng nó lại được liên kết hết sức chặt chẽ với nhau. Qua phần này mình mong là bạn đã có thêm một sự hiểu biết thêm một chút về những gì bạn vẫn đang làm (Nếu bạn là một Web developer).

Series này còn khá dài, mình mới viết được hơn 1 nửa cơ mà vẫn còn thấy nó khá ít kiến thức. Mình mới chỉ nói được một phần chung nhất, khái niệm cơ bản thôi, mình mong bạn click vào cả đường link tham khảo hoặc research thêm để hiểu hơn nhé.

Cuối cùng, SEE YOU SOONNNN…..

4. Tham khảo

# Attributes and properties
# Understanding Relationships Between HTML Attributes & DOM Object’s Properties

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments