এই উত্তরটি জন্য, আমি পড়ুন querySelectorএবং querySelectorAllquerySelector যেমন * করুন এবং getElementById, getElementsByClassName, getElementsByTagName, এবং getElementsByNamegetElement যেমন *।
প্রধান পার্থক্য
- ক্যোয়ারী নির্বাচনকারী * আরও নমনীয়, যেহেতু আপনি এটি আইডি, ট্যাগ বা শ্রেণীর জন্য সহজ সাধারণগুলি নয়, কোনও সিএসএস 3 নির্বাচককে পাস করতে পারেন।
- ক্যোয়ারী নির্বাচনকারীদের কার্য সম্পাদন DOM এর আকারের সাথে এটি পরিবর্তিত হয় changes * সুনির্দিষ্টভাবে বলতে গেলে, ক্যোয়ারী নির্বাচনকারী * কলগুলি ও (এন) সময়ে চলবে এবং গেট এলিমেট * কলগুলি ও (1) সময়ে চলবে, যেখানে এন বা মৌলিক উপাদান বা নথির সমস্ত বাচ্চার মোট সংখ্যা is এই সত্যটি কমপক্ষে সুপরিচিত বলে মনে হচ্ছে, তাই আমি এটি বোল্ড করছি।
- getElement * ডম-এ সরাসরি রেফারেন্স কল করে, যেখানে ক্যোয়ারী নির্বাচনকারী * তাদের কাছে উল্লেখগুলি ফেরত দেওয়ার আগে নির্বাচিত উপাদানগুলির অনুলিপি তৈরি করে। এগুলিকে "লাইভ" এবং "স্ট্যাটিক" উপাদান হিসাবে উল্লেখ করা হয়। এটি যে ধরণের ফিরে আসে তার সাথে এটি কঠোরভাবে সম্পর্কিত নয়। কোনও উপাদান জীবিত বা স্থিতিশীল হয় কিনা তা জানার আমি জানার উপায় নেই, কারণ এটি কোনও সময়ে উপাদানটি অনুলিপি করা হয়েছিল কিনা এবং এটি ডেটার অভ্যন্তরীণ সম্পত্তি নয়। লাইভ উপাদানগুলিতে পরিবর্তনগুলি তাত্ক্ষণিকভাবে প্রয়োগ হয় - একটি লাইভ এলিমেন্ট পরিবর্তন করা সরাসরি ডম এ এটি পরিবর্তন করে এবং অতএব জেএসের একেবারে পরবর্তী লাইনটি সেই পরিবর্তনটি দেখতে পারে এবং এটি তত্ক্ষণাত সেই উপাদানটিকে উল্লেখ করে অন্য যে কোনও লাইভ উপাদানগুলিতে প্রচার করে। বর্তমান স্ক্রিপ্টটি সম্পাদন শেষ হওয়ার পরে স্থির উপাদানগুলিতে পরিবর্তনগুলি কেবল DOM এ ফিরে লেখা হয়।
- এই কলগুলির রিটার্নের ধরনগুলি পৃথক হয়।
querySelectorএবং getElementByIdউভয়ই একটি একক উপাদান ফেরত দেয়। querySelectorAllএবং getElementsByNameউভয়ই নোডলিস্টগুলি ফেরত দেয়, এইচটিএমএল কালেকশন পরে ফ্যাশন থেকে বেরিয়ে যাওয়ার পরে যুক্ত হওয়া আরও নতুন ফাংশন। পুরানো getElementsByClassNameএবং getElementsByTagNameউভয়ই এইচটিএমএল সংগ্রহ সংগ্রহ করে। আবার, এটি উপাদানগুলি লাইভ বা স্থির কিনা তা মূলত অপ্রাসঙ্গিক।
এই ধারণাগুলি সংক্ষিপ্ত বিবরণ নিম্নলিখিত টেবিলে দেওয়া হয়েছে।
Function | Live? | Type | Time Complexity
querySelector | N | Element | O(n)
querySelectorAll | N | NodeList | O(n)
getElementById | Y | Element | O(1)
getElementsByClassName | Y | HTMLCollection | O(1)
getElementsByTagName | Y | HTMLCollection | O(1)
getElementsByName | Y | NodeList | O(1)
বিশদ, টিপস এবং উদাহরণ
এইচটিএমএল সংগ্রহগুলি নোডলিস্টগুলির মতো অ্যারের মতো নয় এবং .EachEach () সমর্থন করে না। আমি এর চারপাশে কাজ করার জন্য স্প্রেড অপারেটরটিকে দরকারী বলে মনে করি:
[...document.getElementsByClassName("someClass")].forEach()
প্রতিটি উপাদান এবং বিশ্বব্যাপী এর documentব্যতীত এই সমস্ত ফাংশনে অ্যাক্সেস পায় getElementByIdএবং getElementsByNameযা কেবলমাত্র প্রয়োগ করা হয় document।
ক্যুইনসিলেক্টর * ব্যবহারের পরিবর্তে গেইলইলিমেন্ট * কলগুলি চেইন করা কার্যকারিতা উন্নত করবে, বিশেষত খুব বড় ডিওএমগুলিতে। এমনকি ছোট ডিওএম এবং / অথবা খুব দীর্ঘ চেইন সহ, এটি সাধারণত দ্রুত হয়। তবে, আপনি যদি না জানেন যে আপনার পারফরম্যান্সের দরকার নেই, ক্যোয়ারী নির্বাচনকারী * এর পাঠ্যতা পছন্দ করা উচিত। querySelectorAllপুনরায় লেখার জন্য প্রায়শই কঠিন, কারণ আপনাকে অবশ্যই প্রতিটি পদক্ষেপে নোডলিস্ট বা এইচটিএমএল সংগ্রহ থেকে উপাদান নির্বাচন করতে হবে। উদাহরণস্বরূপ, নিম্নলিখিত কোডটি কাজ করে না :
document.getElementsByClassName("someClass").getElementsByTagName("div")
because you can only use getElements* on single elements, not collections. For example:
`document.querySelector("#someId .someClass div")`
could be written as:
document.getElementById("someId").getElementsByClassName("someClass")[0].getElementsByTagName("div")[0]
Note the use of `[0]` to get just the first element of the collection at each step that returns a collection, resulting in one element at the end just like with `querySelector`.
যেহেতু সমস্ত উপাদানগুলির ক্যোয়ারী নির্বাচনকারী * এবং গেট এলিমেট * কল উভয়ের অ্যাক্সেস রয়েছে, আপনি উভয় কল ব্যবহার করে চেইন তৈরি করতে পারেন যা আপনি কিছুটা পারফরম্যান্স লাভ পেতে চাইলে দরকারী হতে পারে তবে একটি ক্যোয়ারীর নির্বাচন এড়াতে পারবেন না যা getElement * কলগুলির ক্ষেত্রে লেখা যায় না can ।
যদিও কেবলমাত্র ইলেমেট * কল ব্যবহার করে কোনও নির্বাচককে লেখা যায় কিনা তা সাধারণভাবে বলা সহজ, একটি ক্ষেত্রে রয়েছে যা সুস্পষ্ট নাও হতে পারে:
document.querySelectorAll(".class1.class2")
হিসাবে আবার লিখতে পারেন
document.getElementsByClassName("class1 class2")
কোয়েরিলেক্টরের সাথে যুক্ত স্ট্যাটিক উপাদানটিতে getElement * ব্যবহার করার ফলে এমন একটি উপাদান তৈরি হবে যা ডিওএমের স্ট্যাটিক উপসেটটি ক্যোয়ারী নির্বাচনকারী দ্বারা অনুলিপি করা হয়েছে, তবে পুরো ডকুমেন্ট ডিওএম-এর সাথে সম্মান সহ বাস করবে না ... এটিই সাধারণ উপাদানগুলির লাইভ / স্ট্যাটিক ব্যাখ্যা পৃথক হতে শুরু করে। আপনার সম্ভবত এই পরিস্থিতি এড়াতে হবে যেখানে আপনার এই চিন্তিত হতে হবে, তবে আপনি যদি মনে করেন তবে মনে রাখবেন যে ক্যোয়ারী নির্বাচনকারী * তাদের কাছে রেফারেন্সগুলি ফিরিয়ে দেওয়ার আগে তাদের খুঁজে পাওয়া অনুলিপিগুলিকে কল করে, তবে getElement * কল করে অনুলিপি ছাড়াই সরাসরি রেফারেন্স আনবে।
একাধিক মিল থাকলে কোন উপাদানটি প্রথমে নির্বাচন করা উচিত তা উভয়ই এপিআই নির্দিষ্ট করে না।
যেহেতু ক্যোয়ারিলেক্টর * ডিওএম-এর মাধ্যমে কোনও মিল খুঁজে না পাওয়া পর্যন্ত পুনরাবৃত্তি করে (মূল পার্থক্য # 2 দেখুন), উপরেরটি এও বোঝায় যে আপনি DOM এ খুঁজছেন এমন কোনও গ্যারান্টির জন্য এটি খুঁজে পেয়েছে যে এটি দ্রুত পাওয়া গেছে - ব্রাউজারটি ডিওএমের মাধ্যমে পিছনের দিকে, সম্মুখভাগে, গভীরতা প্রথমে, প্রথম প্রস্থে বা অন্যথায় পুনরাবৃত্তি করতে পারে। getElement * এখনও নির্ধারিত নির্বিশেষে প্রায় একই পরিমাণে উপাদানগুলি খুঁজে পেতে পারে।