Hướng dẫn getattribute trong javascript

link // attribute alert[a.getAttribute['href']]; // #hello // property alert[a.href ]; // full URL in the form //site.com/page#hello

Nếu chúng ta cần giá trị của href hoặc bất kỳ thuộc tính nào khác chính xác như được viết trong HTML, chúng ta có thể sử dụng getAttribute.

5. Thuộc tính không chuẩn, tập dữ liệu

Khi viết HTML, chúng ta sử dụng rất nhiều thuộc tính chuẩn. Nhưng những gì về những cái không chuẩn, tùy chỉnh? Đầu tiên, hãy xem chúng có hữu ích hay không? Để làm gì?

Đôi khi các thuộc tính không chuẩn được sử dụng để chuyển dữ liệu tùy chỉnh từ HTML sang JavaScript hoặc để “đánh dấu” các phần tử HTML cho JavaScript.

Như thế này:

  // the code finds an element with the mark and shows what's requested
  let user = {
    name: "David",
    age: 25
  };

  for[let div of document.querySelectorAll['[show-info]']] {
    // insert the corresponding info into the field
    let field = div.getAttribute['show-info'];
    div.innerHTML = user[field]; // first David into "name", then 25 into "age"
  }

Ngoài ra, chúng có thể được sử dụng để tạo kiểu cho một phần tử.

Ví dụ: ở đây đối với trạng thái đơn hàng, thuộc tính order-state được sử dụng:

  /* styles rely on the custom attribute "order-state" */
  .order[order-state="new"] {
    color: green;
  }

  .order[order-state="pending"] {
    color: blue;
  }

  .order[order-state="canceled"] {
    color: red;
  }



  A new order.



  A pending order.



  A canceled order.

Tại sao sử dụng một thuộc tính được thích hợp hơn để có các lớp học như .order-state-new, .order-state-pending, order-state-canceled?

Bởi vì một thuộc tính sẽ thuận tiện hơn để quản lý. Trạng thái có thể được thay đổi dễ dàng như:

// a bit simpler than removing old/adding a new class
div.setAttribute['order-state', 'canceled'];

Nhưng có thể có một vấn đề có thể xảy ra với các thuộc tính tùy chỉnh. Điều gì sẽ xảy ra nếu chúng ta sử dụng một thuộc tính phi tiêu chuẩn cho các mục đích của mình và sau đó tiêu chuẩn giới thiệu nó và khiến nó hoạt động? Ngôn ngữ HTML vẫn tồn tại, nó phát triển và nhiều thuộc tính xuất hiện hơn để phù hợp với nhu cầu của các nhà phát triển. Có thể có những tác động không mong muốn trong trường hợp đó

Để tránh xung đột, cócác thuộc tínhdata- * .

Tất cả các thuộc tính bắt đầu bằng “data-” được dành riêng cho lập trình viên sử dụng. Chúng có sẵn trong thuộc tính dataset.

Ví dụ: nếu một thuộc tính elem có tên “data-about”, thuộc tính đó có sẵn dưới dạng elem.dataset.about.

Như thế này:

  alert[document.body.dataset.about]; // Elephants

Nhiều từ các thuộc tính như data-order-state trở thành lạc đà: dataset.orderState.

Đây là một ví dụ về “trạng thái đơn hàng” được viết lại:

  .order[data-order-state="new"] {
    color: green;
  }

  .order[data-order-state="pending"] {
    color: blue;
  }

  .order[data-order-state="canceled"] {
    color: red;
  }



  A new order.



  // read
  alert[order.dataset.orderState]; // new

  // modify
  order.dataset.orderState = "pending"; // [*]

Sử dụng thuộc tính data-* là một cách hợp lệ, an toàn để chuyển dữ liệu tùy chỉnh.

Xin lưu ý rằng chúng ta không chỉ có thể đọc mà còn có thể sửa đổi các thuộc tính dữ liệu. Sau đó CSS ​​cập nhật chế độ xem cho phù hợp: trong ví dụ trên, dòng cuối cùng [*]thay đổi màu thành màu xanh lam.

6. Tóm lược

• Đặc tính[Attributes] – là những gì được viết bằng HTML.
• Thuộc tính[Properties] – là những gì trong các đối tượng DOM.

Một so sánh nhỏ:

Các phương pháp để làm việc với các thuộc tính là:

• elem.hasAttribute[name] – để kiểm tra sự tồn tại.
• elem.getAttribute[name] – để nhận giá trị.
• elem.setAttribute[name, value] – để đặt giá trị.
• elem.removeAttribute[name] – để loại bỏ thuộc tính.
• elem.attributes là một tập hợp của tất cả các thuộc tính.

Đối với hầu hết các tình huống, việc sử dụng thuộc tính DOM là tốt hơn. Chúng ta chỉ nên tham khảo các thuộc tính khi các thuộc tính DOM không phù hợp với chúng ta, khi chúng ta cần các thuộc tính chính xác, ví dụ:

• Chúng ta cần một thuộc tính không chuẩn. Nhưng nếu nó bắt đầu bằng data-, thì chúng ta nên sử dụng dataset.
• Chúng ta muốn đọc giá trị “như được viết” trong HTML. Giá trị của thuộc tính DOM có thể khác nhau, ví dụ: thuộc tính href luôn là một URL đầy đủ và chúng ta có thể muốn lấy giá trị “gốc”.

Nguồn và tài liệu tiếng anh tham khảo:

• Mozilla developer
• W3schools
• Geeksforgeeks
• javascript.info

Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

• Group Facebook
• Fanpage
• Youtube
• Instagram
• Twitter
• Linkedin
• Pinterest
• Trang chủ

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!