এই টিউটোরিয়ালটি জাভাস্ক্রিপ্টে DOM উপাদান নির্বাচন করার জন্য বিভিন্ন পদ্ধতি প্রদর্শন করবে।
জাভাস্ক্রিপ্টে DOM উপাদান নির্বাচন করার বিভিন্ন উপায় কি?
জাভাস্ক্রিপ্টে DOM উপাদান নির্বাচন করার জন্য নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করুন:
- getElementById() পদ্ধতি
- getElementsByClassName() পদ্ধতি
- getElementsByTagName() পদ্ধতি
- querySelector() পদ্ধতি
- querySelectorAll() পদ্ধতি
পদ্ধতি 1: 'getElementById()' পদ্ধতি ব্যবহার করে DOM উপাদান নির্বাচন করুন
DOM উপাদান নির্বাচন করার জন্য ' getElementById() উপাদানের নির্ধারিত আইডির উপর ভিত্তি করে পদ্ধতি। এই পদ্ধতিটি তার অনন্য দ্বারা একটি একক উপাদান নির্বাচন করে আইডি ” বৈশিষ্ট্য। এটি নির্দিষ্ট আইডি সহ উপাদানটির একটি রেফারেন্স দেয় এবং রিটার্ন করে “ খালি ” যদি কোন মিলিত উপাদান পাওয়া না যায়।
বাক্য গঠন
getElementById() পদ্ধতির জন্য নিচের প্রদত্ত সিনট্যাক্স ব্যবহার করুন:
নথি getElementById ( 'আইডিনাম' )
এখানে ' idName ” একটি এলিমেন্টে বরাদ্দ করা একটি আইডি অ্যাট্রিবিউটের নাম।
উদাহরণ
একটি এইচটিএমএল ফাইলে, একটি ডিভ এলিমেন্টে দুটি শিরোনাম তৈরি করুন ' h4 ট্যাগ div উপাদান এবং শিরোনাম “h4” এলিমেন্টে আইডি বরাদ্দ করুন “নামক div ' এবং ' শিরোনাম ”, যথাক্রমে। এটিকে কেন্দ্রে সারিবদ্ধ করতে div উপাদানটিতে শৈলী বৈশিষ্ট্য যুক্ত করুন। এছাড়াও, একটি ক্লাস বরাদ্দ করুন ' অধ্যায় ” দ্বিতীয় শিরোনামে যা এর রঙ পরিবর্তন করে:
< div আইডি = 'div' শৈলী = 'টেক্সট-সারিবদ্ধ: কেন্দ্র;' >< h4 আইডি = 'শিরোনাম' > বিভিন্ন পদ্ধতি ব্যবহার করে DOM উপাদান অ্যাক্সেস করুন < / h4 >
< h4 ক্লাস = 'অধ্যায়' আইডি = 'শিরোনাম' > 'getElementById()' পদ্ধতি ব্যবহার করে জাভাস্ক্রিপ্টে DOM উপাদান নির্বাচন করুন
< / h4 >
< / div >
এখন, আমরা পাব ' div 'এর সাহায্যে তার নির্ধারিত আইডি ব্যবহার করে উপাদান getElementById() 'পদ্ধতি:
ছিল getById = নথি getElementById ( 'div' ) ;আইডির বিপরীতে উপাদানটি প্রিন্ট করুন ' div 'কনসোলে:
কনসোল লগ ( getById ) ;এটি দেখা যায় যে প্রয়োজনীয় HTML উপাদান সফলভাবে পুনরুদ্ধার করা হয়েছে:
পদ্ধতি 2: 'getElementsByClassName()' পদ্ধতি ব্যবহার করে DOM উপাদান নির্বাচন করুন
আপনি 'এর সাহায্যে তার নির্ধারিত শ্রেণী ব্যবহার করে DOM উপাদান নির্বাচন করতে পারেন getElementsByClassName() 'পদ্ধতি। এটি তাদের শ্রেণীর নাম অনুসারে উপাদানগুলির একটি তালিকা নির্বাচন করে। এটি একটি লাইভ HTMLCollection অবজেক্টকে আউটপুট করে, একটি অ্যারের মতো অবজেক্ট যাতে নির্দিষ্ট ক্লাস নামের সমস্ত উপাদান থাকে।
বাক্য গঠন
নিম্নলিখিত সিনট্যাক্সটি 'getElementsByClassName()' পদ্ধতির জন্য ব্যবহার করা হয়েছে:
নথি getElementsByClassName ( 'শ্রেণির নাম' )উদাহরণ
এখানে, আমরা ক্লাস ধারণ করে এমন উপাদান পাব অধ্যায় ” এবং কনসোলে মুদ্রণ করুন:
ছিল getByClass = নথি getElementsByClassName ( 'অধ্যায়' ) ;কনসোল লগ ( getByClass ) ;
আপনি আউটপুটে দেখতে পাচ্ছেন, দৈর্ঘ্য 1 এর একটি অ্যারে ফিরে এসেছে যার মধ্যে একটি উপাদান রয়েছে ' h4 'কে ক্লাসের অন্তর্গত' অধ্যায় ”:
পদ্ধতি 3: 'getElementsByTagName()' পদ্ধতি ব্যবহার করে DOM উপাদান নির্বাচন করুন
যদি কোনো উপাদানের জন্য কোনো আইডি বা শ্রেণী বরাদ্দ না থাকে, তাহলে ' GetElementsByTagName() ' তাদের ট্যাগ নাম দ্বারা উপাদান পেতে পদ্ধতি. এটি একটি লাইভ HTMLCollection অবজেক্টও ফেরত দেয়, যা একটি অ্যারের মতো অবজেক্ট যাতে নির্দিষ্ট ট্যাগ নাম আছে এমন সমস্ত উপাদান রয়েছে।
বাক্য গঠন
ট্যাগ নামের উপর ভিত্তি করে উপাদান নির্বাচন করার জন্য প্রদত্ত সিনট্যাক্স অনুসরণ করুন:
getElementsByTagName ( নাম যোগ করা )উদাহরণ
ট্যাগ নাম পাস করে “getElementsByTagName()” পদ্ধতিটি চালু করুন h4 ” তারপরে, কনসোলে নির্দিষ্ট ট্যাগের নামের সাথে মেলে এমন উপাদানগুলির তালিকা প্রিন্ট করুন:
ছিল getByTag = নথি getElementsByTagName ( 'h4' ) ;কনসোল লগ ( getByTag ) ;
আউটপুট
পদ্ধতি 4: 'querySelector()' পদ্ধতি ব্যবহার করে DOM উপাদান নির্বাচন করুন
ব্যবহার ' প্রশ্ন নির্বাচক() DOM উপাদান পেতে পদ্ধতি। এটি একটি একক উপাদান নির্বাচন করে যা একটি নির্দিষ্ট CSS নির্বাচকের সাথে মেলে। এটি নথিতে পাওয়া প্রথম মিলিত উপাদান প্রদান করে। যদি কোন উপাদান মেলে না, এটি দেয় ' খালি ”
বাক্য গঠন
নীচের-উল্লেখিত সিনট্যাক্সটি 'querySelector()' পদ্ধতির জন্য ব্যবহার করা হয়েছে:
নথি querySelector ( বৈশিষ্ট্য )এখানে, বৈশিষ্ট্য হল একটি সিএসএস নির্বাচক, যেমন একটি আইডি বা ক্লাস হিসাবে “ #আমার পরিচিতি '' .আমার ক্লাস '
উদাহরণ
'querySelector()' পদ্ধতিতে কল করুন এবং আইডি পাস করুন ' #শিরোনাম একই আইডি ধারণ করে এমন উপাদানগুলি পেতে:
ছিল getByquery = নথি querySelector ( '# শিরোনাম' ) ;কনসোল লগ ( getByquery ) ;
এটি একটি আউটপুট হিসাবে প্রথম মিলে যাওয়া উপাদান দেয়:
পদ্ধতি 5: 'querySelectorAll()' পদ্ধতি ব্যবহার করে DOM উপাদান নির্বাচন করুন
আপনি যদি নির্দিষ্ট বৈশিষ্ট্য (আইডি বা ক্লাস) ধারণ করে এমন সমস্ত উপাদান নির্বাচন করতে চান, তাহলে ' querySelectorAll() 'পদ্ধতি। এটি একটি নির্দিষ্ট সংজ্ঞায়িত CSS নির্বাচকের সাথে মেলে এমন উপাদানগুলির একটি তালিকা নির্বাচন করে৷ এটি একটি নোডলিস্ট অবজেক্ট দেয় যাতে নথির সমস্ত উপাদান রয়েছে যা নির্দিষ্ট সিএসএস নির্বাচকের সাথে মেলে।
বাক্য গঠন
উপাদানগুলির তালিকা পাওয়ার জন্য নিম্নলিখিত সিনট্যাক্স ব্যবহার করুন:
নথি querySelectorAll ( বৈশিষ্ট্য )উদাহরণ
মিলিত উপাদানের তালিকা পেতে যাতে আইডি রয়েছে “ শিরোনাম 'এর সাথে' querySelectorAll() ' পদ্ধতি এবং কনসোলের উপাদানগুলিতে মুদ্রণ করুন:
ছিল getByqueryAll = নথি querySelectorAll ( '# শিরোনাম' ) ;কনসোল লগ ( getByqueryAll ) ;
আউটপুট
এটি জাভাস্ক্রিপ্টে DOM উপাদান নির্বাচন করার বিষয়ে।
উপসংহার
জাভাস্ক্রিপ্টে DOM উপাদান নির্বাচন করার জন্য, ' getElementById() ', ' getElementsByClassName() ', ' GetElementsByTagName() ', ' প্রশ্ন নির্বাচক() ', অথবা ' querySelectorAll() 'পদ্ধতি। এই পদ্ধতিগুলি তাদের অনন্য শনাক্তকারী, শ্রেণির নাম, ট্যাগ নাম বা CSS নির্বাচকদের উপর ভিত্তি করে DOM থেকে উপাদান নির্বাচন করার বিভিন্ন উপায় প্রদান করে। এই টিউটোরিয়ালটি জাভাস্ক্রিপ্টে DOM উপাদান নির্বাচন করার জন্য বিভিন্ন পদ্ধতি প্রদর্শন করেছে।