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