এইচটিএমএল ডোম: কীভাবে ডকুমেন্ট অবজেক্ট মডেলটি ব্যবহার করবেন



এই নিবন্ধটি আপনাকে এইচটিএমএল ডিওএম, ডকুমেন্ট অবজেক্ট মডেলের উদাহরণ সহ বিশদ এবং বিস্তৃত জ্ঞান সরবরাহ করবে।

একটি ডকুমেন্ট অবজেক্ট প্রতিনিধিত্ব করে সেই উইন্ডোতে প্রদর্শিত নথি। ডকুমেন্ট অবজেক্টে বিভিন্ন বৈশিষ্ট্য রয়েছে যা অন্যান্য বস্তুগুলিকে বোঝায় যা নথির সামগ্রীতে অ্যাক্সেস এবং পরিবর্তনের অনুমতি দেয়। এই নিবন্ধে, আমরা এইচটিএমএল ডিওএম বুঝতে পারি।

এইচটিএমএল ডিওএম ধারণা

যেভাবে একটি নথিভুক্ত বিষয়বস্তু অ্যাক্সেস এবং সংশোধন করা হয় তাকে বলা হয় নথি অবজেক্ট মডেল , বা ডোম। অবজেক্টগুলি একটি শ্রেণিবিন্যাসে সংগঠিত হয়। এই শ্রেণিবদ্ধ কাঠামো একটি ওয়েব নথিতে বস্তুর সংগঠনের ক্ষেত্রে প্রযোজ্য।





  • উইন্ডো অবজেক্ট এবং শ্রেণিবিন্যাসের শীর্ষ বিয়োগ। এটি বস্তুক্রমক্রমের সর্বোচ্চ উপাদান।
  • ডকুমেন্ট অবজেক্ট & বিয়োগ প্রতিটি উইন্ডোতে লোড হওয়া প্রতিটি এইচটিএমএল ডকুমেন্ট একটি ডকুমেন্ট অবজেক্টে পরিণত হয়। ডকুমেন্টটিতে পৃষ্ঠাটির বিষয়বস্তু রয়েছে।
  • ফর্ম অবজেক্ট এবং বিয়োগ… ট্যাগগুলিতে আবদ্ধ সমস্ত কিছুই ফর্ম অবজেক্টটি সেট করে।
  • ফর্ম নিয়ন্ত্রণ উপাদানসমূহ এবং বিয়োগ ফর্ম অবজেক্টে পাঠ্য ক্ষেত্র, বোতাম, রেডিও বোতাম এবং চেকবাক্সের মতো object বস্তুর জন্য নির্ধারিত সমস্ত উপাদান রয়েছে।

এইচটিএমএল ডিওএম কি

ডকুমেন্ট অবজেক্ট মডেল নথিগুলির জন্য একটি প্রোগ্রামিং এপিআই। অবজেক্ট মডেল নিজেই নথির কাঠামোর সাথে মডেলগুলির কাঠামোর সাথে সাদৃশ্যপূর্ণ। উদাহরণস্বরূপ, এইচটিএমএল ডকুমেন্ট থেকে নেওয়া এই টেবিলটি বিবেচনা করুন:

 
ছায়াময় গ্রোভ আইওলিয়ান
নদীর ওপারে, চার্লি ডোরিয়ান

এইচটিএমএল ডোমটি কী নয়

এই বিভাগটি নথির অবজেক্ট মডেলটিকে এটির মতো মনে হতে পারে এমন অন্যান্য সিস্টেম থেকে আলাদা করে আরও সঠিকভাবে বোঝার জন্য ডিজাইন করা হয়েছে।



যদিও ডকুমেন্ট অবজেক্ট মডেলটি ডায়নামিক এইচটিএমএল দ্বারা দৃ strongly়ভাবে প্রভাবিত হয়েছিল, স্তর 1 এ, এটি সমস্ত গতিশীল এইচটিএমএল বাস্তবায়ন করে না। বিশেষত, ইভেন্টগুলি এখনও সংজ্ঞায়িত হয়নি। স্তর 1 নথির নিজেই একটি দৃ flex়, নমনীয় মডেল সরবরাহ করে এই ধরণের কার্যকারিতার দৃ firm় ভিত্তি তৈরির জন্য ডিজাইন করা হয়েছে।

ডকুমেন্ট অবজেক্ট মডেল কোনও বাইনারি স্পেসিফিকেশন নয়। একই ভাষায় লিখিত ডকুমেন্ট অবজেক্ট মডেল প্রোগ্রামগুলি প্ল্যাটফর্মগুলির জুড়ে উত্স কোডের সাথে সামঞ্জস্যপূর্ণ হবে, তবে নথির অবজেক্ট মডেল বাইনারি ইন্টারঅ্যাপেরিবিলিটির কোনও রূপকে সংজ্ঞায়িত করে না।

ডকুমেন্ট অবজেক্ট মডেল কোনও এক্সএমএল বা এইচটিএমএল অবজেক্টগুলিকে টিকিয়ে রাখার উপায় নয়। এক্সএমএলে কীভাবে বস্তুগুলিকে প্রতিনিধিত্ব করা যেতে পারে তা উল্লেখ করার পরিবর্তে ডকুমেন্ট অবজেক্ট মডেলটি উল্লেখ করে যে কীভাবে এক্সএমএল এবং এইচটিএমএল নথিগুলি বস্তু হিসাবে উপস্থাপন করা হয়, যাতে সেগুলি বস্তু-ভিত্তিক প্রোগ্রামগুলিতে ব্যবহার করা যেতে পারে।



এইচটিএমএল ডোম নয়

ডকুমেন্ট অবজেক্ট মডেল কোনও ডেটা স্ট্রাকচারের সেট নয়, এটি একটি অবজেক্ট মডেল যা ইন্টারফেস নির্দিষ্ট করে। যদিও এই দস্তাবেজটিতে পিতামাতার / সন্তানের সম্পর্কগুলি চিত্রিত ডায়াগ্রাম রয়েছে তবে এগুলি লজিকাল সম্পর্কগুলি প্রোগ্রামিং ইন্টারফেস দ্বারা সংজ্ঞায়িত করা হয়, কোনও নির্দিষ্ট অভ্যন্তরীণ ডেটা স্ট্রাকচারের উপস্থাপনা নয়।

ডকুমেন্ট অবজেক্ট মডেলটি এক্সএমএল বা এইচটিএমএলের 'সত্যিকারের অভ্যন্তরীণ শব্দার্থবিজ্ঞান' সংজ্ঞায়িত করে না। এই ভাষাগুলির শব্দার্থবিজ্ঞানগুলি নিজেরাই ভাষা দ্বারা সংজ্ঞায়িত করা হয়।

ডকুমেন্ট অবজেক্ট মডেল একটি প্রোগ্রামিং মডেল যা এই শব্দার্থবিজ্ঞানের সম্মান করার জন্য ডিজাইন করা হয়েছে। আপনি যেভাবে এক্সএমএল এবং এইচটিএমএল নথি লেখেন সে জন্য ডকুমেন্ট অবজেক্ট মডেলটির কোনও অনুচ্ছেদ নেই যা এই ভাষাগুলিতে লেখা যেতে পারে এমন নথি নথির অবজেক্ট মডেলটিতে উপস্থাপন করা যেতে পারে।

ডকুমেন্ট অবজেক্ট মডেলটির নাম থাকা সত্ত্বেও কম্পোনেন্ট অবজেক্ট মডেল (সিওএম) এর প্রতিযোগী নয়। সিওবিএর মতো সিওএম, ইন্টারফেস এবং অবজেক্টগুলি নির্দিষ্ট করার জন্য একটি ভাষা স্বাধীন উপায় যা ডকুমেন্ট অবজেক্ট মডেল এইচটিএমএল এবং এক্সএমএল নথি পরিচালনার জন্য ডিজাইন করা ইন্টারফেস এবং অবজেক্টগুলির একটি সেট। ডিওএম হতে পারেভাষা-স্বতন্ত্র সিস্টেমগুলি যেমন COM বা CORBA ব্যবহার করে প্রয়োগ করা হয়েছে এটি জাভা বা ECMAScript বাইন্ডিংগুলির মতো ভাষা-নির্দিষ্ট বাইন্ডিং ব্যবহার করেও এই নথিতে সুনির্দিষ্টভাবে প্রয়োগ করা যেতে পারে।

ডকুমেন্ট অবজেক্ট মডেলটি কোথা থেকে এসেছে

জাভাস্ক্রিপ্ট স্ক্রিপ্ট এবং জাভা প্রোগ্রামগুলিকে ওয়েব ব্রাউজারগুলির মধ্যে বহনযোগ্য হতে দেওয়ার জন্য ডকুমেন্ট অবজেক্ট মডেলটির স্পেসিফিকেশন হিসাবে উত্স। ডায়নামিক এইচটিএমএল হ'ল ডকুমেন্ট অবজেক্ট মডেলের তাত্ক্ষণিক পূর্বসূর এবং এটি মূলত ব্রাউজারগুলির ক্ষেত্রে মূলত বিবেচিত হয়েছিল।

তবে ডকুমেন্ট অবজেক্ট মডেল ওয়ার্কিং গ্রুপ গঠিত হওয়ার সাথে সাথে এটিতে এইচটিএমএল বা এক্সএমএল সম্পাদক এবং নথি সংগ্রহস্থল সহ অন্যান্য ডোমেনের বিক্রেতারাও এতে যোগদান করেছিলেন। এক্সএমএল ফলস্বরূপ বিকশিত হওয়ার আগে এই বিক্রেতাদের মধ্যে বেশ কয়েকটি এসজিএমএলের সাথে কাজ করেছিলেন, ডকুমেন্ট অবজেক্ট মডেলটি এসজিএমএল গ্রোভস এবং হাইটাইম স্ট্যান্ডার্ড দ্বারা প্রভাবিত হয়েছিল। এই বিক্রেতাদের মধ্যে কিছু সরবরাহ করার জন্য নথিগুলির জন্য তাদের নিজস্ব বস্তুর মডেলও তৈরি করেছিলেন developedএসজিএমএল / এক্সএমএল সম্পাদক বা ডকুমেন্ট রিপোজিটরিগুলির জন্য প্রোগ্রামিং এপিআই এবং এই বস্তুগুলির মডেলগুলি ডকুমেন্ট অবজেক্ট মডেলকেও প্রভাবিত করেছে।

এইচটিএমএল ডিওমের বৈশিষ্ট্য

আসুন দস্তাবেজ অবজেক্টের মাধ্যমে অ্যাক্সেস এবং সংশোধন করা যায় এমন দস্তাবেজ সামগ্রীর বৈশিষ্ট্যগুলি দেখুন।

জাভাতে হ্যাশম্যাপ এবং হ্যাশটেবল
DOM-Graph
  1. উইন্ডো অবজেক্ট: উইন্ডো অবজেক্ট সর্বদা স্তরক্রমের শীর্ষে থাকে।
  2. নথি অবজেক্ট: এইচটিএমএল ডকুমেন্টটি যখন একটি উইন্ডোতে লোড করা হয়, এটি একটি নথির বস্তুতে পরিণত হয়।
  3. ফর্ম অবজেক্ট: এটি প্রতিনিধিত্ব করে ফর্ম ট্যাগ.
  4. লিংক অবজেক্টস: এটি প্রতিনিধিত্ব করে লিঙ্ক ট্যাগ.
  5. অ্যাঙ্কর অবজেক্টস: এটি প্রতিনিধিত্ব করে একটি href ট্যাগ.
  6. ফর্ম নিয়ন্ত্রণ উপাদানসমূহ: ফর্মটিতে অনেকগুলি নিয়ন্ত্রণ উপাদান থাকতে পারে যেমন পাঠ্য ক্ষেত্র, বোতাম, রেডিও বোতাম এবং চেকবক্সগুলি ইত্যাদি etc.

পদ্ধতি নথি অবজেক্টের :

  1. লিখুন ('স্ট্রিং'): নথিতে প্রদত্ত স্ট্রিং লিখুন।
  2. getElementById (): প্রদত্ত আইডি মান থাকা উপাদানটি প্রদান করে।
  3. এলিটমেন্টবাইনেম () পান: প্রদত্ত নামের মান সহ সমস্ত উপাদান প্রদান করে।
  4. এলিমেটস বাইট্যাগনাম (): প্রদত্ত ট্যাগের নাম থাকা সমস্ত উপাদান প্রদান করে
  5. এলিমেটস বাইক্লাসনাম (): প্রদত্ত শ্রেণীর নাম থাকা সমস্ত উপাদান প্রদান করে।

এইচটিএমএল উপাদানসমূহ সন্ধান করা হচ্ছে

আপনি যখন জাভাস্ক্রিপ্ট সহ এইচটিএমএল উপাদানগুলি অ্যাক্সেস করতে চান, আপনাকে প্রথমে উপাদানগুলি সন্ধান করতে হবে।

এটি করার কয়েকটি উপায় রয়েছে:

  • আইডি দ্বারা HTML উপাদান সন্ধান করা
  • ট্যাগ নামের মাধ্যমে এইচটিএমএল উপাদানগুলি সন্ধান করা
  • শ্রেণীর নাম অনুসারে এইচটিএমএল উপাদানগুলি সন্ধান করা

আইডি দ্বারা এইচটিএমএল উপাদান আবিষ্কার করা

ডিওমে কোনও এইচটিএমএল উপাদান সন্ধান করার সহজ উপায় হ'ল উপাদান আইডি ব্যবহার করে।

উদাহরণ

ট্যাগ নাম দ্বারা এইচটিএমএল উপাদানসমূহ সন্ধান করা

এই উদাহরণটি আইডি = 'প্রধান' সহ উপাদানটি সন্ধান করে এবং তারপরে সমস্ত সন্ধান করে

'মূল' এর ভিতরে উপাদানগুলি:

এটির সাথে আমরা এই এইচটিএমএল ডিওএম নিবন্ধটি শেষ করি। আমি আশা করি আপনি এইচটিএমএল ডিওএম, ডকুমেন্ট অবজেক্ট মডেল এর বিভিন্ন দিক সম্পর্কে একটি ধারণা পেয়ে গেছেন।

আমাদের দেখুন যা প্রশিক্ষকের নেতৃত্বাধীন লাইভ প্রশিক্ষণ এবং বাস্তব জীবনের প্রকল্পের অভিজ্ঞতার সাথে আসে। এই প্রশিক্ষণটি আপনাকে ব্যাক-এন্ড এবং ফ্রন্ট-এন্ড ওয়েব প্রযুক্তিগুলির সাথে কাজ করার দক্ষতায় দক্ষ করে তোলে। এটিতে ওয়েব ডেভলপমেন্ট, জিক্যুয়ারি, অ্যাঙ্গুলার, নোডজেএস, এক্সপ্রেসজেএস এবং মঙ্গোডিবি প্রশিক্ষণ অন্তর্ভুক্ত রয়েছে।

আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এটি 'এইচটিএমএল চিত্রগুলি' ব্লগের মন্তব্য বিভাগে উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।