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

เมธอด getNamedItem() ใน HTML DOM ใช้สำหรับดึงโหนดแอตทริบิวต์ (attribute node) ที่มีชื่อตามที่ระบุ เป็นออบเจ็กต์ NamedNodeMap ต้องเรียกใช้เมธอดนี้ผ่านคุณสมบัติ attributes เนื่องจาก attributes คืนค่ารายการแอตทริบิวต์ทั้งหมด ซึ่งเราสามารถกรองแอตทริบิวต์เฉพาะตัวได้ด้วย getNamedItem()

ไวยากรณ์ (Syntax)

namedNodeMap.getNamedItem(nodeName)

nodeName (บังคับ) เป็นสตริงระบุชื่อโหนดที่ต้องการใน namedNodeMap

ตัวอย่าง

ตัวอย่างการดึงค่าแอตทริบิวต์ type ของช่องป้อนข้อมูล (input):

<!DOCTYPE html>
<html>
<body>
<h1>ตัวอย่าง getNamedItem()</h1>
USERNAME: <input type="text" name="USR">
<br><br>
<button onclick="attrValue()">GET</button>
<p id="Sample"></p>
<script>
  function attrValue() {
    var input = document.getElementsByTagName("input")[0];
    var val = input.attributes.getNamedItem("type").value;
    document.getElementById("Sample").innerHTML = "ค่าแอตทริบิวต์ type ของช่องป้อนข้อมูลคือ: " + val;
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงช่องป้อนข้อมูลและปุ่ม "GET"

เมื่อคลิกปุ่ม "GET" จะแสดง "ค่าแอตทริบิวต์ type ของช่องป้อนข้อมูลคือ: text"

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

• สร้างช่องป้อนข้อมูล <input type="text" name="USR">
• สร้างปุ่ม "GET" เรียกใช้ attrValue() เมื่อคลิก
• ฟังก์ชัน attrValue() ดึงอินพุตตัวแรกด้วย getElementsByTagName("input")[0]
• ใช้ attributes ได้ NamedNodeMap แล้วเรียก getNamedItem("type") เพื่อดึงแอตทริบิวต์ type เฉพาะตัว
• อ่านค่าด้วยคุณสมบัติ .value แล้วแสดงในย่อหน้า id="Sample"