พื้นฐานการทำงานกับ DOM ใน JavaScript

ในบทเรียนที่ผ่านมาเราได้ศึกษาความสามารถพื้นฐานของภาษา JavaScript เริ่มจากบทเรียนนี้เราจะทำในสิ่งที่ JavaScript ออกแบบมาเพื่อทำจริง ๆ - นั่นคือการเปลี่ยนแปลงองค์ประกอบ HTML ของหน้าเว็บและตอบสนองต่อการกระทำของผู้ใช้ สคริปต์ของเราจะน่าตื่นเต้นและมีประโยชน์มากขึ้น

ในบทเรียนต่อ ๆ ไปทั้งหมด โค้ด JavaScript ของคุณจะต้องถูกวางไว้ด้านล่างของโค้ด HTML ที่มันต้องการเข้าถึง นั่นคือโครงสร้างโค้ดของคุณควรมีลักษณะดังต่อไปนี้:

<!DOCTYPE html>
<html>
	<head>
		
	</head>
	<body>
		แท็ก html ของคุณ
		
		<script>
			โค้ด JavaScript ของคุณ
		</script>
	</body>
</html>

หรือดังต่อไปนี้ หากคุณเขียนโค้ด JavaScript ในไฟล์แยกต่างหาก:

<!DOCTYPE html>
<html>
	<head>
		
	</head>
	<body>
		แท็ก html ของคุณ
		
		<script src="index.js"></script>
	</body>
</html>

ต่อไปเพื่อความกระชับ ฉันจะไม่นำเสนอโค้ดแบบเต็ม แต่จะระบุเพียงว่าต้องเขียนอะไรในส่วน HTML และอะไรในส่วน JavaScript

สร้างไฟล์ที่มีโครงสร้างโค้ดตามที่ระบุไว้