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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ดูโหนด DOM

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

ตรวจสอบโหนด

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

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

    • Michelangelo
    • Raphael

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

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

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

  3. เลือก Tokyo จากรายการต่อไปนี้

    • โตเกียว
    • เบรุต

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

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

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

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

  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. เลื่อนไปที่ส่วนภาคผนวก เลื่อนเพื่อดูสำหรับ วิธีการเพิ่มเติม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แก้ไข DOM

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

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

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

  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 ด้านล่าง แล้วเลือกตรวจสอบ

    • Penny
    • Howard
    • Rajesh
    • Leonard

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

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

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

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

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

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

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

ทำซ้ำโหนด

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

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

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

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

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

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

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

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

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

  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
    • อาชญากรรมและการลงโทษ
    • Moby Dick

  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
    • Through the Looking-Glass
    • มูลนิธิ

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

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

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

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

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

เมื่อคุณตรวจสอบโหนด (รวมถึงองค์ประกอบจำลอง เช่น ::before หรือ ::after) ข้อความ == $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 พิมพ์ $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 แล้วเลือกจัดเก็บเป็นตัวแปรส่วนกลาง หากไม่พบตัวเลือกนี้ โปรดอ่านเกี่ยวกับตัวเลือกที่หายไป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

อ่านต่อ:

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

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