เมธอด getAttributeNode() ใน HTML DOM

เมธอด getAttributeNode() ใน HTML DOM ใช้สำหรับคืนค่าโหนดแอตทริบิวต์ (attribute node) ขององค์ประกอบที่ระบุ เป็นออบเจ็กต์ Attr โดยใช้คุณสมบัติและเมธอดต่างๆ ของออบเจ็กต์ Attr สามารถจัดการแอตทริบิวต์ได้

ไวยากรณ์ (Syntax)

element.getAttributeNode(attributeName)

attributeName (บังคับ) เป็นสตริงระบุชื่อแอตทริบิวต์ที่ต้องการคืนค่า

ตัวอย่าง

ตัวอย่างการดึงโหนดแอตทริบิวต์ href ของลิงก์:

<!DOCTYPE html>
<html>
<head>
<script>
  function getAttrNode() {
    var attrNode = document.getElementsByTagName("a")[0].getAttributeNode("href");
    var val = attrNode.value;
    document.getElementById("Sample").innerHTML = val;
  }
</script>
</head>
<body>
<h1>ตัวอย่าง getAttributeNode()</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>คลิกปุ่มด้านล่างเพื่อดูค่าแอตทริบิวต์ href ของลิงก์ข้างบน</p>
<button onclick="getAttrNode()">GET</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงลิงก์ "GOOGLE" และปุ่ม "GET"

เมื่อคลิกปุ่ม "GET" จะแสดง "https://www.google.com"

คำอธิบายโค้ด

สร้างลิงก์ <a href="https://www.google.com">GOOGLE</a>
สร้างปุ่ม "GET" เรียกใช้ getAttrNode() เมื่อคลิก
ฟังก์ชัน getAttrNode() ดึงแท็ก <a> ตัวแรกด้วย getElementsByTagName("a")[0]
เรียก getAttributeNode("href") ได้ออบเจ็กต์ Attr แทนแอตทริบิวต์ href เก็บใน attrNode
อ่านค่าด้วย attrNode.value เก็บใน val แล้วแสดงในย่อหน้า id="Sample"