getAttributeNames trong JavaScript và cách lấy danh sách tên thuộc tính của Element | Laptrinhcanban.com

getAttributeNames trong JavaScript và cách lấy danh sách tên thuộc tính của Element

Hướng dẫn cách sử dụng getAttributeNames trong JavaScript. Bạn sẽ biết cách sử dụng phương thức getAttributeNames để lấy danh sách tên thuộc tính đã được thiết lập của một Element sau bài học này.

getAttributeNames trong JavaScript

getAttributeNames trong JavaScript là một phương thức của Element Object, có tác dụng lấy danh sách tên thuộc tính đã được thiết lập của một Element.

Cú pháp sử dụng thuộc tính getAttributeNames trong JavaScript để lấy danh sách tên thuộc tính của Element như sau:

element.getAttributeNames()

Giá trị trả về của phương thức getAttributeNames sẽ là một Mảng trong Javascript chứa tất cả các tên thuộc tính đã được thiết lập trong Element.

Ví dụ, chúng ta có thể lấy danh sách tên thuộc tính được thiết lập và in lần lượt tên cũng như giá trị của chúng ra màn hình console như sau:

let element = document.getElementById('abc');

// Lấy danh sách tên thuộc tính đã được thiết lập
let names = element.getAttributeNames();

// In lần lượt các tên thuộc tính
for(let i = 0 ; i < names.length ; i++) {
// Lấy và in tên thuộc tính
console.log('Tên thuộc tính:' + names[i]);

// Lấy và in giá trị thuộc tính
console.log('Giá trị thuộc tính:' + element.getAttribute(names[i]));
}

Mã mẫu

Hãy cùng xem cách dùng getAttributeNames để lấy danh sách tên thuộc tính của Element như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng getAttribute </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>

<div id="box">
<a href="http://www.example.com/">Website</a>
<p class ="name">Shop mẹ và bé</p>
</div>

<button onClick="getElements();">Lấy toàn bộ thuộc tính</button>

<script>
function getElements(){
let element = document.getElementById('box').children[0];
let names = element.getAttributeNames();

for(let i = 0 ; i < names.length ; i++) {
console.log('Tên thuộc tính:' + names[i]);
console.log('Giá trị thuộc tính:' + element.getAttribute(names[i]));
}
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì Element con đầu tiên của Element có thuộc tính id="box" sẽ được lấy thông qua phương thức getElementById. Sau đó bằng cách dùng phương thức getAttributeNames, chúng ta lấy danh sách tên thuộc tính của Element này, và in ra màn hình console tên và giá trị tương ứng của chúng.

getAttributeNames trong JavaScript.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng getAttributeNames trong JavaScript để lấy danh sách tên thuộc tính của một Element rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.