Phương thức removeAttributeNode() trong JavaScript

• Bùi Tấn Lực
• 894
• 14/09/2025

Chức năng của Phương thức removeAttributeNode() trong JavaScript

Phương thức removeAttributeNode() trong JavaScript dùng để xóa đi một thuộc tính của phần tử HTML và xóa luôn giá trị của nó, phương thức này kết hợp với phương thức getAttributeNode() mà phương thức này đã lỗi thời, khuyên bạn hãy sử dụng phương thức removeAttribute().

Cú pháp của Phương thức removeAttributeNode() trong JavaScript

tenbien.removeAttributeNode(thuoctinh);

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

thuoctinh: Thuộc tính trên phần tử HTML đó, dùng tenbien.getAttributeNode("thuoctinh"); để lấy.

Code Phương thức removeAttributeNode() trong JavaScript

Phương thức removeAttributeNode() href trong JavaScript

Xóa thuộc tính href và cả giá trị của nó:

aid.removeAttributeNode(attr);

<a id="aid" href="https://webmoi.vn/phuong-thuc-removeattribute-href-trong-javascript/" >Phương thức removeAttribute() href trong JavaScript</a>
<p>Click vào nút XÓA HREF để xóa thuộc tính href và cả giá trị của nó</p>
<button onclick="xoaHref()">XÓA HREF</button>
<script>
function xoaHref() {
 var aid = document.getElementById("aid"); 
  const attr = aid.getAttributeNode("href");
  aid.removeAttributeNode(attr);
}
</script>

Chạy Thử

Phương thức removeAttributeNode() id trong JavaScript

Xóa thuộc tính id và cả giá trị của nó:

<div id="divid">ID có màu đỏ</div>
<p>Click vào nút XÓA ID để xóa thuộc tính id và cả giá trị của nó, khi xóa id thì css bằng id sẽ không còn và màu đỏ sẽ mất</p>
<button onclick="xoaId()">XÓA ID</button>
<script>
function xoaId() {
 var divid = document.getElementById("divid"); 
 const attr = divid.getAttributeNode("id");
 divid.removeAttributeNode(attr);
}
</script>

Chạy Thử

Khi Nào Nên Sử Dụng removeAttributeNode() Trong JavaScript?

removeAttributeNode() phù hợp khi cần làm việc trực tiếp với đối tượng Attr đại diện cho một thuộc tính của phần tử. Phương thức này đặc biệt hữu ích trong những trường hợp mã JavaScript cần lấy thuộc tính thành một đối tượng trước khi loại bỏ nó.

Xóa thuộc tính khi cần thao tác trực tiếp với Attr

Khác với cách xóa thuộc tính thông thường bằng tên thuộc tính, removeAttributeNode() nhận vào một đối tượng Attr. Vì vậy, có thể lấy thuộc tính trước, kiểm tra hoặc xử lý đối tượng đó, sau đó mới thực hiện việc loại bỏ.

Cách tiếp cận này phù hợp khi chương trình cần kiểm soát rõ thuộc tính nào đang được thao tác thay vì chỉ truyền trực tiếp tên thuộc tính.

const button = document.querySelector("button");
const attr = button.getAttributeNode("disabled");

if (attr) {
    button.removeAttributeNode(attr);
}

Trong ví dụ trên, getAttributeNode() lấy đối tượng thuộc tính disabled. Sau khi xác nhận thuộc tính tồn tại, đối tượng này được truyền vào removeAttributeNode() để loại bỏ khỏi phần tử.

Kết hợp removeAttributeNode() với getAttributeNode()

Hai phương thức này có thể được sử dụng thành một quy trình: getAttributeNode() tìm và trả về đối tượng thuộc tính, còn removeAttributeNode() nhận chính đối tượng đó để xóa.

const input = document.querySelector("input");
const requiredAttr = input.getAttributeNode("required");

if (requiredAttr) {
    input.removeAttributeNode(requiredAttr);
}

Cách viết này dễ kiểm soát khi cần xác định thuộc tính có tồn tại trước khi xóa. Nếu không tìm thấy thuộc tính, getAttributeNode() trả về null, nhờ đó có thể kiểm tra trước và tránh thao tác không cần thiết.

Trường hợp nên dùng removeAttribute() thay thế

Nếu mục tiêu chỉ đơn giản là xóa một thuộc tính theo tên, removeAttribute() thường là lựa chọn trực tiếp và dễ đọc hơn. Phương thức này không yêu cầu lấy đối tượng Attr trước.

const input = document.querySelector("input");

input.removeAttribute("required");

Do đó, nên ưu tiên removeAttribute() cho các thao tác xóa thuộc tính thông thường. removeAttributeNode() phù hợp hơn khi mã cần làm việc với chính đối tượng thuộc tính được lấy từ 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 removeAttributeNode() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức removeAttributeNode() trong JavaScript
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 *

Bình luận, Hỏi đáp