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