Javascript Arrays

เข้าใจปัญหาเกี่ยวกับการย้อนกลับ NodeList ใน JavaScript

JavaScript เป็นภาษาที่ทรงพลังสำหรับการจัดการโมเดลวัตถุเอกสาร (DOM) ในการพัฒนาเว็บ อย่างไรก็ตาม นักพัฒนาหลายคนพบปัญหาเมื่อต้องจัดการกับการเก็บรวบรวมวัตถุ DOM โดยเฉพาะเมื่อลองจัดการกับการรวบรวมเหล่านี้ราวกับเป็นอาเรย์ปกติ ปัญหาหนึ่งที่พบบ่อยคือการพยายามใช้เมธอด Array.reverse() บนการเก็บรวบรวมที่ดึงมาผ่านฟังก์ชัน DOM เช่น getElementsByTagName() ในบล็อกโพสต์นี้ เราจะสำรวจว่าทำไมจึงเกิดเหตุการณ์นี้ขึ้นและจะทำงานกับการเก็บรวบรวมเหล่านี้อย่างมีประสิทธิภาพได้อย่างไร

โค้ดที่สร้างความสับสน

พิจารณาตัวอย่างโค้ด JavaScript ต่อไปนี้:

var imagesArr = new Array();
imagesArr = document.getElementById("myDivHolderId").getElementsByTagName("img");
imagesArr.reverse();

เมื่อเรียกใช้เมธอด reverse() บน imagesArr จะเกิดข้อผิดพลาดในเบราว์เซอร์ต่างๆ เช่น Firefox 3 ทำให้เกิดข้อความว่า:

imagesArr.reverse is not a function

ทำไมถึงเกิดขึ้น?

จุดสำคัญที่ต้องเข้าใจคือธรรมชาติของตัวแปร imagesArr หลังจากที่คุณกำหนดค่า เมื่อคุณใช้ getElementsByTagName() คุณจะได้รับ NodeList ไม่ใช่ อาเรย์ นี่คือเหตุผลว่าทำไมการแยกแยะนี้จึงมีความสำคัญ:

ความเข้าใจเกี่ยวกับ NodeList vs. Array

NodeList คืออะไร?

  • NodeList เป็นการเก็บรวบรวมของโหนดที่สามารถถูกส่งกลับโดยวิธีการ DOM ต่างๆ ในกรณีนี้ getElementsByTagName("img") จะส่งกลับ <img> ทั้งหมดที่พบภายใต้เอนทิตีที่กำหนด (ในกรณีนี้คือ "myDivHolderId")
  • แม้ว่า NodeList จะสามารถถูกวนซ้ำได้ (เช่นเดียวกับอาเรย์) แต่มันมีความแตกต่างพื้นฐานที่ทำให้ไม่สามารถใช้วิธีการอาเรย์ เช่น reverse() map() หรือ filter() กับมันได้

ความแตกต่างที่สำคัญระหว่าง NodeList และ Arrays

  • ประเภท: NodeList เป็นอ็อบเจ็กต์ ขณะที่อาเรย์เป็นโครงสร้างในตัวใน JavaScript ที่มีวิธีการพิเศษ
  • การอัปเดตแบบไดนามิก: องค์ประกอบใน NodeList สามารถเปลี่ยนแปลงได้แบบไดนามิก หากมีแท็ก <img> เพิ่มเติมถูกเพิ่มลงใน DOM มันจะรวมอยู่ใน NodeList โดยอัตโนมัติ ในขณะที่อาเรย์จะไม่อัปเดตโดยอัตโนมัติหากคุณไม่เพิ่มรายการใหม่ให้กับมันอย่างชัดเจน

วิธีการย้อนกลับ NodeList อย่างมีประสิทธิภาพ

หากคุณต้องการย้อนกลับลำดับของ NodeList คุณสามารถแปลงมันเป็นอาเรย์ก่อน นี่คือวิธีการที่คุณสามารถทำได้:

ทางออก: แปลงและย้อนกลับ

  1. แปลง NodeList เป็นอาเรย์: คุณสามารถใช้เมธอด Array.from() หรือโอเปอเรเตอร์ spread เพื่อแปลง NodeList เป็นอาเรย์

ใช้ Array.from()

var imagesArr = Array.from(document.getElementById("myDivHolderId").getElementsByTagName("img"));
imagesArr.reverse(); // ตอนนี้คุณสามารถย้อนกลับได้อย่างปลอดภัย

ใช้โอเปอเรเตอร์ Spread

var imagesArr = [...document.getElementById("myDivHolderId").getElementsByTagName("img")];
imagesArr.reverse(); // ยังสามารถย้อนกลับได้

ข้อคิดสุดท้าย

โดยการเข้าใจความแตกต่างระหว่าง NodeList และอาเรย์ คุณสามารถหลีกเลี่ยงความสับสนและข้อผิดพลาดในโค้ด JavaScript ของคุณได้ เมื่อคุณต้องการใช้วิธีการอาเรย์ในการเก็บรวบรวมวัตถุ DOM อย่าลืมแปลง NodeList เป็นอาเรย์ก่อนเสมอ

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างและพฤติกรรมของ NodeList คุณสามารถตรวจสอบรายละเอียดได้ที่ W3C DOM Level 2 Core Specification

ด้วยกลยุทธ์เหล่านี้ การทำงานกับองค์ประกอบ DOM ใน JavaScript จะกลายเป็นเรื่องที่ราบรื่นและมีประสิทธิภาพมากขึ้น ช่วยคุณหลีกเลี่ยงข้อผิดพลาดและความผิดหวังในอนาคต