JavaScript getElementById(): เลือก Element ด้วย ID

เมธอด document.getElementById() ใช้เลือก Element จาก HTML DOM ตาม ID ที่ระบุ ID ต้องไม่ซ้ำในหน้าเว็บ

รูปแบบการใช้งาน

const element = document.getElementById("elementId");

ข้อผิดพลาดที่พบบ่อย

• Case-sensitive: ต้องเขียน getElementById (Id ตัวเล็ก) ไม่ใช่ getElementByID
• ไม่ต้องใส่ #: ใช้ getElementById("mainButton") ไม่ใช่ getElementById("#mainButton")

ตัวอย่าง: ปุ่ม Show/Hide ข้อความ

HTML (index.html)

<div>
  <h1>JavaScript getElementById()</h1>
  <p>Are you looking to learn more?</p>
  <span id="showMore">Read more</span>
  <p id="hiddenText">getElementById() is a JavaScript method...</p>
</div>
<script src="scripts.js"></script>

CSS (styles.css)

/* สไตล์พื้นฐาน ให้สวยงาม */

JavaScript (scripts.js)

// 1. ซ่อนข้อความตอนโหลดหน้า
var paragraph = document.getElementById("hiddenText");
paragraph.style.display = "none";

// 2. ฟังก์ชันสลับแสดง/ซ่อน
function toggleText() {
  if (paragraph.style.display === "none") {
    paragraph.style.display = "block";
  } else {
    paragraph.style.display = "none";
  }
}

// 3. Event listener สำหรับปุ่ม
var showButton = document.getElementById("showMore");
showButton.addEventListener("click", toggleText);

สรุป

getElementById() เลือก Element ได้แม่นยำเร็ว เนื่องจาก ID ไม่ซ้ำ ใช้สำหรับจัดการ Element เดียวเฉพาะเจาะจง