ต่อไปนี้คือ DOM ประเภทต่างๆ ที่มีให้เข้าถึงและแก้ไขเนื้อหาใน JavaScript -
- DOM ดั้งเดิม − นี่คือโมเดลที่เปิดตัวในภาษา JavaScript เวอร์ชันแรกๆ ได้รับการสนับสนุนอย่างดีจากเบราว์เซอร์ทั้งหมด แต่อนุญาตให้เข้าถึงเฉพาะส่วนสำคัญของเอกสาร เช่น แบบฟอร์ม องค์ประกอบของแบบฟอร์ม และรูปภาพ
- W3C DOM − โมเดลอ็อบเจ็กต์ของเอกสารช่วยให้เข้าถึงและแก้ไขเนื้อหาเอกสารทั้งหมดได้ และกำหนดมาตรฐานโดย World Wide Web Consortium (W3C) โมเดลนี้รองรับเบราว์เซอร์สมัยใหม่เกือบทั้งหมด
- The IE4 DOM – รูปแบบวัตถุเอกสารถูกนำมาใช้ในเวอร์ชัน 4 ของเบราว์เซอร์ Internet Explorer ของ Microsoft IE 5 และเวอร์ชันที่ใหม่กว่านั้นรองรับคุณลักษณะ W3C DOM พื้นฐานส่วนใหญ่
ตัวอย่าง
มาดูตัวอย่างการเข้าถึงคุณสมบัติของเอกสารโดยใช้วิธี W3C DOM
<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc()
{
var ret = document.getElementsByTagName("title");
alert("Document Title : " + ret[0].text );
var ret = document.getElementById("heading");
alert(ret.innerHTML );
}
//-->
</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 = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form d = "form2" name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html> 