জাভাস্ক্রিপ্ট ক্যোয়ারী নির্বাচনকারী বনাম। GetElementById [বন্ধ]

Question

আমি শুনেছি querySelectorএবং উপাদান querySelectorAllনির্বাচন করার নতুন পদ্ধতি DOM। কিভাবে তারা পুরোনো পদ্ধতি তুলনা না getElementById& getElementsByClassNameকর্মক্ষমতা এবং ব্রাউজার সমর্থনের পরিপ্রেক্ষিতে?

JQuery এর ক্যোয়ারী নির্বাচক ব্যবহারের সাথে পারফরম্যান্সটি কীভাবে তুলনা করে?

কোন নেটিভ সেটটি ব্যবহার করতে হবে তার জন্য কি সর্বোত্তম অনুশীলনের সুপারিশ রয়েছে?

Comments

আরও ভাল সংজ্ঞা দিন। তারা প্রায় সম্পূর্ণ আলাদা।

এটি জিজ্ঞাসার মতো "একটি সামঞ্জস্য আকারের স্প্যানার কি সামঞ্জস্যযোগ্য স্প্যানারের চেয়ে ভাল?" উত্তর: তারা আরো শক্তিশালী এবং আরো নমনীয়, এবং তাই অনেক উচ্চতর কয়েকবার, কিন্তু getElementByIdএবং getElementsByClassNameউদ্দেশ্য এখনও তাদের নাম বর্ণনা জন্য আদর্শ।

— একাকী দিন

ওহ, এবং যে qS/qSAকোনও উপাদান প্রসঙ্গে ব্যবহার করা যেতে পারে, তবে gEBIকেবল documentপ্রসঙ্গ থেকে ব্যবহার করা যেতে পারে ।

getElementByIdidডিওএম নোডগুলি querySelectorঅনুসন্ধান করার জন্য বৈশিষ্ট্যগুলির সাথে মেলে , যখন নির্বাচকদের দ্বারা অনুসন্ধান করা হয়। সুতরাং একটি অবৈধ নির্বাচক যেমন জন্য <div id="1"></div>, getElementById('1')যখন কাজ করবে querySelector('#1')ব্যর্থ হবে, যদি না আপনি মেলে তা জানাও id(যেমন অ্যাট্রিবিউট querySelector('[id="1"]')।

— স্যামুয়েল Elh

এটি পড়ার জন্য কেবল একটি এফওয়াইআই, তবে querySelectorএবং querySelectorAllএখন পুরোপুরি সমর্থিত। caniuse.com/#feat=queryselector

— টেলরিয়ান

Answer 1

"ভাল" বিষয়গত হয়।

querySelector এটি নতুন বৈশিষ্ট্য।

getElementByIdচেয়ে ভাল সমর্থিত হয় querySelector।

querySelectorচেয়ে ভাল সমর্থিত হয় getElementsByClassName।

querySelectorআপনাকে এমন নিয়ম সহ এমন উপাদানগুলি সন্ধান করতে দেয় যা দিয়ে প্রকাশ করা যায় না getElementByIdএবংgetElementsByClassName

যে কোনও কাজের জন্য আপনার উপযুক্ত সরঞ্জামটি বেছে নেওয়া দরকার।

(উপরে / querySelectorপড়ার জন্য )।querySelectorquerySelectorAll

Comments

ক্যোয়ারী নির্বাচনকারী সমর্থন: caniuse.com/#feat=queryselector

— তাজবয়

@ জেসনভ্যানডিয়ারমিজডেন - ব্রাউজার থেকে অন্য ব্রাউজারে পরিবর্তিত হওয়ার সম্ভাবনা কম।

— কোয়ান্টিন

খুব ভাল উত্তর এবং এখানে কয়েকটি মানদণ্ড পরীক্ষা রয়েছে

— এঞ্জেল.বোনভ

কেন ভাল অর্ডার সমর্থিত: getElementById> querySelector> getElementsByClassName, কারণ আমি ভেবেছিলাম getElementsByClassNameযেমন সমর্থন একই পর্যায়ের থাকা উচিত getElementById?

— লই ইয়াং

এই উত্তরটি পদ্ধতিগুলির মধ্যে পার্থক্যকে স্পর্শ করবে বলে মনে হচ্ছে না, বিশেষত পারফরম্যান্স-ভিত্তিক।

— ড্রার বার

Answer 2

ফাংশনগুলি getElementByIdএবং getElementsByClassNameখুব সুনির্দিষ্ট, যখন querySelectorএবং querySelectorAllআরও বিস্তৃত। আমার অনুমান যে তাদের আসলে আরও খারাপ অভিনয় হবে performance

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

Comments

@ থমাস আপনার লিঙ্কটি নিচে রয়েছে। কোথাও কোনও কাজের লিঙ্ক আছে?

— ব্যবহারকারী5508297

এখানে বেশ কয়েকটি সংরক্ষণাগারিত সংস্করণ রয়েছে: web.archive.org/web/20160108040024/http://jsperf.com/… তবে পরীক্ষাটি আসলে খুব পুরানো (২০১০), সুতরাং আরও আধুনিক ইঞ্জিনগুলির সাথে ফলাফলটি খুব আলাদা হতে পারে।

— থমাস

সংরক্ষণাগারভুক্ত পৃষ্ঠাটি আসলে গতিশীল এবং আপনাকে আপনার বর্তমান ব্রাউজারে পরীক্ষাটি পুনরায় চালানোর অনুমতি দেয়। ক্যোয়ারীস্লেক্টরআলগুলি আমার ব্রাউজারে প্রায় 37% এর দ্বারা তথাকথিত ধীর হয়। (ক্রোম --১ - vgy.me/TwGL3o.png ) এটিও লক্ষণীয় যে getElementById একটি লাইভ ফলাফল দেয়, যার অর্থ আপনি যদি DOM পরিবর্তন করেন তবে এই পরিবর্তনটি getElementByID দ্বারা প্রাপ্ত ফলাফল দ্বারা প্রতিফলিত হবে (যদি স্কোপে থাকে) তবে নোডলিস্ট ক্যোয়ারী দ্বারা ফিরে এসেছেসিলিটরএল একটি স্ন্যাপশট, যেমন কল করার সময় জিনিসগুলি যেমন ছিল, ফলাফলটি ডিওমে পরবর্তী পরিবর্তনগুলি প্রতিফলিত করবে না।

— ডাব্লু.প্রিন্স

nodelist ... is not liveআপনি কি এর জন্য ডকুমেন্টেশন সরবরাহ করতে পারেন? @ ডাব্লু.প্রিনস উভয় পদ্ধতিই Elementপ্রকারটি ফেরত দেয় ।

— ম্যাক্সিমিলিয়ান বার্সলে

আহ, আমি দেখতে পাচ্ছি আমি একটি টাইপো করেছি, দয়া করে আমার ক্ষমা প্রার্থনা করুন! আমার "getElementsByClassName" লেখা উচিত ছিল যেখানে আমি "getElementByID" লিখেছিলাম, যেমন এটি getElementsByClassName (এবং অনুরূপ) যা একটি লাইভ রেজাল্ট রিটার্ন দেয় "। প্রকৃতপক্ষে উভয়ই এলিটমেন্টবাইক্লাসনাম এবং ক্যোয়ারীস্লেক্টারএল একটি নোডলিস্ট প্রদান করে তবে পূর্ববর্তী ক্ষেত্রে এটি লাইভ, এবং পরবর্তীকালে এটি একটি স্ন্যাপশট

— ডাব্লু.প্রিনস