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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ดูโหนด DOM

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

ตรวจสอบโหนด

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

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

  3. คลิกข้อความ Tokyo ด้านล่าง

    • โตเกียว

    • เบรุต

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

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

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

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

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

    • George
    • ริงโก้
    • พอล

    • วิชัย

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

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

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

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

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

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

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

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

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

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

    • Magritte
    • Soutine

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

หลังจากทําตามวิธีการที่ด้านล่างของหน้าเสร็จแล้ว คุณควรกลับมาที่นี่

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

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

ไม้บรรทัด

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

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

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

คุณสามารถค้นหาต้นไม้ DOM โดยใช้สตริง ตัวเลือก 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 ด้านล่าง แล้วเลือกตรวจสอบ

    • ทอด
    • Michelle

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

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

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

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

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

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

    • Howard
    • Vince

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

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

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

    การเพิ่มแอตทริบิวต์สไตล์ลงในโหนด

หรือจะใช้ตัวเลือกคลิกขวาแก้ไขแอตทริบิวต์ก็ได้

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

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

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

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

    • Dean
    • CANNOT TRANSLATE
    • Thaddeus
    • Brock

  2. ดับเบิลคลิก <li> ข้อความ li จะไฮไลต์อยู่

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

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

แก้ไขเป็น HTML

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

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

    • Penny
    • Howard
    • Rajesh
    • Leonard

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

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

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

    การเติมแท็ก HTML ให้สมบูรณ์โดยอัตโนมัติ

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

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

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

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

ทำซ้ำโหนด

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

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

    • Bonfire of the Vanities
    • Nana
    • ออร์แลนโด
    • ไวท์นอยส์

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

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

  3. กลับไปที่หน้านั้น ระบบจะคัดลอกรายการในรายการทันที

หรือจะใช้แป้นพิมพ์ลัด Shift + Alt + ลูกศรลง (Windows และ Linux) และ Shift + Option + ลูกศรลง (macOS) ก็ได้

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

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

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

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

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

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

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

ดูวิธีอื่นๆ ในการถ่ายภาพหน้าจอด้วยเครื่องมือสำหรับนักพัฒนาเว็บได้ที่4 วิธีในการจับภาพหน้าจอด้วยเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

    • Stevie Wonder
    • Tom Waits
    • Chris Thile
    • Elvis Presley

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

    การลากโหนดไปยังด้านบนของรายการ

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

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

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

    • The Lord of the Flies
    • Crime and Punishment
    • โมบี้-ดิ๊ก

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

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

ซ่อนโหนด

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

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

    • The Count of Monte Cristo
    • The Stars My Destination

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

    ลักษณะของโหนดในแผนผัง DOM หลังจากที่ซ่อน

  3. กดแป้น H อีกครั้ง โหนดจะแสดงอีกครั้ง

ลบโหนด

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

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

    • The Illustrated Man
    • ผ่านกระจก
    • มูลนิธิ

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

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

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

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีแป้นพิมพ์ลัด 2-3 รายการสำหรับการเข้าถึงโหนด DOM จากคอนโซล หรือรับการอ้างอิง JavaScript ไปยังโหนดเหล่านั้น

อ้างอิงโหนดที่เลือกอยู่ด้วย $0

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

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

    • The Left Hand of Darkness
    • Dune

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

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

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

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

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

    ผลลัพธ์ของนิพจน์ $0 รายการที่ 2 ในคอนโซล

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

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

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

    • The Big Sleep
    • The Long Goodbye

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

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

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

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

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

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

    • The Brothers Karamazov
    • Crime and Punishment

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

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

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

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

หยุดพักเมื่อ DOM เปลี่ยนแปลง

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

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

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

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

ดูชุมชนหากต้องการติดต่อทีม DevTools หรือรับความช่วยเหลือจากชุมชน 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 อื่นลงใน 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 Tree แล้วเลือกตัวเลือกจากเมนูบริบทที่ปรากฏขึ้น หากไม่เห็นตัวเลือกที่ระบุในเมนูตามบริบท ให้ลองคลิกขวาโดยให้นิ้วอยู่ห่างจากข้อความโหนด

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