วิธีใช้ getElementById Getter ของ JavaScript

คุณต้องการเลือกองค์ประกอบบนหน้าเว็บใน JavaScript หรือไม่ นั่นคือความพิเศษของ getElementById วิธีที่เรียกว่าราชาแห่งองค์ประกอบ getters ในจาวาสคริปต์

getElementById ให้คุณเลือกองค์ประกอบตามรหัสของมัน เป็นชื่อวิธีการที่อธิบายตนเองได้ค่อนข้างดีเมื่อคุณคิดถึงมัน

ในคู่มือนี้ เราจะพูดถึงสิ่งที่ getElementById คือ วิธีการทำงาน และเมื่อใดที่คุณควรใช้ในโค้ดของคุณ เราจะพูดถึงตัวอย่างของปุ่มข้อความ "แสดง/ซ่อน" ในการสาธิต document.getElementById ของเรา

มาดำน้ำกันเถอะ!

getElementById คืออะไร

getElementById() เป็นวิธีการเอกสารที่เลือกองค์ประกอบจาก HTML DOM บนหน้าตามแอตทริบิวต์ ID องค์ประกอบที่คุณระบุ

พิจารณารหัสต่อไปนี้:

index.html

<button id="mainButton">This is a button!</button>

scripts.js

const button = document.getElementById("mainButton");

ในโค้ด HTML ของเรา เราได้กำหนด <button> องค์ประกอบที่มี ID mainButton . โค้ด JavaScript ของเราจะดึงส่วนประกอบนี้โดยใช้ getElementById() กระบวนการ.

วิธีนี้มีประโยชน์หากคุณต้องการดึงข้อมูลองค์ประกอบเดียวในหน้า หากคุณนึกย้อนกลับไปที่การเรียนรู้ HTML และ CSS คุณจะรู้ว่ารหัสต้องไม่ซ้ำกัน สิ่งนี้ทำให้ getElementById() เหมาะสำหรับการดึงองค์ประกอบเดี่ยว

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

คุณอาจเลือกใช้วิธีนี้หากคุณกำหนด ID ให้กับองค์ประกอบ แทนที่จะใช้ getter . ที่กว้างขึ้น เช่น querySelector หรือ getElementByClass ซึ่งส่งคืนอ็อบเจ็กต์องค์ประกอบแรกที่ตรงตามเกณฑ์เฉพาะ คุณสามารถดึงองค์ประกอบโดยใช้ getElementById() .

getElementById() เป็นวิธีการทั่วไปที่ใช้ในการดึงข้อมูลรายการบนหน้าเว็บ

สิ่งที่คุณต้องรู้เกี่ยวกับ getElementById

ก่อนที่เราจะเจาะลึกเข้าไปในตัวอย่าง เราจะพูดถึงข้อผิดพลาดที่ผู้เริ่มต้นมักทำเมื่อใช้วิธีนี้

มันน่าหงุดหงิดอยู่เสมอเมื่อคุณเรียนรู้สิ่งใหม่แต่มันไม่ได้ผล ดังนั้นเรามาคุยกันเกี่ยวกับข้อผิดพลาดทั่วไปที่คุณอาจทำในขณะที่คุณกำลังเรียนรู้เกี่ยวกับ getElementById() .

ก่อนอื่น getElementById() คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ในขณะที่คำว่า ID ปกติจะใช้ตัวพิมพ์ใหญ่ในการเขียนโปรแกรม คุณต้องใช้ตัวพิมพ์อูฐ Id เมื่อคุณใช้วิธีนี้ มิฉะนั้น วิธีนี้จะใช้ไม่ได้ผล

ประการที่สอง ID ที่คุณระบุไม่ควรมีเครื่องหมายปอนด์ (แฮชแท็ก) พิจารณารหัสนี้:

const button = document.getElementById("#mainButton");

ตัวอย่างนี้อาจดูเหมือนว่ามันจะดึงองค์ประกอบด้วย ID mainButton แต่นั่นไม่ใช่กรณี คุณควรระบุ ID ขององค์ประกอบที่คุณต้องการดึงเท่านั้น:

const button = document.getElementById("mainButton");

จบไปแล้ว เรามาดูตัวอย่างกัน

วิธีใช้ getElementById

เมื่อคุณท่องเว็บ คุณอาจพบแท็กที่ระบุว่า "อ่านเพิ่มเติม" หน้าเว็บอาจแสดงข้อความสองสามประโยค จากนั้นขอให้คุณกดปุ่มนั้นเพื่อที่คุณจะเห็นข้อความที่เหลือ

เราจะสร้างคุณลักษณะนั้นโดยใช้ getElementById() ผู้รับ คุณดูโค้ดสุดท้ายของบทแนะนำนี้ได้ที่ GitHub

การสร้างส่วนหน้า

เริ่มต้นด้วยการสร้าง front-end อย่างง่ายโดยใช้ HTML และ CSS สร้างไฟล์ใหม่ชื่อ index.html และวางในรหัสต่อไปนี้:

<!DOCTYPE html>
<html>
    <head>
   	 <title>An Introduction to getElementById()</title>

   	 <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
   	 <div>
   		 <h1>JavaScript getElementById()</h1>
   		 <p>Are you looking to learn more about getElementById()? You've come to the right place.</p>
   		 <span id="showMore">Read more</span>
   		 <p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p>
   	 </div>
    </body>
    <script src="scripts.js"></script>
</html>

ในเอกสารนี้ เราได้กำหนดกล่องที่มีข้อมูลเกี่ยวกับ getElementById() กระบวนการ. กล่องของเราประกอบด้วยหัวเรื่อง ข้อความสองย่อหน้า และแท็ก HTML แบบขยายที่เราจะใช้เพื่อเปิดเผยย่อหน้าสุดท้าย

เปิดไฟล์ชื่อ styles.css และวางรหัสนี้:

<!DOCTYPE html>
<html>
    <head>
   	 <title>An Introduction to getElementById()</title>

   	 <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
   	 <div>
   		 <h1>JavaScript getElementById()</h1>
   		 <p>Are you looking to learn more about getElementById()? You've come to the right place.</p>
   		 <span id="showMore">Read more</span>
   		 <p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p>
   	 </div>
    </body>
    <script src="scripts.js"></script>
</html>

รหัสนี้ทำให้หน้าของเรามีสีบางอย่างเพื่อให้ดูน่าดึงดูดยิ่งขึ้น เมื่อเปิดหน้าเว็บขึ้นมา คุณจะเห็นสิ่งต่อไปนี้:

วิธีใช้ getElementById Getter ของ JavaScript

มีปัญหาหนึ่งคือ แท็ก "อ่านเพิ่มเติม" ของเราไม่ทำอะไรเลย และข้อความย่อหน้าสุดท้ายของเรายังคงมองเห็นได้ นั่นเป็นเพราะเรายังไม่ได้เพิ่มโค้ด JavaScript ของเรา มาเขียนฟังก์ชัน JavaScript สำหรับหน้าเว็บของเรากัน

การเพิ่มโค้ด JavaScript

เริ่มต้นด้วยการเลือกองค์ประกอบที่เราจะใช้งาน องค์ประกอบที่เราต้องเลือกคือ <span> . ของเรา (ซึ่งมีข้อความ "อ่านเพิ่มเติม") และย่อหน้าที่เราต้องการสลับไปมาระหว่างการแสดงและการซ่อน

สร้างไฟล์ชื่อ scripts.js และวางในรหัสนี้:

var paragraph = document.getElementById("hiddenText");

paragraph.style.display = "none";

ในโค้ดของเรา เราใช้ getElementById() เพื่อดึงย่อหน้าของเราจากเอกสาร DOM เลือกวัตถุเอกสาร hiddenText และซ่อน ต่อไป เราจะสร้างฟังก์ชันที่สลับข้อความของเรา:

function toggleText() {
	if (paragraph.style.display === "none") {
		paragraph.style.display = "block";
	} else {
		paragraph.style.display = "none";
	}
}

เราเริ่มต้นด้วยการเลือกองค์ประกอบที่มี ID hiddenText . หมายถึงย่อหน้าของข้อความที่เราต้องการให้ปรากฏหรือหายไปเมื่อคลิก "อ่านเพิ่มเติม"

เราได้เขียน if คำสั่งที่ตรวจสอบว่าย่อหน้านั้นมองเห็นหรือไม่ หากมองไม่เห็น display ค่าของย่อหน้าจะถูกตั้งค่าเป็น block ซึ่งจะทำให้ปรากฏ; มิฉะนั้น display . ของย่อหน้า ค่าจะถูกตั้งค่าเป็น none แล้วมันจะหายไป

รหัสของเรายังไม่เสร็จ ต่อไป เราจะสร้างฟังเหตุการณ์ซึ่งจะเปิดใช้งานเมื่อเราคลิกที่ข้อความ "อ่านเพิ่มเติม" ของเรา:

var showButton = document.getElementById("showMore");

showButton.addEventListener("click", toggleText);

รหัสนี้เลือก Read more ข้อความในหน้าของเรา จากนั้นจะตั้งค่าตัวฟังเหตุการณ์ซึ่งจะเรียก toggleText() . ของเรา วิธีเมื่อคลิกข้อความ "อ่านเพิ่มเติม"

ตอนนี้ มาเปิดหน้าเว็บของเราแล้วลองคลิกที่ Read more ข้อความ:

รหัสของเราใช้งานได้จริง! เมื่อคุณคลิกที่ข้อความ “อ่านเพิ่มเติม” ข้อความจะปรากฏขึ้น เมื่อคุณคลิกอีกครั้ง ข้อความจะหายไป

บทสรุป

getElementById() getter ให้คุณดึงองค์ประกอบตาม ID ของมันจากหน้าเว็บ

คุณกำลังมองหาสิ่งที่ท้าทาย? ใช้ getElementById() getter เพื่อเปลี่ยนค่าของ "อ่านเพิ่มเติม" เป็น "อ่านน้อยลง" เมื่อข้อความปรากฏให้เห็น หากต้องการไปต่อ คุณสามารถเพิ่มภาพสองสามภาพลงในเพจและสร้างปุ่มที่จะซ่อนภาพทั้งหมดเมื่อคลิกปุ่ม

ตอนนี้คุณพร้อมที่จะเริ่มใช้ getElementById() getter เหมือน coder มืออาชีพ!