Phương thức HTML DOM getAttribute ()

Phương thức HTML DOM getAttribute () được sử dụng để lấy hoặc thiết lập một thuộc tính được liên kết với một phần tử HTML cụ thể. Nếu phần tử không chứa thuộc tính đã cho thì thuộc tính này sẽ trả về null hoặc chuỗi trống.

Cú pháp

Sau đây là cú pháp cho phương thức getAttribute () -

element.getAttribute(attributename)

Ở đây, tên thuộc tính thuộc loại chuỗi và là một tham số bắt buộc. Nó biểu thị tên thuộc tính mà bạn muốn nhận giá trị.

Ví dụ

Chúng ta hãy xem một ví dụ về phương thức getAttribute () -

<!DOCTYPE html>
<html>
<head>
<script>
   function getAttr() {
      var a = document.getElementsByTagName("a")[0].getAttribute("href");
      document.getElementById("Sample").innerHTML = a;
   }
</script>
</head>
<body>
<h1>getAttribute() example</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>Get the href attribute value of the above link by clicking the below button</p>
<button onclick="getAttr()">GET</button>
<p id="Sample"></p>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Phương thức HTML DOM getAttribute ()

Khi nhấp vào nút NHẬN -

Phương thức HTML DOM getAttribute ()

Trong ví dụ trên -

Trước tiên, chúng tôi đã tạo một phần tử liên kết với giá trị thuộc tính href được đặt thành https://www.google.com -

<a href="https://www.google.com">GOOGLE</a>

Sau đó, chúng tôi đã tạo một nút GET sẽ thực thi phương thức getAttr () khi được người dùng nhấp vào -

<button onclick="getAttr()">GET</button>

Phương thức getAttr () sử dụng thuộc tính getElementByTagName () của đối tượng tài liệu để lấy phần tử đầu tiên trong tài liệu HTML của chúng tôi.

Sau đó, nó nhận giá trị thuộc tính href bằng phương thức getAttribute () và gán giá trị đó cho biến a. Giá trị này sau đó được hiển thị trong đoạn có id “Sample” sử dụng thuộc tính innerHTML -

function getAttr() {
   var a = document.getElementsByTagName("a")[0].getAttribute("href");
   document.getElementById("Sample").innerHTML = a;
}