วิธีเข้าถึงคุณสมบัติเอกสารด้วย W3C DOM Method

W3C DOM (World Wide Web Consortium Document Object Model) เป็นมาตรฐานสากลสำหรับการเข้าถึงและจัดการเอกสาร HTML/XML นี่คือวิธีการเข้าถึงคุณสมบัติเอกสารด้วย W3C DOM Method:

เมธอดหลักสำหรับเข้าถึง Element

Method	คำอธิบาย	คืนค่า
`document.getElementById(id)`	ค้นหา Element ตาม ID (Unique)	Element หรือ null
`document.getElementsByTagName(name)`	ค้นหา Element ตาม Tag Name	HTMLCollection (Live)
`document.getElementsByClassName(name)`	ค้นหา Element ตาม Class Name	HTMLCollection (Live)
`document.querySelector(selector)`	ค้นหา Element แรกที่ตรง CSS Selector	Element หรือ null
`document.querySelectorAll(selector)`	ค้นหา Element ทั้งหมดที่ตรง CSS Selector	NodeList (Static)
`document.forms[name]`	เข้าถึง Form ตาม Name/ID	HTMLFormElement
`document.images[name]`	เข้าถึง Image ตาม Name/ID	HTMLImageElement

ตัวอย่าง: เข้าถึง Title, Heading, และ Form

<html>
<head>
  <title>Document Title</title>
  <script>
    function myFunc() {
      // 1. เข้าถึง Title (W3C DOM)
      var titleElements = document.getElementsByTagName("title");
      alert("Document Title: " + titleElements[0].textContent); // ใช้ textContent แทน .text (IE)

      // 2. เข้าถึง Element ด้วย ID
      var heading = document.getElementById("heading");
      alert("Heading HTML: " + heading.innerHTML);

      // 3. เข้าถึง Form และ Input
      var form = document.getElementById("form1"); // หรือ document.forms["FirstForm"]
      var input = form.elements["username"]; // เข้าถึง Input ใน Form
      alert("Input Value: " + input.value);
    }
  </script>
</head>
<body>
  <h1 id="heading">This is main title</h1>
  <p>Click the following to see the result:</p>
  <form id="form1" name="FirstForm">
    <input type="text" name="username" placeholder="Username" />
    <input type="button" value="Click Me" onclick="myFunc();" />
    <input type="button" value="Cancel" />
  </form>
  <form name="SecondForm">
    <input type="button" value="Don't ClickMe" />
  </form>
</body>
</html>

คุณสมบัติเอกสารที่เข้าถึงได้ (Document Properties)

document.title - Title ของหน้า (Read/Write)
document.URL / document.documentURI - URL (Read-only)
document.referrer - Referrer (Read-only)
document.domain - Domain (Read/Write)
document.cookie - Cookies (Read/Write)
document.lastModified - วันที่แก้ไขล่าสุด (Read-only)
document.readyState - "loading", "interactive", "complete"
document.compatMode - "CSS1Compat" (Standards) หรือ "BackCompat" (Quirks)
document.characterSet - Encoding (เช่น "UTF-8")
document.defaultView - Window Object
document.body, document.head, document.documentElement - Root Elements

Best Practices

ใช้ querySelector/querySelectorAll สำหรับ CSS Selector ที่ซับซ้อน (ID, Class, Attribute, Pseudo-class)
ใช้ getElementById สำหรับ ID (เร็วที่สุด)
หลีกเลี่ยง getElementsByTagName / getElementsByClassName ใน Loop ใหญ่ (Live Collection ทำให้ช้า/ผิดพลาด) → แปลงเป็น Array ก่อน: Array.from(elements) หรือ [...elements]
ใช้ textContent แทน innerText (มาตรฐาน, เร็วกว่า, ไม่ Trigger Reflow)
Feature Detection: if (document.querySelector) { ... }

สรุป

W3C DOM Method ใช้ getElementById, querySelector, getElementsByTagName, forms[] และคุณสมบัติ document.title, document.body ฯลฯ เป็นมาตรฐานที่รองรับทุกเบราว์เซอร์สมัยใหม่ ควรใช้แทน IE4 DOM และ Legacy DOM ทั้งหมด