1. Thuộc tính trong HTML và thuộc tính trong JavaScript
Thuộc tính HTML là một từ khóa đặc biệt được sử dụng bên trong thẻ mở của phần tử. Thuộc tính được sử dụng để kiểm soát hành vi của phần tử và cung cấp thông tin bổ sung cho phần tử. Thuộc tính nói chung là một cặp tên-giá trị được phân tách bằng dấu bằng(=).
Khi trình duyệt tải HTML và tạo đối tượng DOM từ nó, thì hầu hết các thuộc tính HTML tiêu chuẩn sẽ tự động trở thành thuộc tính của các đối tượng DOM. Nhưng mọi thuộc tính của một phần tử không trở thành thuộc tính đối tượng DOM. Chỉ thuộc tính tiêu chuẩn của phần tử mới trở thành thuộc tính đối tượng DOM.
Ta có thể dễ dàng hiểu khi truy cập các thuộc tính mà không có Dom có thể không chính xác. Và Js cung cấp cho ta một số phương pháp để truy cập và quản lý các thuộc tính đó. Bài này ta sẽ học 4 phương thức Js khác nhau để xử lý các thuộc tính trong DOM.
- hasAttribute()
- getAttribute()
- setAttribute()
- removeAttribute()
2. Kiểm tra thuộc tính
Phương thức element.hasAttribute() là một phương thức Js để kiểm tra xem một phần tử cụ thể có thuộc tính cụ thể hay không. Phương thức trả về một giá trị boolean . True nếu thuộc tính tồn tại trong phần tử và False nếu thuộc tính không tồn tại.
Cú pháp hasAttribute : const result = element.hasAttribute(attributeName);
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
</head>
<body>
<p name="my paragraph">Đây là một đoạn văn.</p>
<button onclick="check()">Kiểm tra thuộc tính!</button>
<script>
const element = document.querySelector("p");
function check() {
if (element.hasAttribute("name")) {
alert("Có thuộc tính "name" tồn tại!");
}
else {
alert("Không có thuộc tính "name" tồn tại!");
}
}
</script>
</body>
</html>
3. Lấy giá trị từ thuộc tính
Phương thức getAttribute() được sử dụng để lấy giá trị thuộc tính từ bất kỳ phần tử DOM nào. Phương thức này trả về giá trị của thuộc tính được chỉ định nếu thuộc tính không tồn tại thì giá trị trả về là null hoặc “”(chuỗi trống).
Cú pháp getAttribute : const value = element.getAttribute(attributeName);
propertyName là tên của thuộc tính và value là giá trị của thuộc tính.
Khi phương thức getAttribute được gọi trên phần tử HTML, phương thức viết thường đối số của nó trước khi tiếp tục.
Ví dụ:
<p>Nhấn vào nút để lấy id của nó.</p>
<button onclick="attr(this)" id="id1">Button 1</button>
<button onclick="attr(this)" id="id2">Button 2</button>
<script>
const element = document.querySelector("p");
function attr(elem) {
alert(elem.getAttribute("id"));
}
</script>
4. Đặt thuộc tính mới
Phương thức setAttribute() này được sử dụng để đặt thuộc tính mới và giá trị của nó cho phần tử DOM. Nếu thuộc tính đã tồn tại thì giá trị của thuộc tính được cập nhật với giá trị mới.
Cú pháp setAttribute : element.getAttribute(name, value);
Phương thức này nhận 2 đối số name và value . name là tên của thuộc tính và value là giá trị của thuộc tính.
Ví dụ:
<p>Đầu tiên hãy kiểm tra thuộc tính bằng cách nhấn vào nút, sau đó thêm thuộc tính và sau đó kiểm tra lại.</p>
<button onclick="checkAttr()">Kiểm tra thuộc tính!</button>
<button onclick="addAttr()">Thêm thuộc tính!</button>
<script>
const element = document.querySelector("p");
function checkAttr() {
alert(element.hasAttribute("name"));
}
function addAttr() {
element.setAttribute("name", "myParagraph");
}
</script>
5. Xóa thuộc tính
Phương thức removeAttribute() được sử dụng để xóa thuộc tính có tên cụ thể khỏi phần tử.
Cú pháp removeAttribute : const value = element.removeAttribute(attrName);
attriName là tên của thuộc tính.
Ví dụ:
<h2>"Phương thức removeAttribute "được sử dụng để xóa thuộc tính khỏi phần tử.</h2>
<button onclick="remove()" title="This is a button">Xóa tiêu đề!</button>
<script>
const element = document.querySelector("button");
function remove() {
element.removeAttribute("title");
}
</script>
6. Đặt thuộc tính Boolean
Bất kể giá trị thực của các thuộc tính Boolean là bao nhiêu, sự hiện diện của nó làm cho nó trở thành true . Vì vậy, trong khi đặt thuộc tính boolean , một số người chỉ chuyển tên thuộc tính, nhưng đó là một cách tiếp cận không chuẩn để thực hiện điều đó. Ta nên chỉ định một chuỗi rỗng ( “”) làm giá trị. Vì giá trị được chuyển đổi thành một chuỗi không được chuyển null thành giá trị vì nó sẽ được chuyển đổi thành “null”.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript - DOM setAttribute boolean</title>
</head>
<body>
<h2>Thêm thuộc tính boolean vào một phần tử bằng phương thức "setAttribute".</h2>
<button onclick="disableIt()">Tắt nút!</button>
<script>
const element = document.querySelector("button");
function disableIt() {
element.setAttribute("disabled", "");
}
</script>
</body>
</html>
