เมธอด HTML DOM getAttribute() ใช้สำหรับรับหรือตั้งค่าแอตทริบิวต์ที่เกี่ยวข้องกับองค์ประกอบ HTML เฉพาะ หากองค์ประกอบไม่มีแอตทริบิวต์ที่กำหนด ก็จะส่งคืนค่าว่างหรือสตริงว่าง
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอด getAttribute() -
element.getAttribute(attributename)
ที่นี่ชื่อแอตทริบิวต์เป็นประเภทสตริงและเป็นพารามิเตอร์บังคับ หมายถึงชื่อแอตทริบิวต์ที่คุณต้องการรับค่า
ตัวอย่าง
ให้เราดูตัวอย่างของเมธอด 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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม GET -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างองค์ประกอบจุดยึดโดยตั้งค่าแอตทริบิวต์ href เป็น https://www.google.com -
<a href="https://www.google.com">GOOGLE</a>
จากนั้นเราได้สร้างปุ่ม GET ที่จะรันเมธอด getAttr() เมื่อผู้ใช้คลิก -
<button onclick="getAttr()">GET</button>
เมธอด getAttr() ใช้คุณสมบัติ getElementByTagName() ของอ็อบเจ็กต์เอกสารเพื่อรับองค์ประกอบ แรกในเอกสาร HTML ของเรา
จากนั้นรับค่าแอตทริบิวต์ href โดยใช้เมธอด getAttribute() และกำหนดค่านั้นให้กับตัวแปร a ค่านี้จะแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML -
function getAttr() {
var a = document.getElementsByTagName("a")[0].getAttribute("href");
document.getElementById("Sample").innerHTML = a;
} 