ประเภทของ DOM ใน JavaScript: Legacy, W3C, IE4

ใน JavaScript มี 3 ประเภทของ DOM (Document Object Model) ที่ใช้เข้าถึงและแก้ไขเนื้อหาเอกสาร ซึ่งแตกต่างกันในระดับการรองรับและความสามารถ:

1. Legacy DOM (DOM Level 0)

ผู้นำเสนอ: Netscape Navigator 2/3, IE 3 (ประมาณ 1995-1996)
เข้าถึงได้: แค่ส่วนจำกัด - document.forms[], document.images[], document.links[], document.anchors[], document.applets[], document.embeds[]
เข้าถึงไม่ได้: Element ทั่วไป, Attribute, Style, สร้าง/ลบ Node
รองรับ: ทุกเบราว์เซอร์ (เพื่อ Backward Compatibility)
สถานะ: Deprecated ใช้ไม่ได้สำหรับแอปสมัยใหม่

2. W3C DOM (DOM Level 1/2/3/4 - Living Standard)

มาตรฐาน: World Wide Web Consortium (W3C) / WHATWG
เข้าถึงได้: ทุกส่วน ของเอกสาร - Element, Attribute, Text Node, Comment, Style, Event, Traversal, Range, Selection, ฯลฯ
API หลัก: getElementById, getElementsByTagName, getElementsByClassName, querySelector, querySelectorAll, createElement, appendChild, remove, classList, dataset, addEventListener, textContent, innerHTML, ฯลฯ
รองรับ: ทุกเบราว์เซอร์สมัยใหม่ (Chrome, Firefox, Safari, Edge, IE9+)
สถานะ: มาตรฐานปัจจุบัน (Standard) ควรใช้ตัวนี้เสมอ

3. IE4 DOM (Microsoft Internet Explorer 4 DOM)

ผู้นำเสนอ: IE 4 (1997)
คุณสมบัติเฉพาะ: document.all[], document.all.tags(), element.innerHTML, element.innerText, insertAdjacentHTML, element.sourceIndex, document.selection (TextRange)
รองรับ: IE 4-11, Edge Legacy (IE Mode)
สถานะ: Legacy / Non-standard บางฟีเจอร์ (innerHTML, insertAdjacentHTML) กลายเป็นมาตรฐานต่อมา

การเปรียบเทียบความสามารถ

ความสามารถ	Legacy DOM	W3C DOM	IE4 DOM
Get Element by ID	❌	✅ `getElementById`	✅ `document.all.id`
Get Elements by Tag	❌ (เฉพาะ forms, images, links)	✅ `getElementsByTagName`	✅ `document.all.tags()`
Query Selector (CSS)	❌	✅ `querySelector`	❌
Create/Remove Element	❌	✅ `createElement`, `remove`	⚠️ Limited
Modify Attributes	❌	✅ `setAttribute`, `getAttribute`	⚠️ Direct Property
Event Handling	⚠️ Inline/onproperty	✅ `addEventListener`	⚠️ `attachEvent`
Cross-browser	✅ (Limited)	✅ Full	❌ IE Only

ตัวอย่าง: เข้าถึง Title ด้วย W3C DOM (แนะนำ)

<html>
<head>
  <title>Document Title</title>
  <script>
    function myFunc() {
      // W3C DOM Standard
      var titleElements = document.getElementsByTagName("title");
      alert("Document Title: " + titleElements[0].textContent); // หรือ .text

      var heading = document.getElementById("heading");
      alert(heading.innerHTML);
    }
  </script>
</head>
<body>
  <h1 id="heading">This is main title</h1>
  <p>Click the following to see the result:</p>
  <button onclick="myFunc();">Click Me</button>
</body>
</html>

แนวทางปฏิบัติ (Best Practice)

ใช้ W3C DOM เท่านั้น สำหรับโค้ดใหม่ทุกกรณี
Feature Detection: ตรวจสอบความสามารถก่อนใช้ if ('querySelector' in document) { ... }
หลีกเลี่ยง: document.all, document.layers (Netscape 4), element.innerText (ใช้ textContent), attachEvent (ใช้ addEventListener)
Polyfill เฉพาะกรณีบังคับต้องรองรับ IE เก่า (ใช้ core-js, polyfill.io)

สรุป: Legacy DOM = จำกัด, เก่า | W3C DOM = มาตรฐาน, ครบครัน, Cross-browser | IE4 DOM = Microsoft Proprietary, Deprecated