Phương thức setAttributeNode() trong JavaScript
Bùi Tấn Lực - 871
- 14/09/2025
Chức năng của Phương thức setAttributeNode() trong JavaScript
Phương thức setAttributeNode() trong JavaScript dùng để gắn một đối tượng attr chứa thuộc tính và giá trị của thuộc tính vào phần tử HTML.
Cú pháp của Phương thức setAttributeNode() trong JavaScript
tenbien.setAttributeNode(doituongthuoctinh);
tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.
doituongthuoctinh: Đối tượng thuộc tính có giá trị.
Code Phương thức setAttributeNode() trong JavaScript
Phương thức setAttributeNode() href trong JavaScript
Gắn thuộc tính href và phần tử HTML:
document.getElementById("aid").setAttributeNode(attr);
<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 setAttributeNode() style trong JavaScript
Gắn thuộc tính style vào phần tử HTML:
<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 setAttributeNode() class trong JavaScript
Gắn thuộc tính class vào phần tử HTML:
<!DOCTYPE html>
<html>
<head>
<title>Phương thức setAttributeNode() 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>
Cách tạo và gắn thuộc tính bằng setAttributeNode() trong JavaScript
setAttributeNode() cho phép gắn một đối tượng thuộc tính Attr vào phần tử HTML. Cách làm này phù hợp khi cần tạo thuộc tính trước, thiết lập giá trị rồi mới đưa thuộc tính đó vào phần tử.
Tạo đối tượng Attr bằng document.createAttribute()
Để tạo một thuộc tính mới, JavaScript cung cấp document.createAttribute(). Phương thức này nhận tên thuộc tính và trả về một đối tượng Attr tương ứng.
const attr = document.createAttribute("data-id");
Ở ví dụ trên, biến attr đại diện cho thuộc tính data-id. Lúc này thuộc tính mới chỉ được tạo ra trong JavaScript, chưa được gắn vào phần tử nào trên trang.
Gán giá trị cho Attr trước khi gắn vào phần tử
Sau khi tạo đối tượng Attr, có thể thiết lập giá trị thông qua thuộc tính value. Cách này giúp tách riêng bước tạo thuộc tính và bước xác định nội dung của thuộc tính.
const attr = document.createAttribute("data-id");
attr.value = "sp-101";
Sau thao tác trên, attr chứa tên thuộc tính là data-id và giá trị là sp-101. Đối tượng này có thể tiếp tục được sử dụng với một phần tử HTML.
Gắn Attr vào phần tử HTML bằng setAttributeNode()
Khi đối tượng Attr đã có đầy đủ tên và giá trị, dùng setAttributeNode() để gắn nó vào phần tử cần thao tác.
const box = document.querySelector(".box");
const attr = document.createAttribute("data-id");
attr.value = "sp-101";
box.setAttributeNode(attr);
Kết quả là phần tử được chọn sẽ có thêm thuộc tính data-id với giá trị sp-101. Điểm đáng chú ý là setAttributeNode() nhận trực tiếp đối tượng Attr, vì vậy cách sử dụng này đặc biệt hữu ích khi thuộc tính cần được tạo và xử lý như một đối tượng riêng trước khi gắn vào DOM.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Phương thức setAttributeNode() 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 *
