document getElementById vs document getElementsByClassName

เรามาดูความแตกต่างของ document.getElementById กับ document.getElementsByClassName กันครับ ว่าสองตัวนี้แตกต่างกันยังไง และมีวิธีใช้งานที่ต่างกันยังไง

เรามาดูความเหมือนกันก่อนครับ ว่ามันมีไว้สำหรับอะไร ซึ่งจากชื่อฟังก์ชันแล้ว getElement ก็คือการ get ค่าของ Element ออกมา

ส่วนสิ่งที่ต่างกันก็คือ document.getElementById จะเป็นการ getElement โดย id ออกมาเป็นการค้นหา Element โดยใช้ id และจะคืนมาออกมาเป็น HTML Element หนึ่งตัว เพราะ id มีได้แค่ 1 Element ในหน้า ๆ หนึ่ง

ส่วน document.getElementsByClassName เป็นการ getElement โดยใช้ name ออกมาเป็นการค้นหา Element โดยใช้ name และจะคืนค่าออกมาเป็น Array ของ HTML Element หลาย ๆ ตัว

ตัวอย่างการใช้งาน document.getElementById กับ document.getElementsByClassName

ตัวอย่างเรามี HTML ดังนี้

 
 	
 		doesystem1 		
name="test"
 	
 	
 		doesystem2 		
name="test"
 	
 	
 		doesystem3 		
name="test"
 	
 	
doesystem4
 		
id="testid"
 	
doesystem5
 
 

ตัวอย่างการใช้งาน document.getElementById และผลลัพธ์ที่ได้



ตัวอย่างการใช้งาน document.getElementsByClassName และผลลัพธ์ที่ได้



จากตัวอย่างเราใช้ getElementById และได้ค่า Element ออกมา 1 Element ส่วนการใช้ getElementsByClassName จะได้เป็น Array ออกมา หลาย Element และถ้าอยากได้ Element ไหนก็ให้ดึงเป็น index ออกมา

ข้อสังเกต ดึงแบบ id จะใช้ Element ส่วนดึงแบบ name จะใช้ Elements มี s กับ ไม่มี s