আপনি কি জানতেন যে ওয়েব পৃষ্ঠায় কন্টেন্টগুলি পরিচালনা করতে আমরা জাভাস্ক্রিপ্ট ব্যবহার করতে পারি? আকর্ষণীয় মনে হচ্ছে? আসুন বুঝতে পারি ডকুমেন্ট অবজেক্ট মডেল কী what নিম্নলিখিত পদ্ধতিতে জাভাস্ক্রিপ্টে ডোম:
- জাভাস্ক্রিপ্টে ডোম কী?
- জাভাস্ক্রিপ্টে ডোমের ক্রিয়া
- ডিওএম অনুসন্ধান করছে
- ইভেন্ট শুনছি
- ফর্মগুলির সাথে ইন্টারঅ্যাক্ট করছে
- এইচটিএমএল উপাদান তৈরি করা হচ্ছে
- সিএসএস যুক্ত করা হচ্ছে
জাভাস্ক্রিপ্টে ডোম কী?
কোনও ওয়েবপৃষ্ঠা লোড হওয়ার পরে ডকুমেন্ট অবজেক্ট মডেল বা ডিওএম ব্রাউজারটি তৈরি করে। গ্রাফিকাল আকারে এটি উপাদানগুলির গাছের মতো যা নোড নামেও পরিচিত যা পৃষ্ঠায় প্রতিটি উপাদানকে উপস্থাপন করতে ব্যবহৃত হয়।
আমাদের ওয়েবপৃষ্ঠার সমস্ত ডিওএম ডকুমেন্ট অবজেক্টের ভিতরে বসে। প্রোগ্রামগতভাবে, এই মডেলটি আমাদের মাধ্যমে আমাদের পৃষ্ঠার সামগ্রীগুলি পড়তে বা পরিবর্তন করতে দেয় । ভাল না?
জাভাস্ক্রিপ্টে ডোমের ক্রিয়া
এই মডেলটির সাথে আমরা সম্পাদন করতে পারি এমন কয়েকটি ক্রিয়া হ'ল:
অ্যারে জাভাস্ক্রিপ্ট দৈর্ঘ্য পেতে
পৃষ্ঠায় DOM- এ এইচটিএমএল উপাদানগুলি পরিবর্তন / সরান।
উপাদানগুলিতে সিএসএস শৈলীগুলি পরিবর্তন এবং যুক্ত করুন
বৈশিষ্ট্যগুলি পড়ুন এবং পরিবর্তন করুন (href, src, Alt), ইত্যাদি
নতুন উপাদান তৈরি করুন এবং সেগুলি ডিওএম / পৃষ্ঠায় .োকান।
ইভেন্ট শ্রোতাদের উপাদানগুলিতে সংযুক্ত করুন (ক্লিক করুন, কী চাপুন, জমা দিন)
জাভাস্ক্রিপ্টে ডোমকে জিজ্ঞাসা করা হচ্ছে
এইচটিএমএল উপাদানটি ধরে নেওয়া বা এটিকে পরিবর্তন / পরিবর্তন করতে বা বিষয়বস্তু ধরে রাখতে তাকে জিজ্ঞাসা বলা হয়।
এইচটিএমএল কোড:
জাভাস্ক্রিপ্ট এবং ডোম এইচ 1 {ফন্ট-আকার: 60px}জাভাস্ক্রিপ্ট কোড:
var শিরোনাম = ডকুমেন্ট.সেটিমেন্টবাইআইডি ('শিরোনাম') // সিগাংগিন রঙ থেকে লাল শিরোনাম.style.color = 'red' var body = document.getElementById ('বডি') // ব্যাকগ্রাউন্ডের রঙ হালকা নীল বডি.স্টাইলে পরিবর্তন করুন। ব্যাকগ্রাউন্ড কালার = 'লাইটব্লিউ'আমরা জাভাস্ক্রিপ্ট ব্যবহার করে শিরোনামের পাঠ্যের রঙকে কালো থেকে লাল করে পরিবর্তন করেছি। আমরা এটি ব্যবহার করে অর্জন করেছি স্টাইল সম্পত্তি তারপর মান পরিবর্তন রঙ সমান নেট ।
এখন আসুন শরীরের উপাদানটির পটভূমির রঙটি পরিবর্তন করি হালকা নীল ।
এটির সাথে আমরা জাভাস্ক্রিপ্ট নিবন্ধে এই ডোমটির শেষের দিকে এসেছি। আমি আশা করি যে কীভাবে ডকুমেন্ট অবজেক্ট মডেলগুলি কাজ করে এবং কীভাবে জাভাস্ক্রিপ্টে একই ডিওএম প্রয়োগ করা যায় তার একটি বোঝার আপনি পেয়েছেন।
এখন আপনি জাভাস্ক্রিপ্টে ডোম সম্পর্কে জানেন, এটি পরীক্ষা করে দেখুন লিখেছেন এডুরেকা। ওয়েব ডেভেলপমেন্ট শংসাপত্র প্রশিক্ষণ আপনাকে এইচটিএমএল 5, সিএসএস 3, টুইটার বুটস্ট্র্যাপ 3, জ্যাকুয়ারি এবং গুগল এপিআই ব্যবহার করে কীভাবে চিত্তাকর্ষক ওয়েবসাইট তৈরি করতে এবং এটি অ্যামাজন সিম্পল স্টোরেজ সার্ভিসে (এস 3) স্থাপন করতে সহায়তা করবে।
আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এটি 'জাভাস্ক্রিপ্টে ডোম' এর মন্তব্য বিভাগে উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।