การเข้าถึงองค์ประกอบ DOM ใน JavaScript
ตอนนี้เราจะเรียนรู้วิธีการเข้าถึงองค์ประกอบ DOM ของหน้าเว็บ เพื่อที่จะดำเนินการใดๆ กับมัน ในภายหลัง
สมมติว่าเรามีปุ่มบางปุ่ม:
<input id="button" type="submit">
มาเริ่มต้นด้วยการได้ลิงก์ไปยังปุ่มนี้เก็บไว้ในตัวแปร
สำหรับสิ่งนี้ ควรใช้เมธอด querySelector
ของอ็อบเจกต์พิเศษ document เมธอดนี้
รับพารามิเตอร์เป็นตัวเลือก CSS (CSS selector) และ
ส่งคืนลิงก์ไปยังองค์ประกอบที่พบด้วยตัวเลือกนั้น
ปุ่มของเรามีแอตทริบิวต์ id ด้วย
ค่า button นั่นหมายความว่าเรา
สามารถค้นหาปุ่มนี้ด้วยตัวเลือก #button
มาเริ่มต้นกันเถอะ หาปุ่มของเราและบันทึก
ลิงก์ไปยังมันไว้ในตัวแปร:
let button = document.querySelector('#button');
console.log(button);
กำหนดให้มี 3 ย่อหน้า:
<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>
บันทึกลิงก์ไปยังแต่ละย่อหน้าในตัวแปรแยกกัน และแสดงเนื้อหาของแต่ละ ตัวแปรเหล่านี้ในคอนโซล
