জাভাস্ক্রিপ্ট ডকুমেন্ট অবজেক্ট মডেল (DOM) হল একটি ওয়েবপৃষ্ঠার HTML উপাদানগুলির একটি উপস্থাপনা। এটি এমন একটি ইন্টারফেস যা আমরা একটি ওয়েব পৃষ্ঠার বিষয়বস্তু বা শৈলী পরিবর্তন করে ম্যানিপুলেট করতে ব্যবহার করতে পারি।
আমরা একটি ওয়েবপেজে ডান ক্লিক করে এবং 'পরিদর্শন' নির্বাচন করে DOM অ্যাক্সেস করতে পারি। এটি করার মাধ্যমে, আপনি বর্তমানে যে ওয়েবপৃষ্ঠাটিতে আছেন তার HTML উপাদানগুলির সাথে একটি বিভাগ (ডান বা বামে) উপস্থিত হওয়া উচিত। এই উপাদানগুলির উপর হোভার করে, আপনি বলতে পারেন যে পৃষ্ঠার কোন বিভাগগুলি তাদের দ্বারা প্রতিনিধিত্ব করা হচ্ছে কারণ পৃষ্ঠার অংশগুলি নিজেই হাইলাইট হয়ে যায়৷
আমরা কনসোলে কোডিং করে পৃষ্ঠার বিষয়বস্তু বা স্টাইলিং ম্যানিপুলেট করতে পারি।
DOM নিজেই একটি ট্রি ডেটা স্ট্রাকচার যার মধ্যে পিতামাতা এবং নেস্টেড চিলড্রেন উপাদান রয়েছে। শিশুবিহীন উপাদানগুলিকে 'পাতা' বলা হয়। একটি পৃষ্ঠা পরিদর্শন করার সময়, আপনি দেখতে পারেন আমাদের গাছের প্রধান নোড উপাদানটি হল ডকুমেন্ট, তারপরে আমাদের এইচটিএমএল ট্যাগ, তারপরে আমাদের হেড ট্যাগ, যার মধ্যে স্ক্রিপ্ট এবং আমাদের শিরোনাম রয়েছে, একটি একক গাছ হিসাবে শাখাবদ্ধ। আমরা আমাদের বডি ট্যাগও দেখতে পারি, যা হেড ট্যাগ থেকে আলাদা এবং একটি ভিন্ন উপাদান বহনকারী একটি ভিন্ন গাছের শাখায় ছড়িয়ে পড়ে। নীচে কেরিয়ার কর্মের হোম পৃষ্ঠার প্রতিনিধিত্ব করতে ব্যবহৃত উপাদানগুলির একটি উদাহরণ।
বডি ট্যাগের একটি নির্দিষ্ট ডিভ এলিমেন্ট চাইল্ডে হোভার করার সময় হোমপেজের ডান অংশটি কীভাবে হাইলাইট হয় তা লক্ষ্য করুন। এই নিবন্ধে, আমরা DOM-এ উপাদান নির্বাচন করার উপায় নিয়ে আলোচনা করি যাতে ভবিষ্যতে এটিকে কাজে লাগাতে সক্ষম হয়।
DOM-এ উপাদান নির্বাচন করা
DOM এ উপাদান নির্বাচন করার দুটি উপায় রয়েছে। একটি হল getElements পদ্ধতি ব্যবহার করে, অন্যটি হল querySelector পদ্ধতি ব্যবহার করে৷
getElement পদ্ধতি
getElement পদ্ধতিগুলি ট্যাগ নাম, শ্রেণীর নাম বা আইডির একটি একক স্ট্রিং আর্গুমেন্ট নেয়। ট্যাগ এবং ক্লাসের নাম এইচটিএমএল সংগ্রহ নামে একটি অ্যারে-সদৃশ বস্তু ফেরত দেবে যা বলে যে আপনি যে উপাদানটি খুঁজছেন তা কতবার পৃষ্ঠায় ঘটে।
document.getElementsByTagName(‘p’) :লক্ষ্য করুন যে বর্তমানে কেরিয়ার কর্মার হোমপেজে সাতটি পি ট্যাগ রয়েছে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
document.getElementsByClassName(‘hzjqne’) :এটি প্রদত্ত ক্লাসের সাথে সমস্ত উপাদান সমন্বিত HTML সংগ্রহ ফিরিয়ে দেবে।
document.getElementById(‘__NEXT_DATA__’) :আইডি দ্বারা একটি উপাদান পাওয়া কনসোলে মিলিত উপাদান ফিরে আসবে৷ কারণ আইডি নামগুলি অনন্য হওয়া উচিত, তাদের কোনও কিছুর সংগ্রহ ফিরিয়ে দেওয়া উচিত নয়।
কোয়েরি নির্বাচক পদ্ধতি
ক্যোয়ারী নির্বাচক পদ্ধতি ব্যবহার করার সময়, আমরা যা খুঁজছি তা খুঁজে পেতে বা নির্বাচন করতে আমাদের ক্লাসের নামের আগে ডট এবং আইডি নামের আগে হ্যাশ প্রতীক অন্তর্ভুক্ত করতে হবে। querySelector() ব্যবহার করার সময় এটি সবচেয়ে সাধারণ ভুল অথবা querySelectorAll() পদ্ধতি
উপরের স্ক্রিন শটগুলিতে লক্ষ্য করুন, আমরা এমন উপাদান পেয়েছি যা ক্লাস বা আইডি ধারণ করে।
আরেকটি পার্থক্য হল querySelectorAll() ব্যবহার করার সময় একটি HTML সংগ্রহের পরিবর্তে, আমরা বিনিময়ে একটি নোড তালিকা বলে কিছু পাই, যা একটি অ্যারের মতো অবজেক্টও।
একটি HTML সংগ্রহ এবং একটি নোড তালিকার মধ্যে পার্থক্য হল যে আমরা .forEach() ব্যবহার করতে পারি একটি নোড তালিকায় পদ্ধতি। আমরা HTML সংগ্রহের সাথে এটি করতে পারি না যদি আমরা DOM ম্যানিপুলেট করার চেষ্টা করি। যাইহোক, জাভাস্ক্রিপ্টের এমন একটি পদ্ধতি আছে যা আমরা একটি অ্যারের মতো বস্তু থেকে একটি অ্যারে তৈরি করতে ব্যবহার করতে পারি যেমন একটি HTML সংগ্রহ বা একটি নোড তালিকা। সেই পদ্ধতিটি হল .from() , এবং এটি অ্যারে ক্লাস থেকে। Array.from(arrayLikeObject)
মনে রাখবেন যে আমরা getMethods()-এর সাহায্যে যে সমস্ত উপাদান querySelectors দিয়ে নির্বাচন করতে পারি .
উপসংহার
DOM হল একটি শক্তিশালী ইন্টারফেস যা একটি ওয়েবপেজের HTML উপস্থাপন করে। এটির একটি গাছের গঠন রয়েছে যা আমরা দেখতে পাই যখন আমরা পৃষ্ঠাটি পরিদর্শন করি। আমরা querySelector() এর মত পদ্ধতি ব্যবহার করতে পারি অথবা getMethods যাতে আমরা জাভাস্ক্রিপ্টের সাথে যা দেখি তা ম্যানিপুলেট করতে সক্ষম হয়।
