W3C DOM (Document Object Model) เป็นมาตรฐานสากลสำหรับการเข้าถึงและจัดการเอกสาร HTML/XML นี่คือคุณสมบัติหลักของ document ที่เข้าถึงได้ผ่าน W3C DOM:
คุณสมบัติหลัก (Core Document Properties)
| # | Property | คำอธิบาย | ตัวอย่าง |
|---|---|---|---|
| 1 | documentElement | อ้างอิงถึง Element <html> (Root Element) ของเอกสาร (Read-only) | document.documentElement // <html>... |
| 2 | body | อ้างอิงถึง Element <body> (Read-only) - สะดวกกว่า document.getElementsByTagName("body")[0] | document.body |
| 3 | head | อ้างอิงถึง Element <head> (Read-only) | document.head |
| 4 | title | เนื้อหาของ <title> (Read/Write) - สะดวกกว่า querySelector | document.title = "New Title" |
| 5 | URL | URL ของเอกสาร (Read-only) | document.URL |
| 6 | documentURI | URI ของเอกสาร (Read-only) - คล้าย URL | document.documentURI |
| 7 | referrer | URI ของหน้าที่นำทางมาหน้านี้ (Read-only) | document.referrer |
| 8 | domain | Domain ของเอกสาร (Read/Write - สำหรับ Cross-origin relaxation) | document.domain = "example.com" |
| 9 | cookie | String ของ Cookie ทั้งหมด (Read/Write) | document.cookie = "session=abc" |
| 10 | lastModified | วันที่/เวลาที่เอกสารถูกแก้ไขล่าสุด (จาก HTTP Header, Read-only) | document.lastModified |
| 11 | readyState | สถานะการโหลด: "loading", "interactive", "complete" (Read-only) | document.readyState |
| 12 | compatMode | โหมดการเรนเดอร์: "CSS1Compat" (Standards), "BackCompat" (Quirks) (Read-only) | document.compatMode |
| 13 | characterSet | Character Encoding ของเอกสาร (Read-only) - เช่น "UTF-8" | document.characterSet |
| 14 | defaultView | Window Object ที่เชื่อมกับ Document นี้ (Read-only) - เทียบเท่า window | document.defaultView |
| 15 | implementation | DOMImplementation Object (Read-only) - สำหรับสร้าง Document ใหม่, ตรวจสอบ Feature | document.implementation.hasFeature("HTML", "1.0") |
| 16 | forms[] | HTMLCollection ของ <form> ทั้งหมด (Read-only) | document.forms[0], document.forms.loginForm |
| 17 | images[] | HTMLCollection ของ <img> ทั้งหมด (Read-only) | document.images.logo |
| 18 | links[] | HTMLCollection ของ <a> และ <area> ที่มี href (Read-only) | document.links[0] |
| 19 | anchors[] | HTMLCollection ของ <a> ที่มี name/id (Read-only) - Legacy | document.anchors[0] |
| 20 | scripts[] | HTMLCollection ของ <script> ทั้งหมด (Read-only) | document.scripts |
| 21 | currentScript | Script Element ที่กำลัง Execute อยู่ (Read-only) | document.currentScript |
| 22 | styleSheets[] | StyleSheetList ของ Stylesheet ทั้งหมด (Read-only) | document.styleSheets[0].cssRules |
คุณสมบัติสำหรับ Selection & Editing
| Property | คำอธิบาย |
|---|---|
| getSelection() | คืน Selection Object (ข้อความที่ User เลือก) - Method ไม่ใช่ Property |
| activeElement | Element ที่มี Focus อยู่ (Read-only) |
| designMode | "on" / "off" - เปิด/ปิดการแก้ไขทั้งหน้า (Rich Text Editor) |
| execCommand() | สั่ง Editing Command (bold, copy, insertHTML, ฯลฯ) - Deprecated ใช้ Input Events/ContentEditable API แทน |
ตัวอย่างการใช้งาน
// 1. เปลี่ยน Title แบบ Dynamic
document.title = `ผู้ใช้: ${user.name} | แดชบอร์ด`;
// 2. ตรวจสอบสถานะการโหลด
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
// 3. เข้าถึง Form และ Input โดย Name
const loginForm = document.forms.loginForm;
const username = loginForm.elements.username.value;
// 4. หา Stylesheet และเพิ่ม Rule
const sheet = document.styleSheets[0];
sheet.insertRule('.highlight { background: yellow }', sheet.cssRules.length);
// 5. ตรวจสอบ Character Set
console.log("Encoding:", document.characterSet); // "UTF-8"
สรุป
W3C DOM มอบคุณสมบัติมาตรฐานที่ครอบคลุม: โครงสร้าง (documentElement, body, head), เมตาดาต้า (title, URL, referrer, lastModified, charset), คอลเลกชัน (forms, images, links, scripts, styleSheets), สถานะ (readyState, compatMode), และ Editing (designMode, getSelection) ใช้คุณสมบัติเหล่านี้แทน Legacy DOM (IE4) เพื่อความเข้ากันได้และอนาคต
