HTML DOM Document body แอตทริบิวต์

การรับรองและการใช้งาน

body แอตทริบิวต์ จะตั้งค่าหรือส่งกลับ element <body> ของเอกสาร

จำเป็นต้องระวัง:ตั้งค่า body แอตทริบิวต์ จะทับทับทุกองค์ประกอบของ element <body> ของเอกสาร

คำเตือน

document.body และ document.documentElement ความแตกต่าง:

  • document.body ส่งกลับ element <body>
  • document.documentElement ส่งกลับ element <html>

ดูเพิ่มเติม:

ของ Document documentElement

HTML <body> แท็ก

เป้าหมาย Body ของ DOM HTML

ตัวอย่าง

ตัวอย่าง 1

เอาเนื้อหา HTML ของเอกสารมา:

const myBody = document.body.innerHTML;

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

เปลี่ยนสีพื้นหลังของเอกสาร:

document.body.style.backgroundColor = "yellow";

ลองทดลองด้วยตัวเอง

ตัวอย่าง 3

เปลี่ยน element <body> ของเอกสาร (ทับทับทุกเนื้อหาที่มีอยู่ในขณะนี้):

document.body.innerHTML = "Some new HTML content";

ลองทดลองด้วยตัวเอง

ตัวอย่าง 4

สร้าง element <p> และแนบมันไปที่บรรยายของเอกสาร:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

ลองทดลองด้วยตัวเอง

วิธีการใช้งาน

ส่งกลับแอตทริบิวต์ body:

document.body

ตั้งค่าแอตทริบิวต์ body:

document.body = newContent

ค่าของแอตทริบิวต์

ค่า เรียก
newContent เนื้อหาใหม่ของ element <body>

ค่าที่ส่งกลับ

ประเภท เรียก
ตัวแปล element body ของเอกสาร

การสนับสนุนของเบราเซอร์

document.body เป็นคุณสมบัติของ DOM Level 1 (1998)

ทั้งหมดเบราเซอร์ทุกตัวสนับสนุนมันอย่างเต็มที่:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน