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

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

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

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

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

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