คุณสมบัติ body ใน HTML DOM

คุณสมบัติ body (Body Property)

คุณสมบัติ body ที่เกี่ยวข้องกับอิลิเมนต์ HTML <body> ใช้สำหรับตั้งค่าหรือคืนค่าคุณสมบัติของอิลิเมนต์ <body> คืนค่า <body> element สามารถใช้เปลี่ยนเนื้อหาภายใน <body> ได้ คุณสมบัตินี้สามารถทับเนื้อหาของ child elements ภายใน <body> ได้

ไวยากรณ์ (Syntax)

การกำหนดค่า body

document.body = New_Content

พารามิเตอร์: New_Content - เนื้อหาใหม่สำหรับ element

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการ overwrite เนื้อหาทั้งหมดใน body

<!DOCTYPE html>
<html>
<body>
    <h2>Sample HEADING</h2>
    <p>Click the below button to overwrite child content</p>
    <button onclick="OverWrite()">Overwrite Content</button>
    <p>A sample paragraph</p>
    <script>
        function OverWrite() {
            document.body.innerHTML = "All the content inside the body tag is overwritten";
        }
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: แสดง heading, ข้อความ, ปุ่ม, ย่อหน้า

คลิก Overwrite Content: เนื้อหาทั้งหมดใน body ถูกแทนที่ด้วยข้อความเดียว "All the content inside the body tag is overwritten"

คำอธิบายโค้ด

1. Elements ใน body: h2, p, button, p
2. ปุ่ม Overwrite Content: เรียก OverWrite()
3. ฟังก์ชัน OverWrite():

   function OverWrite() {
       document.body.innerHTML = "All the content inside the body tag is overwritten";
   }

คำอธิบายเพิ่มเติม

• document.body คืน reference ไปยัง <body> element
• document.body.innerHTML = ... จะแทนที่ ทุกอย่าง ภายใน body (รวม script tags ที่ยังไม่ execute)
• คำเตือน: การ overwrite body.innerHTML จะทำลาย event listeners, references, และ state ของ elements เดิมทั้งหมด
• ทางเลือกที่ปลอดภัยกว่า: ใช้ appendChild(), insertBefore(), element.remove(), หรือแก้ไข element เฉพาะ
• document.body เป็น shortcut ของ document.getElementsByTagName('body')[0]