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

Kayce Basques

Sofia Emelianova

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

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

ดูโหนด DOM

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

ตรวจสอบโหนด

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

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

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

   • โตเกียว

   • เบรุต

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

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

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

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

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

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

   • วิชัย

     

2. กดแป้นลูกศรขึ้น 2 ครั้ง เลือก <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 Tree

   

ดังที่กล่าวไว้ข้างต้น แถบค้นหายังรองรับตัวเลือก 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. ดับเบิลคลิก <li> ระบบจะไฮไลต์ข้อความเพื่อระบุว่ามีการเลือกโหนด

   

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

   

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

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

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

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

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

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

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

   

แก้ไขเป็น HTML

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

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

   • Penny
   • Howard
   • ราเจช
   • Leonard

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

   

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

   

   หมายเหตุ: นอกจากนี้ เครื่องมือสำหรับนักพัฒนาเว็บยังเติมพร็อพเพอร์ตี้ DOM โดยอัตโนมัติได้อีกด้วย

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. คลิกขวาที่เจ้าแห่งแมลงวันด้านบน แล้วเลือกตรวจสอบ

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

   

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

ลบโหนด

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

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

   • นักวาดภาพ
   • ผ่านกระจก
   • มูลนิธิ

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

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

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

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

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

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

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

   • มือซ้ายแห่งความมืด
   • Dune

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

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

   

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

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

   

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

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

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

   • หลับฝันดี (The Big Sleep)
   • The Long Goodbye

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

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

   

คัดลอกเส้นทาง 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 เพื่อประเมินนิพจน์

   

ความเสียหายเมื่อการเปลี่ยนแปลง 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 อื่นลงใน DOM ตอนนี้ DOM ที่สมบูรณ์จะมีลักษณะดังนี้

html
  head
    title
  body
    p
    script
    p

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

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

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

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

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

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

   

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

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