ออบเจ็กต์ Body ใน HTML DOM

ออบเจ็กต์ Body (Body Object)

ออบเจ็กต์ Body ใน HTML DOM เกี่ยวข้องกับอิลิเมนต์ HTML <body> แอตทริบิวต์และค่าที่ตั้งไว้ในแท็ก body จะคงอยู่ตลอดเอกสาร HTML เว้นแต่จะถูก override โดย child nodes Body object ใช้เข้าถึงและจัดการคุณสมบัติเหล่านี้

คุณสมบัติ (Properties)

ไวยากรณ์ (Syntax)

การสร้าง body object

var x = document.createElement("BODY");

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

ตัวอย่างด้านล่างแสดงการสร้าง body element ใหม่ (เพื่อการสาธิต - ในความเป็นจริงมี body อยู่แล้ว)

<!DOCTYPE html>
<html>
<head>
    <title>aside tag</title>
    <h2>HTML DOM BODY OBJECT</h2>
    <button onclick="createBody()">CREATE</button>
    <script>
        function createBody() {
            var x = document.createElement("BODY");
            x.setAttribute("id", "myBody");
            document.body.appendChild(x);
            var Para = document.createElement("P");
            var text = document.createTextNode("A sample paragraph created as child of body");
            Para.appendChild(text);
            document.getElementById("myBody").appendChild(Para);
        }
    </script>
</head>
</html>

ผลลัพธ์

เริ่มต้น: แสดงปุ่ม CREATE ใน head (unusual)

คลิก CREATE: สร้าง body ใหม่ (ซ้อนใน body เดิม) พร้อมย่อหน้าลูก

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

1. ปุ่ม CREATE: เรียก createBody()
2. ฟังก์ชัน createBody(): สร้าง <body>, ตั้ง id="myBody", append เข้า body เดิม, สร้าง p element, append text, append p เข้า body ใหม่

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

• ในความเป็นจริง <body> มีอยู่แล้ว 1 ต่อเอกสาร - ไม่ควรสร้างใหม่
• คุณสมบัติเก่า (aLink, bgColor, link, text, vLink, background) เป็น legacy - ใช้ CSS แทน:
  • bgColor → body { background-color: ... }
  • background → body { background-image: ... }
  • text → body { color: ... }
  • link → a:link { color: ... }
  • vLink → a:visited { color: ... }
  • aLink → a:active { color: ... }
• คุณสมบัติสมัยใหม่ของ body: onload, onunload, onscroll, onresize, ononline, onoffline