Tài Liệu về Attribute và Data trong Thẻ HTML
1. Khái Niệm
1.1. Attribute (Thuộc Tính)
Trong HTML, "attribute" là các thông số được thêm vào các thẻ để mô tả hoặc xác định các đặc tính của phần tử đó. Attribute thường được đặt trong cặp cặp dấu nháy kép (" ") và có thể chứa giá trị để định rõ thông số của nó. Mỗi loại phần tử có thể chứa các attribute khác nhau.
Ví dụ:
<a href="https://www.example.com" title="Trang chủ">Đây là một liên kết</a>
Trong ví dụ này, href và title là các attribute của thẻ <a>.
1.2. Data Attributes (Thuộc Tính Dữ Liệu)
"Data attributes" là một loại đặc biệt của attribute được thiết kế để chứa dữ liệu tùy chỉnh không ảnh hưởng đến việc hiển thị của phần tử. Chúng bắt đầu bằng tiền tố "data-" và sau đó là tên của dữ liệu bạn muốn lưu trữ.
Ví dụ:
<div data-author="John Doe" data-id="123">Nội dung của phần tử</div>
Trong đoạn mã trên, data-author và data-id là các data attributes của thẻ <div>.
2. Cách Khai Báo
2.1. Khai Báo Attribute
Khai báo attribute được thực hiện bằng cách thêm chúng vào trong thẻ mở của phần tử, sau tên của phần tử và trước dấu đóng ngoặc (">").
Ví dụ:
<img src="hinh-anh.jpg" alt="Mô tả hình ảnh">
Trong ví dụ trên, src và alt là các attribute của thẻ <img>.
2.2. Khai Báo Data Attributes
Khai báo data attributes tương tự như khai báo các attribute thông thường, nhưng với tiền tố "data-".
Ví dụ:
<div data-color="red" data-size="large">Nội dung của phần tử</div>
Trong ví dụ trên, data-color và data-size là các data attributes của thẻ <div>.
3. Cách Sử Dụng
3.1. Sử Dụng Attribute
Các attribute thường được sử dụng để cung cấp thông tin bổ sung về phần tử hoặc điều khiển cách mà phần tử hiển thị hoặc hoạt động.
Ví dụ:
<a href="https://www.example.com" target="_blank">Mở trang web mới</a>
Trong ví dụ trên, href là attribute xác định địa chỉ liên kết và target là attribute xác định cách mở liên kết.
3.2. Sử Dụng Data Attributes
Data attributes thường được sử dụng để lưu trữ thông tin tùy chỉnh mà JavaScript có thể sử dụng sau này.
Ví dụ:
<button data-action="submit-form">Gửi Form</button>
Trong đoạn mã trên, data-action có thể được sử dụng bởi JavaScript để xác định hành động cụ thể khi nút được nhấn.
Sure, dưới đây là ví dụ cụ thể về cách sử dụng JavaScript để gán và lấy giá trị từ attribute và data-attribute trong HTML:
1. Gán và Lấy Giá Trị từ Attribute:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript và Attribute</title>
</head>
<body>
<!-- Một ví dụ với attribute -->
<div id="exampleDiv" data-my-custom-attribute="Hello, World!" onclick="showAttributeValue()">
Nhấn vào đây để xem giá trị của attribute
</div>
<script>
// Lấy phần tử div
var myDiv = document.getElementById("exampleDiv");
// Lấy giá trị của attribute "data-my-custom-attribute"
var attributeValue = myDiv.getAttribute("data-my-custom-attribute");
// Hiển thị giá trị trong console
console.log("Giá trị của attribute là: " + attributeValue);
// Gán giá trị mới cho attribute
myDiv.setAttribute("data-my-custom-attribute", "Chào bạn!");
// Hiển thị giá trị mới trong console
console.log("Giá trị mới của attribute là: " + myDiv.getAttribute("data-my-custom-attribute"));
// Hàm hiển thị giá trị của attribute khi click
function showAttributeValue() {
alert("Giá trị của attribute là: " + myDiv.getAttribute("data-my-custom-attribute"));
}
</script>
</body>
</html>
2. Gán và Lấy Giá Trị từ Data Attribute:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript và Data Attribute</title>
</head>
<body>
<!-- Một ví dụ với data attribute -->
<button id="exampleButton" data-action="submit-form" onclick="performAction()">
Nhấn vào đây để thực hiện hành động
</button>
<script>
// Lấy phần tử button
var myButton = document.getElementById("exampleButton");
// Lấy giá trị của data attribute "data-action"
var dataAttributeValue = myButton.getAttribute("data-action");
// Hiển thị giá trị trong console
console.log("Giá trị của data attribute là: " + dataAttributeValue);
// Gán giá trị mới cho data attribute
myButton.setAttribute("data-action", "update-profile");
// Hiển thị giá trị mới trong console
console.log("Giá trị mới của data attribute là: " + myButton.getAttribute("data-action"));
// Hàm thực hiện hành động khi button được click
function performAction() {
alert("Thực hiện hành động: " + myButton.getAttribute("data-action"));
}
</script>
</body>
</html>
Trong cả hai ví dụ, chúng ta sử dụng phương thức getAttribute để lấy giá trị của attribute hoặc data attribute và setAttribute để gán giá trị mới. Hàm alert được sử dụng để hiển thị thông báo với giá trị của attribute hoặc data attribute.
–
Trong JavaScript, bạn có thể sử dụng phương thức querySelector kết hợp với closest để thực hiện việc tìm phần tử cha tương đương với hàm closest trong jQuery. Dưới đây là một ví dụ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>querySelector và closest</title>
</head>
<body>
<div class="grandparent">
<div class="parent">
<div class="child">
Nội dung của phần tử con
</div>
</div>
</div>
<script>
// Sử dụng querySelector để chọn phần tử con
var childElement = document.querySelector('.child');
// Sử dụng closest để tìm phần tử cha tương đương
var parentElement = childElement.closest('.parent');
// Hiển thị kết quả trong console
console.log("Phần tử cha tương đương là: ", parentElement);
</script>
</body>
</html>
Trong ví dụ này, querySelector được sử dụng để chọn phần tử con có lớp là "child". Sau đó, closest được sử dụng để tìm phần tử cha tương đương với lớp là "parent". Kết quả sẽ là phần tử cha được tìm thấy, và bạn có thể tiếp tục xử lý nó theo nhu cầu của mình.