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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ดูโหนด DOM

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

ตรวจสอบโหนด

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

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

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

    • โตเกียว

    • เบรุต

      ตอนนี้ระบบจะไฮไลต์ <li>Tokyo</li> ใน DOM Tree

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

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

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

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

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

    • วิชัย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ไม้บรรทัด

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

  • กด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนู Command พิมพ์ 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 Tree

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

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

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

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

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

แก้ไข DOM

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

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

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

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

    • อาหารทอด
    • มิเชล

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

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

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

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

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

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

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

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

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

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

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

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

ตัวเลือกคลิกขวาซึ่งไฮไลต์แอตทริบิวต์แก้ไข

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

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

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

    • ดีน
    • CANNOT TRANSLATE
    • แธดเดียส
    • บร็อก

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

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

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

แก้ไขเป็น HTML

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

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

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

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

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

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

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

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

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

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

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

ทำซ้ำโหนด

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

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

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

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

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

  3. กลับไปยังหน้าเว็บ ระบบได้ทำซ้ำรายการโดยทันที

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

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

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

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

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

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

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

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

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

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

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

    • สตีวี วันเดอร์
    • ต้อมรอ
    • Chris Thile
    • เอลวิส เพรสลีย์

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

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

สถานะบังคับ

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

  1. วางเมาส์เหนือเจ้าแห่งฝูงแมลงวันด้านล่าง สีพื้นหลังจะเปลี่ยนเป็นสีส้ม

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

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

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

ซ่อนโหนด

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

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

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

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

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

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

ลบโหนด

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • ประสบการณ์ The Big Sleep
    • การบอกลาที่ยาวนาน

  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 (Mac) เพื่อวางนิพจน์ลงในคอนโซล

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

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

ความเสียหายเมื่อการเปลี่ยนแปลง DOM

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

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

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

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

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