জাভাস্ক্রিপ্টে কন্টেন্ট অ্যাক্সেস ও মডিফাই করার জন্য DOM-এর বিভিন্ন টাইপ নিচে দেওয়া হলো −
- The Legacy DOM − এটি জাভাস্ক্রিপ্ট ল্যাঙ্গুয়েজের আরম্ভিক সংস্করণে পরিচয় করানো মডেল। এটি সব ব্রাউজার দ্বারা ভালোভাবে সাপোর্টেড কিন্তু ডকুমেন্টের শুধু নির্দিষ্ট কী পোर्शन (ফর্ম, ফর্ম এলিমেন্ট, ইমেজ) অ্যাক্সেস করার অনুমতি দেয়।
- The W3C DOM − ডকুমেন্ট অবজেক্ট মডেল সমস্ত ডকুমেন্ট কন্টেন্ট অ্যাক্সেস ও মডিফাই করার অনুমতি দেয় এবং বিশ্ব্যাপি কনসোর্টিয়াম (W3C) দ্বারা স্ট্যান্ডার্ডাইজড। এই মডেল প্রায় সব মডার্ন ব্রাউজার দ্বারা সাপোর্টেড।
- The IE4 DOM − মাইক্রোসফ্টের ইন্টারনেট এক্সপ্লোরার ব্রাউজারের ভার্সন ৪-এ পরিচয় করানো ডকুমেন্ট অবজেক্ট মডেল। IE ৫ এবং পরবর্তী ভার্সনে বেশিরভাগ বেসিক 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>