সঠিক জাভাস্ক্রিপ্ট নির্বাচনকারী নির্বাচন করে হতাশা এড়াতে কীভাবে

নির্বাচকরা আপনার কোডকে কীভাবে প্রভাবিত করে তার একটি দ্রুত গাইড

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

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

অনুমান

এই নিবন্ধে, আমি ধরে নিচ্ছি যে কিছু জিনিস সত্য:

  • আপনি "সরল বা ভ্যানিলা" জাভাস্ক্রিপ্টে কাজ করছেন (কোনও ফ্রেমওয়ার্ক / লাইব্রেরি নেই)
  • আপনার জাভাস্ক্রিপ্ট উপাদান / নির্বাচনকারীদের সম্পর্কে প্রাথমিক ধারণা রয়েছে
  • আপনার ডিওএম সম্পর্কে প্রাথমিক ধারণা রয়েছে

কৌতুকপূর্ণ কৌতুক

আমি যদি খুব বেশি অনুমান করেছি তবে আমি নিবন্ধে প্রাসঙ্গিক উপাদানের লিঙ্ক সরবরাহ করেছি যা আশা করি সহায়ক হবে।

জাভাস্ক্রিপ্ট এমন একটি বিস্তৃত এবং বিস্তৃত বাস্তুসংস্থান যে একই কাজ সম্পাদন করার জন্য অনেকগুলি উপায় আছে এতে অবাক হওয়ার কিছু নেই। আপনার কাজের উপর নির্ভর করে এটি কিছুটা পরিমাণে কীভাবে পরিচালিত হয়।

আপনি আপনার হাত দিয়ে একটি গর্ত খনন করতে পারেন, তবে একটি বেলচা দিয়ে এটি করা আরও সহজ এবং আরও কার্যকর।

সে লক্ষ্যে, এই নিবন্ধটি পড়ার পরে, আমি আপনাকে একটি বেলচা দেবেন আশা করি।

আনপ্লেশ-এ খার্ট উইলিয়ামস লিখেছেন,

কাজের জন্য সঠিক সরঞ্জাম নির্বাচন করা

আমাকে জিজ্ঞাসা করা হয়েছে "আমার কোন উপাদান নির্বাচনকারী ব্যবহার করা উচিত?" এখন অবধি, আমার কোডটি যতক্ষণ না আমার পছন্দ ফলাফলটি সরবরাহ করছিল ততক্ষণ আমি তার মতো পার্থক্যটি শিখতে পারি নি। ট্যাক্সিটির রঙ বলতে কী বোঝায় যদি এটি আপনাকে নিরাপদে এবং সময়মতো আপনার গন্তব্যে নিয়ে যায়?

আসুন জাভাস্ক্রিপ্টে DOM উপাদান নির্বাচন করার কয়েকটি পদ্ধতি দিয়ে শুরু করি। আইটেম নির্বাচন করার আরও অনেক উপায় রয়েছে (তবে আমার মনে হয়) এখানে তালিকাবদ্ধ রয়েছে যা সবচেয়ে সাধারণ।

document.getElementById ()

এগুলি কেবলমাত্র একটি (1) উপাদান ফেরত দেয়, যেহেতু আইডিগুলি তাদের প্রকৃতির দ্বারা স্বতন্ত্র এবং পৃষ্ঠাতে কেবল কখনও একই উপাদান (একই নামের) থাকতে পারে।

এটি এমন একটি বস্তু প্রদান করে যা পাস করা স্ট্রিংয়ের সাথে মেলে। আপনার এইচটিএমএলে কোনও ম্যাচিং আইডি না পাওয়া গেলে এটি নালায় ফিরে আসবে।

সিনট্যাক্স উদাহরণ -> ডকুমেন্ট.জেট এলিমেন্টবাইআইডি ('মেইন_ কনটেন্ট')

কিছু নির্বাচকদের থেকে ভিন্ন যা আমরা এই নিবন্ধে পরে আলোচনা করব, উপাদান আইডি সনাক্ত করার জন্য একটি # প্রয়োজন হয় না।

ডকুমেন্ট.জেট এলিমেন্টস বাইট্যাগনাম ()

উপাদানগুলিতে "এস" নোট করুন। এই নির্বাচনকারী একটি এইচটিএমএল সংগ্রহ হিসাবে পরিচিত অ্যারে-জাতীয় কাঠামোয় গুণগুলি ফেরত দেয়। রুট নোড (ডকুমেন্ট অবজেক্ট) সহ পুরো ডকুমেন্ট একটি উপযুক্ত নামের জন্য অনুসন্ধান করা হয়। এই উপাদান নির্বাচনটি নথির শীর্ষে শুরু হয় এবং অব্যাহত থাকে। এটি এমন ট্যাগগুলির সন্ধান করে যা পাস করা স্ট্রিংয়ের সাথে মেলে।

আপনি যদি দেশীয় অ্যারে পদ্ধতিগুলি ব্যবহার করতে চান তবে আপনার ভাগ্যের বাইরে। এটি কেবল তখনই প্রযোজ্য যদি আপনি ফিরে আসা ফলাফলগুলিকে পুনরাবৃত্ত করতে অ্যারেতে রূপান্তর করতে চলেছেন বা আপনি ES6 বিতরণ অপারেটর ব্যবহার করছেন - উভয়ই এই নিবন্ধের আওতার বাইরে। তবে আমি চেয়েছিলাম যে আপনি যদি জানতে চান তবে অ্যারে পদ্ধতিগুলি ব্যবহার করা সম্ভব।

সিনট্যাক্স উদাহরণ -> ডকুমেন্ট.জেট এলিমেন্টস বাই টাইগনাম ('শিরোনাম_লিংক')। এই নির্বাচক পি, ডিভি, বডি, বা অন্যান্য বৈধ এইচটিএমএল ট্যাগও গ্রহণ করে।

ডকুমেন্ট.জেটএলমেন্টস বাইক্লাসনেম ()

শ্রেণীর নাম নির্বাচনকারী - এখানে উপাদানগুলিতে "এস" নোট করুন। এই নির্বাচক শ্রেণীর নামের এইচটিএমএল সংগ্রহ হিসাবে পরিচিত অ্যারে-জাতীয় কাঠামোয় গুণগুলি ফেরত দেয়। এটি পাস করা স্ট্রিংয়ের সাথে মিলে যায় (এক স্থানের দ্বারা পৃথক হওয়া সত্ত্বেও একাধিক শ্রেণীর নাম নিতে পারে), পুরো দস্তাবেজ অনুসন্ধান করে, যে কোনও উপাদানগুলির জন্য ডাকা যেতে পারে এবং কেবল শ্রেণীর উত্তীর্ণদেরই ফিরে আসে returns

এবং না. (পিরিয়ড) ক্লাসের নাম সনাক্ত করার জন্য প্রয়োজনীয়

সিনট্যাক্সের উদাহরণ -> ডকুমেন্ট.জেট এলিমেন্টসওয়াই ক্লাসনাম ('ক্লাসনেম')

ডকুমেন্ট.কোয়ারী নির্বাচনকারী ()

এই নির্বাচক কেবল কখনও একটি (1) উপাদান ফেরত দেয়।

পাস করা স্ট্রিংয়ের সাথে মেলে এমন প্রথম উপাদানটিই ফিরে আসে। নির্দিষ্ট স্ট্রিংয়ের জন্য যদি কোনও মিল খুঁজে পাওয়া যায় না, তবে নাল ফেরানো হবে।

সিনট্যাক্স উদাহরণ -> ডকুমেন্ট.কোয়ারী নির্বাচনকারী ("# পার্শ্ব_নোট") বা ডকুমেন্ট.কোয়ারী নির্বাচনকারী ("। শিরোনাম_সংযোগ")

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

ডকুমেন্ট.কোয়ারী নির্বাচনকারী সমস্ত ()

এই নির্বাচকটি বহুগুণ দেয় যা স্ট্রিংয়ের সাথে মেলে এবং তাদের ন্যারেড তালিকার মতো অন্য অ্যারের মতো কাঠামোয় সাজায়।

পূর্ববর্তী কয়েকটি উদাহরণের মতো, নোড তালিকাটি দেশী অ্যারে পদ্ধতি যেমন .forEach () ব্যবহার করতে পারে না। সুতরাং আপনি যদি এটি ব্যবহার করতে চান তবে আপনাকে অবশ্যই প্রথমে নোড তালিকাটিকে একটি অ্যারেতে রূপান্তর করতে হবে। আপনি রূপান্তর করতে না চাইলে আপনি নোড তালিকার মাধ্যমে স্টেটমেন্টে ... সহ পুনরাবৃত্তি করতে পারেন।

পাস করা স্ট্রিং অবশ্যই একটি বৈধ সিএসএস নির্বাচক - আইডি, শ্রেণীর নাম, প্রকার, গুণাবলী, বৈশিষ্ট্যের মান ইত্যাদির সাথে মেলে must

সিনট্যাক্সের উদাহরণ -> ডকুমেন্ট.কোয়ারীসিলিটরআল ('। ফুটার_লিঙ্কস')

শেষ করি

আপনার কোডিং প্রয়োজনের জন্য সঠিক নির্বাচনকারী নির্বাচন করা আমার পক্ষে অনেকগুলি সমস্যা এড়াতে পারে। আপনার কোডটি কাজ না করলে এটি অবিশ্বাস্যরকম হতাশ হতে পারে। যাইহোক, আপনি যদি নিশ্চিত হন যে আপনার নির্বাচক আপনার পরিস্থিতিগত প্রয়োজনের উপযুক্ত করে, আপনি সহজেই আপনার বেলচা দিয়ে "খনন" করতে পারেন :)

এই পোস্ট পড়ার জন্য আপনাকে ধন্যবাদ। যদি আপনি এটি পছন্দ করেন তবে কিছু গসিপ অনুদান করার কথা বিবেচনা করুন যাতে অন্যরাও এটি খুঁজে পেতে পারে। আমি আমার ব্লগে সম্পর্কিত বিষয়বস্তু পোস্ট করি (আমি আরও লিখতে সক্রিয়ভাবে আমার তফসিলটি পরিচালনা করি)। আমি টুইটারেও সক্রিয় এবং অন্যান্য বিকাশকারীদের সাথে যোগাযোগ করতে পেরে আমি সর্বদা খুশি!