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

เมธอด getElementById() ใน HTML DOM ใช้สำหรับคืนค่าองค์ประกอบเดียวโดยส่ง id เข้าไปเป็นพารามิเตอร์ เป็นหนึ่งในเมธอดที่ใช้บ่อยที่สุดและง่ายที่สุดสำหรับการเข้าถึงองค์ประกอบเพื่อจัดการต่อ หาก id ที่ระบุไม่มีอยู่ จะคืนค่า NULL

ไวยากรณ์ (Syntax)

document.getElementById(elementID)

ตัวอย่าง

ตัวอย่างการเปลี่ยนสไตล์ลิงก์ (anchor) ด้วย id:

<!DOCTYPE html>
<html>
<head>
<script>
  function changeLink() {
    var link = document.getElementById("LINK1");
    link.style.color = "red";
    link.style.fontSize = "40px";
  }
</script>
</head>
<body>
<h1>ตัวอย่าง getElementById()</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนสไตล์ลิงก์ข้างบน</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html>

ผลลัพธ์

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

เมื่อคลิกปุ่ม "CHANGE" ลิงก์จะเปลี่ยนเป็นตัวอักษรสีแดง ขนาด 40px

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

• สร้างแท็กลิงก์ <a id="LINK1" href="https://www.google.com">GOOGLE</a>
• สร้างปุ่ม "CHANGE" เรียกใช้ changeLink() เมื่อคลิก
• ฟังก์ชัน changeLink() ดึงองค์ประกอบด้วย getElementById("LINK1") เก็บใน link
• ตั้งค่าสไตล์ผ่าน link.style.color และ link.style.fontSize