جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
elyas
4 سال پیش توسط elyas مطرح شد
7 پاسخ

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

اقا دستور

getElemetById/Class

فرقش با

querySelectorAll  

چیه؟؟؟


ثبت پرسش جدید
کامران داور
تخصص : Front-end developer
@kamran.davar 4 سال پیش مطرح شد
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

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


elyas
تخصص : آموزگار و برنامه نويس مبتدي
@elias 4 سال پیش آپدیت شد
3

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


سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 4 سال پیش مطرح شد
2

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

p.className #id

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

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

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


ParsaOne
@ParsaOne 2 سال پیش آپدیت شد
0

سلام.منم این سوال برام پیش اومد و رفتم دنبالش اما راستش توی اکثر منابع فارسی و انگلیسی توضیح درستی ندادن.
آخر سر خودم نشستم و تک تک حالتهاشو بررسی کردم و به این نتیجه رسیدم که با هم توی نتیجه کار فرق دارن.
شاید نتایج به هم نزدیک باشن ولی توی کار همین تفاوتای کوچیک میتونه باگهای مسخره و اذیت کنی داشته باشه.
تمام حالات رو میزارم تا خودت بررسی کنی و متوجه بشی...
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

ASPgo
تخصص : HTML، CSS، PHP و JS، طراح قالب...
@asp.gosk 2 سال پیش آپدیت شد
0

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

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

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


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام