Phương thức createAttribute() trong JavaScript
Bùi Tấn Lực - 879
- 14/09/2025
Chức năng của Phương thức createAttribute() trong JavaScript
Phương thức createAttribute() trong JavaScript dùng để tạo đối tượng attr đại diện cho một thuộc tính, đối tượng này cho phép gắn value cho thuộc tính, sau đó dùng phương thức setAttributeNode() để gắn thuộc tính và phần tử HTML.
Cú pháp của Phương thức createAttribute() trong JavaScript
const doituongattr = document.createAttribute("thuoctinh");
thuoctinh: Thuộc tính trong thẻ HTML.
doituongattr: Đối tượng attr chứa thuộc tính HTML và dùng để thêm giá trị vào.
Code Phương thức createAttribute() trong JavaScript
Phương thức createAttribute() href trong JavaScript
Tạo đối tượng attr đại diện cho thuộc tính href:
const attr = document.createAttribute("href");
<a id="aid">Liên kết</a>
<p>Click vào nút THÊM HREF để thêm thuộc tính href</p>
<button onclick="themHref()">THÊM HREF</button>
<script>
function themHref() {
// Tạo dối tượng attr đại diện cho thuộc tính href
const attr = document.createAttribute("href");
// Tạo giá trị cho thuộc tính href
attr.value = "https://webmoi.vn/phuong-thuc-createattribute-href-trong-javascript/";
// Gắn thuộc tính href vào phần tử id aid
document.getElementById("aid").setAttributeNode(attr);
}
</script>
Phương thức createAttribute() style trong JavaScript
Tạo đối tượng attr đại diện cho thuộc tính style:
<div id="divid">Đổi màu sau khi click</div>
<p>Click vào nút THÊM STYLE để thêm thuộc tính style</p>
<button onclick="themStyle()">THÊM STYLE</button>
<script>
function themStyle() {
// Tạo dối tượng attr đại diện cho thuộc tính style
const attr = document.createAttribute("style");
// Tạo giá trị cho thuộc tính style
attr.value = "color:red";
// Gắn thuộc tính style vào phần tử id divid
document.getElementById("divid").setAttributeNode(attr);
}
</script>
Phương thức createAttribute() class trong JavaScript
Tạo đối tượng attr đại diện cho thuộc tính class:
<!DOCTYPE html>
<html>
<head>
<title>Phương thức createAttribute() class trong JavaScript</title>
<style>
.divclass{color:red}
</style>
</head>
<body>
<div id="divid">Đổi màu sau khi click</div>
<p>Click vào nút THÊM CLASS để thêm thuộc tính class</p>
<button onclick="themClass()">THÊM CLASS</button>
<script>
function themClass() {
// Tạo dối tượng attr đại diện cho thuộc tính class
const attr = document.createAttribute("class");
// Tạo giá trị cho thuộc tính class
attr.value = "divclass";
// Gắn thuộc tính class vào phần tử id divid
document.getElementById("divid").setAttributeNode(attr);
}
</script>
</body>
</html>
Khi Nào Nên Dùng createAttribute() Trong JavaScript?
createAttribute() phù hợp khi cần tạo một đối tượng thuộc tính riêng trước khi gắn nó vào phần tử HTML. Cách làm này hữu ích trong những tình huống cần thao tác thuộc tính theo từng bước, đặc biệt khi muốn tách quá trình tạo thuộc tính khỏi quá trình cập nhật DOM.
Trường hợp nên dùng createAttribute()
Nên dùng createAttribute() khi cần tạo một thuộc tính mới và muốn thiết lập giá trị trước khi đưa thuộc tính đó vào phần tử. Sau khi tạo, thuộc tính có thể được gán giá trị thông qua nodeValue rồi thêm vào phần tử bằng setAttributeNode().
const input = document.querySelector("input");
const attribute = document.createAttribute("data-type");
attribute.value = "email";
input.setAttributeNode(attribute);
Cách này đặc biệt dễ hiểu khi chương trình phải xử lý thuộc tính như một đối tượng riêng. Tuy nhiên, với những thao tác đơn giản, việc tạo trực tiếp một đối tượng thuộc tính thường không cần thiết.
Khi nào nên dùng setAttribute() thay cho createAttribute()?
Nếu mục tiêu chỉ là thêm hoặc thay đổi giá trị của một thuộc tính, setAttribute() thường là lựa chọn ngắn gọn và trực tiếp hơn. Phương thức này thực hiện việc tạo hoặc cập nhật thuộc tính trong một bước, không cần tạo Attr riêng.
const input = document.querySelector("input");
input.setAttribute("data-type", "email");
Vì vậy, có thể ưu tiên setAttribute() cho các thao tác DOM thông thường. createAttribute() chỉ nên được sử dụng khi cần làm việc trực tiếp với đối tượng thuộc tính và muốn kiểm soát riêng quá trình tạo, thiết lập giá trị và gắn thuộc tính vào phần tử.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức createAttribute() trong JavaScript.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
