تفاوت دو دستور

querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript

getElemetById/Class در این دو تابع، عنصر مورد نظر براساس شناسه/نام کلاس پیدا میشه و انتخاب میشه (بصورت جدا از هم).
اما تابع querySelector تابع قوی تری هستش که بعدها اومد تا کار رو ساده تر کنه، این انتخابگر شبیه به انتخابگرهای css هستش و به مانند انتخابگرهای داخل css میتونید عناصر سند html رو پیدا کنید.

داداش
getElemetsByTag هم همونه و میشه به همین getElement هم استایل داد
تازه کلا دارم یاد میگیرم میخوام ببینم تفاوتی و ویژگی های هرکدوم چیه بالاخرخ باید به یه درد متفاوتی بخورن مثل let & var
@milad

توی getElementById یا کلاس شما براساس نام کلاس یا نام آی دی میتونی یه المنت دسترسی داشته باشی اما توی کوئری سلکتور میتونی براساس سلکتور های سی اس اس هم دسترسی داشته باشی مثلا

p.className #id

همشون بمنظور انتخاب عناصر بکار گرفته میشن.
تفاوتش هم ذکر شدش.
شما در getElemetById براساس شناسه عنصر، اون رو انتخاب میکنی، ولی مثلا براساس نام کلاس نمیتونی انتخابش کنی.
شما در getElemetsByTag براساس برچسب عنصر، اون رو انتخاب میکنی، ولی مثلا براساس نام کلاس نمیتونی انتخابش کنی.
شما در getElementClass براساس نام کلاس های اون عنصر، اون رو انتخاب میکنی، ولی مثلا براساس شناسه عنصر نمیتونی انتخابش کنی.

اما تابع querySelector بعد از اینها بوجود اومده و تابع قوی تری هستش و براساس انتخابگرهای css میتونی عنصر موردنظرت رو پیدا کنی. یعنی هم براساس شناسه عنصر میشه، هم نام کلاس، هم نام برچسب، هم ویژگی عنصر و ...

سلام.منم این سوال برام پیش اومد و رفتم دنبالش اما راستش توی اکثر منابع فارسی و انگلیسی توضیح درستی ندادن.
آخر سر خودم نشستم و تک تک حالتهاشو بررسی کردم و به این نتیجه رسیدم که با هم توی نتیجه کار فرق دارن.
شاید نتایج به هم نزدیک باشن ولی توی کار همین تفاوتای کوچیک میتونه باگهای مسخره و اذیت کنی داشته باشه.
تمام حالات رو میزارم تا خودت بررسی کنی و متوجه بشی...
HTML:

<div id="ID"> <div class="Class">SimpleText </div> </div>

Script:

const ElementByGet = document.getElementById('ID');  
const ElementByQuery = document.querySelector('#ID');  
const ElementBarByGetByGet = ElementByGet.getElementsByClassName('Class');  
const ElementBarByGetByQuery = ElementByGet.querySelector('.Class');  
const ElementBarByQueryByGet = ElementByQuery.getElementsByClassName('.Class');  
const ElementBarByQueryByQuery = ElementByQuery.querySelector('.Class');

console.log( 'Log1' , ElementByGet , ElementByGet === ElementByQuery);  
console.log( 'Log2' , ElementBarByGetByGet , ElementBarByGetByQuery , ElementBarByGetByGet == ElementBarByGetByQuery);  
console.log( 'Log3' , ElementBarByQueryByGet , ElementBarByQueryByQuery , ElementBarByQueryByGet == ElementBarByQueryByQuery);  
console.log( 'Log4' , ElementBarByGetByGet , ElementBarByQueryByGet , ElementBarByGetByGet == ElementBarByQueryByGet);  
console.log( 'Log5' , ElementBarByGetByQuery , ElementBarByQueryByQuery , ElementBarByGetByQuery == ElementBarByQueryByQuery);  

Log:

Script.js:40 Log1 <div id=​"ID">​…​</div>​<div class=​"Class">​SimpleText ​</div>​</div>​ true

Script.js:41 Log2 HTMLCollection [div.Class]0: div.Classlength: 1[[Prototype]]: HTMLCollection <div class=​"Class">​SimpleText ​</div>​ false

Script.js:42 Log3 HTMLCollection []length: 0[[Prototype]]: HTMLCollection <div class=​"Class">​SimpleText ​</div>​ false

Script.js:43 Log4 HTMLCollection [div.Class]0: div.Classlength: 1[[Prototype]]: HTMLCollection HTMLCollection []length: 0[[Prototype]]: HTMLCollection false

Script.js:44 Log5 <div class=​"Class">​SimpleText ​</div>​ <div class=​"Class">​SimpleText ​</div>​ true

ببین تابع های getElemetById یا getElemetByClass مخصوصا برای پیدا کردن یه المنت با یه Class/ID ساخته شدن.
اما با queryselector و queryselectorall میتونی مثل CSS المنت ها رو انتخاب کنی. مثلا:

document.querySelector('#id.class-name[attribute-name]');

حالا تفاوتی که بین querySelectorAll و querySelector وجود داره اینکه querySelectorAll همه المنت هایی که اون مشخصات رو دارن(مثلا یه class مشترک) رو انتخاب(Select) میکنه اما querySelector فقط یکیشونو انتخاب میکنه