PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

08 December 2009 By


เนี่องจาก 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 โดยรวมถึงส่วนที่ไม่แสดงด้วย

Tags:: jquery dom object object แปลง





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