เริ่มต้นใช้งานด้วยการดูและเปลี่ยน DOM

เคย์เซ บาสก์
โซเฟีย เอมิเลียโนวา
Sofia Emelianova
GitHub

ดูวิดีโอและศึกษาบทแนะนำแบบอินเทอร์แอกทีฟเหล่านี้ให้เสร็จสมบูรณ์เพื่อเรียนรู้พื้นฐานในการดูและเปลี่ยนแปลง DOM ของหน้าเว็บโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

บทแนะนำนี้จะถือว่าคุณทราบความแตกต่างระหว่าง DOM และ HTML ดูคำอธิบายในภาคผนวก: HTML เทียบกับ DOM

ดูโหนด DOM

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

ตรวจสอบโหนด

เมื่อคุณสนใจโหนด DOM หนึ่งๆ การตรวจสอบเป็นวิธีที่รวดเร็วในการเปิดเครื่องมือสำหรับนักพัฒนาเว็บและตรวจสอบโหนดนั้น

  1. คลิกขวาที่ Michelangelo ที่ด้านล่างแล้วเลือกตรวจสอบ
    • ไมเคิลแองเจโล
    • ราฟาเอล การตรวจสอบโหนด แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บจะเปิดขึ้น <li>Michelangelo</li> จะไฮไลต์อยู่ในแผนผัง DOM การไฮไลต์โหนดไมเคิลแองเจโล<
  2. คลิกไอคอนตรวจสอบที่มุมซ้ายบนของ เครื่องมือสำหรับนักพัฒนาเว็บ ไอคอนตรวจสอบ

  3. คลิกข้อความโตเกียวด้านล่าง

    • โตเกียว

    • เบรุต

      ตอนนี้ระบบไฮไลต์ <li>Tokyo</li> ในแผนผัง DOM

การตรวจสอบโหนดยังเป็นขั้นตอนแรกในการดูและเปลี่ยนรูปแบบของโหนดด้วย โปรดดูที่เริ่มต้นใช้งานการดูและเปลี่ยน CSS

ไปยังส่วนต่างๆ ของ DOM Tree ด้วยแป้นพิมพ์

เมื่อคุณเลือกโหนดใน DOM Tree แล้ว คุณสามารถไปยังส่วนต่างๆ ของ DOM Tree ด้วยแป้นพิมพ์

  1. คลิกขวาที่ Ringo ด้านล่างแล้วเลือกตรวจสอบ เลือก <li>Ringo</li> ในแผนผัง DOM

    • จอร์จ
    • ริงโก้
    • พอล

    • วิชัย

      การตรวจสอบโหนด Ringo

  2. กดปุ่มลูกศรขึ้น 2 ครั้ง เลือก <ul> แล้ว

    การตรวจสอบโหนด ul

  3. กดปุ่มลูกศรซ้าย รายการ <ul> จะยุบไป

  4. กดปุ่มลูกศรซ้ายอีกครั้ง เลือกระดับบนสุดของโหนด <ul> แล้ว ในกรณีนี้จะเป็นโหนด <li> ที่มีวิธีการสำหรับขั้นตอนที่ 1

  5. กดปุ่มลูกศรลง 3 ครั้งเพื่อเลือกรายการ <ul> ที่คุณเพิ่งยุบไปอีกครั้ง ซึ่งควรมีลักษณะดังนี้ <ul>...</ul>

  6. กดปุ่มลูกศรขวา แล้วรายการจะขยายออก

เลื่อนจนมองเห็น

เมื่อดู DOM Tree บางครั้งคุณอาจพบว่าสนใจโหนด DOM ที่ไม่ได้อยู่ในวิวพอร์ตในขณะนี้ ตัวอย่างเช่น สมมติว่าคุณเลื่อนลงไปที่ด้านล่างของหน้า และคุณสนใจโหนด <h1> ที่ด้านบนของหน้า เลื่อนเข้าสู่มุมมอง ช่วยให้คุณเปลี่ยนตำแหน่งวิวพอร์ตอย่างรวดเร็วเพื่อให้คุณมองเห็นโหนด

  1. คลิกขวาที่ Magritte ด้านล่างแล้วเลือกตรวจสอบ

    • มากริตต์
    • ซูทีน

  2. ไปที่ส่วนภาคผนวก: เลื่อนเข้ามาในมุมมองที่ด้านล่างของหน้านี้ ดูวิธีการได้ที่นี่

หลังจากทำตามคำแนะนำที่ด้านล่างของหน้าแล้ว คุณควรกลับมาที่นี่อีกครั้ง

แสดงไม้บรรทัด

เมื่อใช้ไม้บรรทัดด้านบนและด้านซ้ายของวิวพอร์ต คุณจะวัดความกว้างและความสูงขององค์ประกอบเมื่อวางเมาส์เหนือองค์ประกอบนั้นในแผงองค์ประกอบได้

ไม้บรรทัด

เปิดใช้ไม้บรรทัดด้วยวิธีใดวิธีหนึ่งต่อไปนี้

  • กด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนูคำสั่ง พิมพ์ Show rulers on hover และกด Enter
  • ตรวจสอบ การตั้งค่า การตั้งค่า > ค่ากำหนด > องค์ประกอบ > แสดงไม้บรรทัดเมื่อวางเมาส์เหนือ

หน่วยการปรับขนาดของไม้บรรทัดคือพิกเซล

คุณสามารถค้นหา DOM Tree ตามสตริง, ตัวเลือก CSS หรือตัวเลือก XPath

  1. เล็งเคอร์เซอร์ไปที่แผงองค์ประกอบ
  2. กด Control+F หรือ Command+F (Mac) แถบค้นหาจะเปิดขึ้นที่ด้านล่างของแผนผัง DOM

  3. พิมพ์ The Moon is a Harsh Mistress ระบบจะไฮไลต์ประโยคสุดท้ายในแผนผัง DOM

    การไฮไลต์ข้อความค้นหาในแถบค้นหา

ดังที่กล่าวไว้ข้างต้น แถบค้นหายังรองรับตัวเลือก CSS และ XPath อีกด้วย

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

หากต้องการหลีกเลี่ยงการข้ามระหว่างโหนดที่ไม่จำเป็น ให้ยกเลิกการเลือกช่องทำเครื่องหมาย การตั้งค่า การตั้งค่า > ค่ากำหนด > ส่วนกลาง > ค้นหาในขณะที่พิมพ์

ล้างช่อง &quot;ค้นหา&quot; ขณะที่พิมพ์ในการตั้งค่า

แก้ไข DOM

คุณสามารถแก้ไข DOM ได้ทันทีและดูว่าการเปลี่ยนแปลงเหล่านั้นส่งผลต่อหน้าเว็บอย่างไร

แก้ไขเนื้อหา

หากต้องการแก้ไขเนื้อหาของโหนด ให้ดับเบิลคลิกเนื้อหาในแผนผัง DOM

  1. คลิกขวาที่ Michelle ด้านล่างแล้วเลือกตรวจสอบ

    • มันฝรั่งทอด
    • มิเชล

  2. ในแผนผัง DOM ให้ดับเบิลคลิก Michelle กล่าวคือ ให้ดับเบิลคลิกข้อความระหว่าง <li> ถึง </li> ระบบจะไฮไลต์ข้อความสีน้ำเงินเพื่อระบุว่าถูกเลือก

    การแก้ไขข้อความ

  3. ลบ Michelle พิมพ์ Leela แล้วกด Enter เพื่อยืนยันการเปลี่ยนแปลง ข้อความด้านบนจะเปลี่ยนจาก Michelle เป็น Leela

แก้ไขแอตทริบิวต์

หากต้องการแก้ไขแอตทริบิวต์ ให้ดับเบิลคลิกชื่อหรือค่าของแอตทริบิวต์ ทำตามวิธีการด้านล่างเพื่อเรียนรู้วิธีเพิ่มแอตทริบิวต์ลงในโหนด

  1. คลิกขวาที่ Howard ด้านล่างแล้วเลือก Inspect

    • โฮเวิร์ด
    • วินซ์

  2. ดับเบิลคลิก <li> ระบบจะไฮไลต์ข้อความเพื่อระบุว่าได้เลือกโหนดนั้นแล้ว

    การแก้ไขโหนด

  3. กดแป้นลูกศรขวา เว้นวรรค พิมพ์ style="background-color:gold" แล้วกด Enter สีพื้นหลังของโหนดจะเปลี่ยนเป็นสีทอง

    การเพิ่มแอตทริบิวต์รูปแบบไปยังโหนด

นอกจากนี้ คุณยังใช้ตัวเลือกคลิกขวาแก้ไขแอตทริบิวต์ได้ด้วย

ตัวเลือกคลิกขวาที่ไฮไลต์แอตทริบิวต์ &quot;แก้ไข&quot;

แก้ไขประเภทโหนด

หากต้องการแก้ไขประเภทโหนด ให้ดับเบิลคลิกประเภทแล้วพิมพ์ประเภทใหม่

  1. คลิกขวาที่แฮงก์ด้านล่าง แล้วเลือกตรวจสอบ

    • ดีน
    • CANNOT TRANSLATE
    • แธดเดียส
    • Brock

  2. ดับเบิลคลิก <li> ข้อความ li คือส่วนที่ไฮไลต์ไว้

  3. ลบ li พิมพ์ button แล้วกด Enter โหนด <li> จะเปลี่ยนเป็นโหนด <button>

    กำลังเปลี่ยนประเภทโหนดเป็นปุ่ม

แก้ไขในรูปแบบ HTML

หากต้องการแก้ไขโหนดเป็น HTML ที่มีการไฮไลต์ไวยากรณ์และการเติมข้อความอัตโนมัติ ให้เลือกแก้ไขเป็น HTML จากเมนูแบบเลื่อนลงของโหนด

  1. คลิกขวาที่ Leonard ด้านล่างและเลือก ตรวจสอบ

    • เหรียญเพนนี
    • โฮเวิร์ด
    • ราเจช
    • เลนเนิร์ด

  2. ในแผงองค์ประกอบ ให้คลิกขวาที่โหนดปัจจุบันแล้วเลือกแก้ไขเป็น HTML จากเมนูแบบเลื่อนลง

    เมนูแบบเลื่อนลงของโหนด

  3. กด Enter เพื่อเริ่มบรรทัดใหม่และเริ่มพิมพ์ <l เครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์ไวยากรณ์ HTML และเติมแท็กอัตโนมัติให้คุณ

    การเติมข้อความอัตโนมัติของแท็ก HTML

  4. เลือกองค์ประกอบ li จากเมนูเติมข้อความอัตโนมัติแล้วพิมพ์ > เครื่องมือสำหรับนักพัฒนาเว็บเพิ่มแท็กปิด </li> หลังเคอร์เซอร์โดยอัตโนมัติ

    เครื่องมือสำหรับนักพัฒนาเว็บจะปิดแท็กโดยอัตโนมัติ

  5. พิมพ์ Sheldon ภายในแท็กและกด Control / Command + Enter เพื่อใช้การเปลี่ยนแปลง

    กำลังใช้การเปลี่ยนแปลง

ทำซ้ำโหนด

คุณทำซ้ำองค์ประกอบได้โดยใช้ตัวเลือกคลิกขวาทำซ้ำองค์ประกอบ

  1. คลิกขวาที่ Nana ที่ด้านล่างแล้วเลือกตรวจสอบ

    • กองไฟของโต๊ะเครื่องแป้ง
    • นานา
    • ออร์แลนโด
    • ไวท์นอยส์

  2. ในแผงองค์ประกอบ ให้คลิกขวาที่ <li>Nana</li> แล้วเลือกทำซ้ำองค์ประกอบจากเมนูแบบเลื่อนลง

    ตัวเลือก &quot;ทำซ้ำองค์ประกอบ&quot; ที่ไฮไลต์ในเมนูแบบเลื่อนลง

  3. กลับไปที่หน้า รายการนี้ถูกทำซ้ำทันที

คุณยังสามารถใช้แป้นพิมพ์ลัดต่อไปนี้ ลูกศร Shift + Alt + ลง (Windows และ Linux) และลูกศร Shift + Option + ลง (MacOS)

จับภาพหน้าจอของโหนด

คุณจับภาพหน้าจอแต่ละโหนดในแผนผัง DOM ได้โดยใช้จับภาพหน้าจอของโหนด

  1. คลิกขวาที่รูปภาพใดก็ได้ในหน้านี้ แล้วเลือกตรวจสอบ

  2. ในแผงองค์ประกอบ ให้คลิกขวาที่ URL ของรูปภาพและเลือกจับภาพหน้าจอของโหนดจากเมนูแบบเลื่อนลง

    กำลังบันทึกภาพหน้าจอของโหนด

  3. ระบบจะบันทึกภาพหน้าจอไว้ในการดาวน์โหลด

    บันทึกภาพหน้าจอของโหนดไปยังการดาวน์โหลดแล้ว

เรียงลำดับโหนด DOM ใหม่

ลากโหนดเพื่อเรียงลำดับใหม่

  1. คลิกขวาที่ Elvis Presley ที่ด้านล่างแล้วเลือก Inspect โปรดสังเกตว่านี่เป็นรายการสุดท้าย

    • สตีวี วันเดอร์
    • ธนา รอศอยู่
    • Chris Thile
    • เอลวิส เพรสลีย์

  2. ในแผนผัง DOM ให้ลาก <li>Elvis Presley</li> ไปที่ด้านบนสุดของรายการ

    การลากโหนดไปที่ด้านบนสุดของรายการ

สถานะการบังคับ

คุณบังคับให้โหนดคงอยู่ในสถานะต่างๆ ได้ เช่น :active, :hover, :focus, :visited และ :focus-within

  1. วางเมาส์เหนือ The Lord of the Flies ด้านล่าง สีพื้นหลังจะกลายเป็นสีส้ม

    • เจ้าแห่งแมลงวัน
    • อาชญากรรมและการลงโทษ
    • โมบี้ดิ๊ก

  2. คลิกขวาที่ Lord of the Flies ด้านบนแล้วเลือกตรวจสอบ

  3. คลิกขวาที่ <li class="demo--hover">The Lord of the Flies</li> แล้วเลือกบังคับสถานะ > :hover โปรดดูภาคผนวก: ตัวเลือกที่ขาดหายไป หากไม่เห็นตัวเลือกนี้ สีพื้นหลังจะยังคงเป็นสีส้มแม้ว่าจริงๆ แล้วคุณไม่ได้วางเมาส์เหนือโหนดก็ตาม

ซ่อนโหนด

กด H เพื่อซ่อนโหนด

  1. คลิกขวาที่ The Stars My ปลายทางด้านล่าง แล้วเลือกตรวจสอบ

    • เคาน์ตีมอนเต คริสโต
    • ดวงดาวจุดหมายปลายทางของฉัน

  2. กดปุ่ม H โหนดนี้ซ่อนอยู่ คุณยังสามารถคลิกขวาที่โหนดและใช้ตัวเลือกซ่อนองค์ประกอบได้ด้วย

    ลักษณะโหนดใน DOM Tree หลังจากซ่อนแล้ว

  3. กดปุ่ม H อีกครั้ง โหนดนี้จะปรากฏอีกครั้ง

ลบโหนด

กด Delete เพื่อลบโหนด

  1. คลิกขวาที่พื้นฐานด้านล่างและเลือกตรวจสอบ

    • มนุษย์ภาพวาด
    • ผ่านกระจกมอง
    • มูลนิธิ

  2. กดแป้น Delete ลบโหนดแล้ว คุณยังคลิกขวาที่โหนดและใช้ตัวเลือกลบองค์ประกอบได้ด้วย

  3. กด Control+Z หรือ Command+Z (Mac) การทำงานล่าสุดจะถูกเลิกทำและโหนดจะปรากฏขึ้นอีกครั้ง

เข้าถึงโหนดในคอนโซล

เครื่องมือสำหรับนักพัฒนาเว็บมีทางลัดบางอย่างสำหรับการเข้าถึงโหนด DOM จากคอนโซลหรือรับการอ้างอิง JavaScript ไปยังโหนดเหล่านั้น

อ้างอิงโหนดที่เลือกในปัจจุบันด้วย $0

เมื่อตรวจสอบโหนด ข้อความ == $0 ข้างโหนดนั้นหมายความว่าคุณอ้างอิงโหนดนี้ในคอนโซลด้วยตัวแปร $0 ได้

  1. คลิกขวาที่มือซ้ายของความมืดด้านล่าง แล้วเลือกตรวจสอบ

    • มือซ้ายแห่งความมืด
    • สันทราย

  2. กดปุ่ม Escape เพื่อเปิดลิ้นชักคอนโซล

  3. พิมพ์ $0 และกดแป้น Enter ผลลัพธ์ของนิพจน์แสดงว่า $0 ประเมินได้เป็น <li>The Left Hand of Darkness</li>

    ผลลัพธ์ของนิพจน์ $0 แรกในคอนโซล

  4. วางเมาส์เหนือผลการค้นหา ระบบจะไฮไลต์โหนดในวิวพอร์ต

  5. คลิก <li>Dune</li> ในแผนผัง DOM พิมพ์ $0 ในคอนโซลอีกครั้ง จากนั้นกด Enter อีกครั้ง ตอนนี้ $0 ประเมินผลที่ <li>Dune</li>

    ผลลัพธ์ของนิพจน์ $0 ที่สองในคอนโซล

จัดเก็บเป็นตัวแปรร่วม

หากต้องการอ้างอิงกลับไปที่โหนดหลายครั้ง ให้จัดเก็บเป็นตัวแปรร่วม

  1. คลิกขวาที่ The Big Sleep ด้านล่างแล้วเลือกตรวจสอบ

    • การนอนหลับที่ยิ่งใหญ่
    • ถึงเวลาบอกลา

  2. คลิกขวาที่ <li>The Big Sleep</li> ในแผนผัง DOM แล้วเลือกจัดเก็บเป็นตัวแปรร่วม โปรดดูภาคผนวก: ตัวเลือกที่ขาดหายไป หากไม่เห็นตัวเลือกนี้

  3. พิมพ์ temp1 ในคอนโซล แล้วกด Enter ผลลัพธ์ของนิพจน์จะแสดงว่าตัวแปรนั้นประเมินไปยังโหนด

    ผลลัพธ์ของนิพจน์ temp1

คัดลอกเส้นทาง JS

คัดลอกเส้นทาง JavaScript ไปยังโหนดเมื่อต้องการอ้างอิงในการทดสอบอัตโนมัติ

  1. คลิกขวาที่ The Brothers Karamazov ที่ด้านล่างแล้วเลือกตรวจสอบ

    • บราเธอร์ส คารามาซอฟ
    • อาชญากรรมและการลงโทษ

  2. คลิกขวาที่ <li>The Brothers Karamazov</li> ในแผนผัง DOM แล้วเลือกคัดลอก > คัดลอกเส้นทาง JS ระบบได้คัดลอกนิพจน์ document.querySelector() ที่แปลงเป็นโหนดไปยังคลิปบอร์ดแล้ว

  3. กด Control+V หรือ Command+V (Mac) เพื่อวางนิพจน์ลงในคอนโซล

  4. กด Enter เพื่อประเมินนิพจน์

    ผลลัพธ์ของนิพจน์คัดลอกเส้นทาง JS

หยุดการเปลี่ยนแปลง DOM

เครื่องมือสำหรับนักพัฒนาเว็บช่วยให้คุณหยุด JavaScript ของหน้าเว็บชั่วคราวได้เมื่อ JavaScript แก้ไข DOM โปรดดูเบรกพอยท์การเปลี่ยนแปลง DOM

ขั้นตอนถัดไป

ซึ่งครอบคลุมฟีเจอร์ส่วนใหญ่ที่เกี่ยวข้องกับ DOM ในเครื่องมือสำหรับนักพัฒนาเว็บ คุณสามารถค้นหาส่วนที่เหลือโดยคลิกขวาที่โหนดใน DOM Tree แล้วทำการทดสอบกับตัวเลือกอื่นๆ ที่ไม่ได้กล่าวถึงในบทแนะนำนี้ ดูข้อมูลเพิ่มเติมได้ที่แป้นพิมพ์ลัดในแผงองค์ประกอบ

ไปที่หน้าแรกของ Chrome DevTools เพื่อดูทุกอย่างที่คุณทำได้ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ

ไปที่ชุมชนหากคุณต้องการติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บหรือรับความช่วยเหลือจากชุมชนเครื่องมือสำหรับนักพัฒนาเว็บ

ภาคผนวก: HTML กับ DOM

ส่วนนี้จะอธิบายความแตกต่างระหว่าง HTML และ DOM อย่างรวดเร็ว

เมื่อคุณใช้เว็บเบราว์เซอร์เพื่อขอหน้าเว็บอย่าง https://example.com เซิร์ฟเวอร์จะแสดง HTML ดังนี้

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

เบราว์เซอร์จะแยกวิเคราะห์ HTML และสร้างต้นไม้ของออบเจ็กต์ดังนี้

html
  head
    title
  body
    h1
    p
    script

แผนผังของออบเจ็กต์หรือโหนดนี้ที่แสดงเนื้อหาของหน้าจะเรียกว่า DOM ตอนนี้ดูเหมือนว่าจะเหมือนกับ HTML แต่สคริปต์ที่อ้างอิงอยู่ด้านล่าง HTML จะเรียกใช้โค้ดนี้

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

โค้ดดังกล่าวจะนำโหนด h1 ออกและเพิ่มโหนด p อีก 1 โหนดไปยัง DOM ตอนนี้ DOM ที่สมบูรณ์ จะมีลักษณะดังนี้

html
  head
    title
  body
    p
    script
    p

ตอนนี้ HTML ของหน้าเว็บแตกต่างจาก DOM กล่าวคือ HTML แสดงถึงเนื้อหาหน้าเว็บเริ่มต้น และ DOM แสดงถึงเนื้อหาของหน้าเว็บปัจจุบัน เมื่อ JavaScript เพิ่ม นำออก หรือแก้ไขโหนด DOM จะแตกต่างจาก HTML

โปรดดูที่ข้อมูลเบื้องต้นเกี่ยวกับ DOM เพื่อเรียนรู้เพิ่มเติม

ภาคผนวก: เลื่อนจนมองเห็น

นี่เป็นต่อจากส่วนเลื่อนเข้ามาในมุมมอง ทำตามวิธีการด้านล่างเพื่อกรอกข้อมูลในส่วนนี้

  1. ระบบยังควรเลือกโหนด <li>Magritte</li> ในแผนผัง DOM ของคุณ หากไม่เห็น ให้กลับไปที่ เลื่อนเข้าสู่มุมมอง แล้วเริ่มต้นใหม่

  2. คลิกขวาที่โหนด <li>Magritte</li> แล้วเลือกเลื่อนเข้ามาในมุมมอง วิวพอร์ตจะเลื่อนกลับขึ้นไปเพื่อให้คุณเห็นโหนด Magritte โปรดดูภาคผนวก: ตัวเลือกที่ขาดหายไป หากไม่เห็นตัวเลือกเลื่อนเข้ามาในมุมมอง

    เลื่อนจนมองเห็น

ภาคผนวก: ไม่มีตัวเลือก

วิธีการต่างๆ ในบทแนะนำนี้จะบอกให้คุณคลิกขวาที่โหนดในแผนผัง DOM แล้วเลือกตัวเลือกจากเมนูบริบทที่ปรากฏขึ้น หากคุณไม่เห็นตัวเลือกที่ระบุในเมนูตามบริบท ให้ลองคลิกขวาจากข้อความของโหนด

จะคลิกที่ไหนถ้าไม่เห็นตัวเลือกทั้งหมด