แปลง jQuery object เป็น DOM object

เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee
dom object jquery object แปลง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ dom object jquery object แปลง

ดูแล้ว 9,533 ครั้ง


เนี่องจาก jQuery object เป็นส่วนหนึ่ง DOM object แต่ไม่ใช่ DOM object. หากต้องการเรียกใช้งาน DOM Object จาก jQuery Object สามารถทำได้โดยการใช้ ฟังก์ชัน get() ดังตัวอย่างต่อไปนี้

โดยที่ หากมี Object เพียงแค่ตัวเดียว เช่น

<html>
<body>
<span></span>
<div></div>
</body>
</html>

จากตัวอย่างโค้ตด้านบน จะมี แท็ก div แค่ตัวเดียว กรณ๊เป็น jQuery Object เราจะเรียกใช้ดังนี้

$("div")

กรณีเป็น DOM Object จะเรียกใช้ดังต่อไปนี้

document.getElementsByTagNamw("div")

แต่เรายังสามารถเรียกใช้ DOM Object จาก jQuery Object ได้ดังต่อไปนี้

$("div").get(0)
//หรือ
$("div")[0]
// เลข 0 หมายถึง div ตัวแรก โดยที่การกำหนดหมายเลขนั้นเป็นการเจาะจงว่าต้องการ
// เลือก Object ลำดับที่เท่าไหร่ โดยเริ่มต้นจาก 0

หาก Object นั้นมีมากกว่า 1 ตัว และไม่ต้องการเฉพาะเจาะจง หรือต้องการเลือก Object นั้นทั้งหมด

// สามารถใช้เป็น
$("div").get()
// ค่าที่ได้จะเป็น DOM Object ของแท็ก div ทั้งหมด

ประโยชน์ของการเรียกใช้งาน DOM Object จาก jQuery Object คือทำให้เราสามารถเรียกใช้งาน คุณสมบัติบางประการของ DOM Object ที่ไม่มีใน jQuery Object ได้ เข่น เราไม่สามารถเรียกใช้ คุณสมบัติ scrollHeight จาก jQuery Object ได้ จึงจำเป็นต้องเปลี่ยนเป็น DOM Object และเรียกใช้ คุณสมบัติดังกล่าวได้

ตัวอย่าง

$("textarea").get(0).scrollHeight;
// หาความสูงของ textarea โดยรวมถึงส่วนที่ไม่แสดงด้วย


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ