เมธอด getAttribute() ใน HTML DOM ใช้สำหรับดึงค่าแอตทริบิวต์ที่เชื่อมโยงกับองค์ประกอบ HTML เฉพาะเจาะจง หากองค์ประกอบไม่มีแอตทริบิวต์ที่ระบุ จะคืนค่า null หรือสตริงว่าง
ไวยากรณ์ (Syntax)
element.getAttribute(attributeName)attributeName (บังคับ) เป็นสตริงระบุชื่อแอตทริบิวต์ที่ต้องการค่า
ตัวอย่าง
ตัวอย่างการดึงค่าแอตทริบิวต์ href ของลิงก์:
<!DOCTYPE html>
<html>
<head>
<script>
function getAttr() {
var href = document.getElementsByTagName("a")[0].getAttribute("href");
document.getElementById("Sample").innerHTML = href;
}
</script>
</head>
<body>
<h1>ตัวอย่าง getAttribute()</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>คลิกปุ่มด้านล่างเพื่อดูค่าแอตทริบิวต์ href ของลิงก์ข้างบน</p>
<button onclick="getAttr()">GET</button>
<p id="Sample"></p>
</body>
</html>ผลลัพธ์
เมื่อโหลดหน้าเว็บจะแสดงลิงก์ "GOOGLE" และปุ่ม "GET"
เมื่อคลิกปุ่ม "GET" จะแสดง "https://www.google.com"
คำอธิบายโค้ด
- สร้างลิงก์
<a href="https://www.google.com">GOOGLE</a> - สร้างปุ่ม "GET" เรียกใช้
getAttr()เมื่อคลิก - ฟังก์ชัน
getAttr()ดึงแท็ก<a>ตัวแรกด้วยgetElementsByTagName("a")[0] - เรียก
getAttribute("href")ได้ค่าสตริงโดยตรง เก็บในhrefแล้วแสดงในย่อหน้าid="Sample"
ความแตกต่างจาก getAttributeNode():getAttribute()คืนค่าสตริงโดยตรง ส่วนgetAttributeNode()คืนค่าออบเจ็กต์ Attr ที่มีคุณสมบัติและเมธอดเพิ่มเติมสำหรับจัดการแอตทริบิวต์ขั้นสูง
