HTML DOM getAttributeNode () được sử dụng để trả về một nút thuộc tính phần tử đã cho dưới dạng đối tượng Attr. Sử dụng các thuộc tính và phương thức đối tượng Attr khác nhau, bạn có thể thao tác các thuộc tính.
Cú pháp
Sau đây là cú pháp cho phương thức getAttributeNode () -
element.getAttributeNode(attributename)
Ở đây, tên thuộc tính là một tham số bắt buộc của kiểu chuỗi chỉ định tên thuộc tính mà chúng tôi muốn trả về.
Ví dụ
Chúng ta hãy xem một ví dụ về phương thức getAttributeNode () -
<!DOCTYPE html> <html> <head> <script> function getAttrNode(){ var a = document.getElementsByTagName("a")[0].getAttributeNode("href"); var val=a.value; document.getElementById("Sample").innerHTML = val; } </script> </head> <body> <h1>getAttributeNode() 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="getAttrNode()">GET</button> <p id="Sample"></p> </body> </html>
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút NHẬN -
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 getAttrNode () khi được người dùng nhấp vào -
<button onclick="getAttrNode()">GET</button>
Phương thức getAttrNode () sử dụng phương thức getElementByTagName () để lấy phần tử neo đầu tiên trong tài liệu HTML. Sau đó, nó sử dụng phương thức getAttributeNode (“href”) với giá trị tham số “href”.
Phương thức getAttributeNode () trả về một đối tượng attr đại diện cho thuộc tính href và gán nó cho biến a. Sau đó, chúng tôi gán giá trị thuộc tính href bằng cách sử dụng thuộc tính "value" của đối tượng attr cho biến val. Giá trị thuộc tính href thu được được hiển thị trong đoạn có id là "Sample" bằng cách sử dụng thuộc tính innerHTML -
function getAttrNode(){ var a = document.getElementsByTagName("a")[0].getAttributeNode("href"); var val=a.value; document.getElementById("Sample").innerHTML = val; }