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

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

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

Phương thức getAttributeNode() trong JavaScript dùng để ép thuộc tính của phần tử HTML thành một đối tượng attr rồi lấy value từ đối tượng đó, phương thức này được cho là đã lỗi thời và khuyên nên dùng phương thức getAttribute().

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

tenbien.getAttributeNode("thuoctinh").value;

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 cần lấy giá trị.

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

document.getElementById('hinhid').getAttributeNode("src").value;

<img id="hinhid" src="https://webmoi.vn/media/images/logo-web-moi.png" alt="Web Mới" title="Công ty Web Mới" data-id="35"  >
<script>
const hinhid = document.getElementById('hinhid');
// Lấy các thuộc tính mặc định
document.write("src: "+hinhid.getAttributeNode("src").value+"<br>"); // Kết quả: https://webmoi.vn/media/images/logo-web-moi.png
document.write("alt: "+hinhid.getAttributeNode("alt").value+"<br>"); // Kết quả: Web Mới
document.write("title: "+hinhid.getAttributeNode("title").value+"<br>"); // Kết quả: Công ty Web Mới
// Lấy các thuộc tính tự tạo
document.write("data-id: "+hinhid.getAttributeNode("data-id").value+"<br>"); // Kết quả: 35
</script>

Chạy Thử

Cách Làm Việc Với Attr Node Sau Khi Dùng getAttributeNode()

Kết quả của getAttributeNode() không phải là một chuỗi đơn thuần mà là một đối tượng Attr. Vì vậy, ngoài việc lấy giá trị thuộc tính, bạn còn có thể truy cập thêm thông tin của chính node thuộc tính và phần tử đang sở hữu nó.

Đọc tên và giá trị thuộc tính từ Attr Node

Sau khi lấy được Attr node, thuộc tính name cho biết tên thuộc tính, còn value chứa giá trị hiện tại. Cách này hữu ích khi cần xử lý cả tên lẫn giá trị thay vì chỉ lấy một chuỗi.

const element = document.querySelector("#product");
const attrNode = element.getAttributeNode("data-id");

if (attrNode) {
  console.log(attrNode.name);
  console.log(attrNode.value);
}

Nếu thuộc tính không tồn tại, getAttributeNode() có thể trả về null. Vì vậy, nên kiểm tra kết quả trước khi truy cập name hoặc value để tránh lỗi khi chương trình chạy.

Kiểm tra phần tử sở hữu thuộc tính bằng ownerElement

Attr node còn có ownerElement, cho biết phần tử HTML đang chứa thuộc tính đó. Điều này đặc biệt hữu ích khi một đoạn xử lý nhận được Attr node nhưng chưa biết nó thuộc về phần tử nào.

const element = document.querySelector("#product");
const attrNode = element.getAttributeNode("data-id");

if (attrNode) {
  console.log(attrNode.ownerElement);
}

Nhờ ownerElement, bạn có thể đi ngược từ thuộc tính về phần tử tương ứng mà không cần tìm kiếm lại phần tử trong DOM.

Khi nào nên dùng getAttributeNode() thay cho getAttribute()?

Nếu chỉ cần lấy giá trị của một thuộc tính để sử dụng trong điều kiện, hiển thị hoặc xử lý dữ liệu, getAttribute() thường là lựa chọn đơn giản hơn. Ngược lại, getAttributeNode() phù hợp khi cần làm việc trực tiếp với đối tượng Attr, chẳng hạn như lấy tên thuộc tính hoặc xác định phần tử sở hữu thuộc tính.

Phương thức	Kết quả	Phù hợp khi
getAttribute()	Giá trị thuộc tính	Chỉ cần nội dung của thuộc tính
getAttributeNode()	Đối tượng Attr	Cần thao tác hoặc kiểm tra thông tin của node thuộc tính

Vì vậy, không nên dùng getAttributeNode() chỉ để lấy một giá trị nếu getAttribute() đã đáp ứng được nhu cầu. Chọn đúng phương thức sẽ giúp mã JavaScript ngắn gọn và dễ hiểu hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức getAttributeNode() 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 getAttributeNode() 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