เมธอด HTML DOM getElementById() ใช้สำหรับส่งคืนองค์ประกอบโดยส่ง id เป็นพารามิเตอร์ไปยังฟังก์ชันนี้ เป็นวิธีหนึ่งที่ใช้บ่อยที่สุดและง่ายที่สุดในการรับองค์ประกอบเพื่อจัดการในภายหลัง หากไม่มี Id ที่ระบุ ระบบจะส่งคืน NULL
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอด getElementById() -
document.getElementById(elementID)
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับเมธอด getElementById() -
<!DOCTYPE html>
<html>
<head>
<script>
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
}
</script>
</head>
<body>
<h1>getElementById() example</h1>
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
<p>Click the below button to apply styling to the above link</p>
<button onclick="changeLink()">CHANGE</button>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม CHANGE -
ในตัวอย่างข้างต้น −
ขั้นแรก เราได้สร้างองค์ประกอบสมอที่มีรหัส “LINK1” และค่าแอตทริบิวต์ href เป็น “https://www.google.com”
<a id="LINK1" href="https://www.google.com">GOOGLE</a>
จากนั้นเราได้สร้างปุ่ม CHANGE ที่จะรัน changeLink() เมื่อผู้ใช้คลิก -
<button onclick="changeLink()">CHANGE</button>
เมธอด changeLink() รับองค์ประกอบ โดยใช้เมธอดเอกสาร getElementById() และส่งผ่าน id องค์ประกอบ เป็นพารามิเตอร์ จากนั้นจะส่งคืนองค์ประกอบที่เรากำหนดให้กับตัวแปร l การใช้แอตทริบิวต์ global style เราตั้งค่าคุณสมบัติ color และ fontSize สำหรับแท็ก anchor -
function changeLink() {
var l = document.getElementById("LINK1");
l.style.color = "red";
l.style.fontSize="40px";
} 