Nick Untitled

Writing as my personal diary

วิธีการเลือก parent element ด้วย JavaScript

Published: 02 January 2022
Share:

ปกติเวลาที่เราเลือก element ด้วยภาษาจาวาสคริป เราจะใช้คำสั่งที่รู้จักกันอย่าง

document.getElementById("id");
document.document.getElementsByClassName("class name");
document.document.getElementsByName("name");
document.document.getElementsByTagName("tag name");

หรือเลือก element โดยการใช้ CSS Selector ด้วยคำสั่งที่รู้จักอย่าง

document.querySelector("selector");
parent_element.querySelector("selector");
document.querySelectorAll("selector");
parent_element.querySelectorAll("selector");

คำสั่งเหล่านี้ะคืนค่า element ที่เราเลือกไว้ ไม่ว่าจะเป็น element เดียว หรือ element ทั้งหมดที่เราพบในหน้าเว็บเพจนั้น ๆ อย่างไรก็ดีเราต้องการเลือก parent element จาก element ที่อยู่ภายใน จุดนี้เราจะทำได้อย่างไร?

jQuery

jQuery เป็นหนึ่งในไลบรารีที่คนนิยมใช้งานกัน เราเลือก parent element ได้โดยการพิมพ์คำสั่งอย่าง

$("css selector").parent();

หรือ

$("css selector").closest("parent css selector");

สองคำสั่งนี้จะอนุญาตเราเลือก parent element ได้ตามที่ต้องการเลย อย่างไรก็ดี ทั้งสองคำสั่งนี้มีข้อแตกต่างกัน เรายกตัวอย่างตามภาพด้านล่างนี้ก่อน

DOM Example แผนภาพตัวอย่าง

ในที่นี้เราต้องการเลือก element div ที่อยู่เหนือ element li เราสามารถเรียกใช้งานทั้งสองคำสั่งได้ตามด้านล่างนี้

$("li").parent().parent();

หรือ

$("li").closest("div");

ทั้งคู่จะเลือก parent element ที่เป็น div ครับ

สรุปความแตกต่างระหว่างสองคำสั่งตามข้างบนนี้ตรงที่

  • .parent() เป็นคำสั่งที่ให้เราเลือก element ที่เป็น parent และอยู่ติดกับ element ที่เราเลือก
  • .closest() เป็นการเลือก element ที่อยู่เหนือ และอยู่ใกล้กันกับ element ที่เราเลือกไว้โดยการใช้ css selector

อย่างไรก็ดีไลบรารีนี้มีข้อเสียได้แก่ ไลบรารีมีขนาดใหญ่ส่งผลต่อระยะเวลาการโหลดไลบรารีเพื่อใช้งาน กับไลบรารีนี้เก่าไปแล้ว เนื่องมาจากตัวจาวาสคริปเองได้รับการพัฒนาอย่างต่อเนื่องจนทำงานได้แบบเดียวกันกับ jQuery แต่ไม่ต้องพึ่งพาไลบรารีที่มีขนาดใหญ่ และทำงานได้เร็วมากกว่าไลบรารีที่กล่าวถึง

ต่อไป เราจะมาพูดถึงคำสั่งที่มีอยู่แล้วในจาวาสคริป (หรือเรียกว่า Vanilla JavaScript) ที่อนุญาตให้เราเลือก parent element ครับ คำสั่งเหล่านี้ได้แก่ node.parentNode, element.parentElement และ element.closest

node.parentNode กับ element.parentElement

ทั้งคู่นี้เป็นคำสั่งในจาวาสคริปที่เลือก parent node หรือ element ที่อยู่เหนือกว่า node หรือ element ที่เราเลือก ตัวอย่างการใช้งานคำสั่งนี้เป็นไปตามด้านล่างนี้ครับ (ตัวอย่างด้านล่างเอามาจากหน้าเว็บ StackOverflow)

document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element

หรือยกตัวอย่างจากภาพเดิม

DOM Example แผนภาพตัวอย่าง

ในที่นี้เราต้องการเลือก element div ที่อยู่เหนือ element li เราสามารถเรียกใช้งานคำสั่งนี้ได้ตามด้านล่าง

let li = docuent.getElementById('li');
let div = li.parentNode.parentNode;

หรือ

let li = docuent.getElementById('li');
let div = li.parentElement.parentElement;

เราก็จะเลือก parent Element ที่เป็น div ได้เลย ถ้าลองสังเกตดูจะพบว่าทั้งสองคำสั่งมันก็ใช้ได้เหมือนกันนี่ แล้วมันต่างกันอย่างไร?

เรามาพูดถึงความแตกต่างระหว่าง Node กับ Element เสียก่อน (ความแตกต่างสรุปจากหน้าเว็บนี้)

  • Element ก็คือ HTML tag ต่าง ๆ ที่อยู่ในหน้าเว็บไซต์ ได้แก่ div, span, body หรืออื่น ๆ
  • Node จะเป็นอะไรก็ได้ที่มีอยู่ในหน้าเว็บไซต์ รวมถึงข้อความ คอมเม้นต์ ไม่จำกัดว่าเป็น div, span, body, input, form หรืออื่น ๆ ที่เป็น HTML tag

เราจะเห็นว่าการเลือก Node จะดูยุ่งยากกว่า เพราะเราค้องแยกระหว่างข้อความ คอมเม้นต์ หรือ HTML tag ดังนั้นแล้ว การใช้งาน Element จะดูจำเพาะมากกว่า

ผู้อ่านสามารถดูวิดีโอความแตกต่างระหว่าง Element กับ Node ได้ตามด้านล่างนี้

ต่อมา เรามาดูความแตกต่างการใช้งานของสองคำสั่ง (โค้ดอ้างอิงจาก StackOverflow)

document.documentElement.parentNode;    // document เป็น node
document.documentElement.parentElement; // null เนื่องจาก document ไม่ใช่ element
(document.documentElement.parentNode === document);  // true
(document.documentElement.parentElement === document);  // false

เราจะเห็นว่า document ไม่ได้เป็นหนึ่งใน HTML tag อะไรเลยตามที่กล่าวไว้ตามข้างบน และ document ไม่ได้เป็น element แต่ก็ยังเป็น node อยู่ ดังนั้นการใช้งาน element.parentElement จะคืนค่า null กลับมา

element.closest

คำสั่งนี้เป็นส่วนหนึ่งในภาษาสคริปที่อนุญาตให้เราเลือก parent element ที่อยู่ใกล้กันกับ element ที่เราเลือกอยู่โดยการใช้ CSS Selector การใช้งานใช้งานได้ตามด้านล่างนี้

element.closest("CSS selector");

ยกตัวอย่างโดยเอารูปเดิมมาใช้

DOM Example แผนภาพตัวอย่าง

ในที่นี้เราต้องการเลือก element div ที่อยู่เหนือ element li เราสามารถเรียกใช้งานคำสั่งนี้ได้ตามด้านล่าง

let li = docuent.getElementById('li');
let div = li.closest('div');

เมื่อพิมพ์ตามข้างบนนี้แล้ว เราจะเลือก parent element ที่เป็น div ครับ เมื่อสังเกตตัวโค้ดแล้วพบว่าใช้งานได้สะดวกมากกว่า node.parentNode กับ element.parentElement

อย่างไรก็ดีการใช้งานทั้งสามคำสั่งได้แก่ node.parentNode, element.parentElement และ element.closest นี้ขึ้นกับผู้ใช้ว่าจะเอาไปใช้อย่างไรครับ ส่วนกรณีที่ผู้ใช้ไม่ได้ใช้ Vanilla JavaScript คำสั่งทั้งสามคำสั่งนี้อาจจะไม่ได้ใช้เลยก็ได้ครับผม