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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ดูโหนด DOM

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

ตรวจสอบโหนด

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

  1. ในรายการต่อไปนี้ ให้คลิกขวาที่ Michelangelo เลือกตรวจสอบจากเมนู

    • Michelangelo
    • ราฟาเอล

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

    การไฮไลต์โหนด Michelangelo

  2. คลิก เลือกองค์ประกอบ

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

  1. ในรายการต่อไปนี้ ให้คลิกขวาที่ Magritte แล้วเลือกตรวจสอบ

    • Magritte
    • Soutine

  2. เลื่อนไปที่ส่วนภาคผนวก Scroll into view เพื่อดู วิธีการเพิ่มเติม

เมื่อเสร็จแล้ว คุณควรกลับมาที่ส่วนนี้

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

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

เปิดใช้ไม้บรรทัดได้ 2 วิธี ดังนี้

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

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

คุณค้นหา DOM Tree ได้โดยใช้สตริง ตัวเลือก CSS หรือตัวเลือก XPath

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

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

    การไฮไลต์คำค้นหาในแถบค้นหา

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

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

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

ยกเลิกการเลือกช่องทำเครื่องหมายค้นหาขณะพิมพ์ในการตั้งค่า

แก้ไข DOM

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

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

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

  1. ในรายการต่อไปนี้ ให้คลิกขวาที่ Michelle แล้วเลือกตรวจสอบ

    • ทอด
    • Michelle

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

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

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

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

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

  1. ในรายการต่อไปนี้ ให้คลิกขวาที่ Howard แล้วเลือกตรวจสอบ

    • Howard
    • Vince

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

    เมื่อคลิกแล้ว ระบบจะไฮไลต์โหนดเพื่อระบุว่ามีการเลือก

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

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

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

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

  1. ในรายการต่อไปนี้ ให้คลิกขวาที่ Hank แล้วเลือกตรวจสอบ

    • Dean
    • CANNOT TRANSLATE
    • Thaddeus
    • Brock

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

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

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

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

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

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

    • เพนนี
    • Howard
    • Rajesh
    • Leonard

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

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

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

    การเติมแท็ก HTML โดยอัตโนมัติ

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

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

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

ทำซ้ำโหนด

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

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

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

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

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

  3. กลับไปที่หน้าเว็บ รายการในลิสต์ถูกทำซ้ำแล้ว

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

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

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

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

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

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

  3. ระบบจะบันทึกภาพหน้าจอไว้ในโฟลเดอร์ดาวน์โหลด (Windows และ macOS)

ดูข้อมูลเพิ่มเติมได้ที่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
    • อาชญากรรมและการลงโทษ
    • โมบี้ดิก

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

  3. คลิกขวา <li class="demo--hover">The Lord of the Flies</li> แล้วเลือก บังคับสถานะ > :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 (macOS) ระบบจะเลิกทำการดำเนินการล่าสุดและโหนดจะปรากฏขึ้นอีกครั้ง

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

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

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

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

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

    • The Left Hand of Darkness
    • Dune

  2. กดแป้น Escape เพื่อเปิดลิ้นชักคอนโซล คุณอาจต้อง เลือก Console เพื่อเปิด

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

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

  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 ใน Console แล้วกด Enter ผลลัพธ์ของ นิพจน์แสดงให้เห็นว่าตัวแปรประเมินเป็นโหนด คลิก โหนดเพื่อขยายรายการในลิสต์

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

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

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

  1. ในรายการต่อไปนี้ ให้คลิกขวาที่The Brothers Karamazov แล้ว เลือกตรวจสอบ

    • The Brothers Karamazov
    • อาชญากรรมและการลงโทษ

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

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

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

    ผลลัพธ์ของนิพจน์ Copy JS Path

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

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

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

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

อ่านต่อ

เข้าร่วมชุมชน 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 ตอนนี้ออบเจ็กต์ใน DOM และ HTML เหมือนกัน

สมมติว่าไฟล์ script.js ที่ด้านล่างของ 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 ของ MDN

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

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

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

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

ตัวเลือกหายไป

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

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