javascriptDOM selectorsانتخاب عنصر در جاوااسکریپت
انتخاب عنصر در جاوااسکریپت را با querySelector و querySelectorAll یاد بگیرید؛ نخستین تطبیق، نتیجهٔ null و فهرست ایستای گره‌ها را بررسی کنید.
مفهوم به زبان ساده
برای تغییر یک عنوان یا خواندن مقدار یک ورودی، ابتدا باید عنصر مورد نظر را از درخت DOM پیدا کنیم. querySelector یک انتخابگر CSS می‌گیرد و نخستین عنصر مطابق آن را برمی‌گرداند. نام کلاس با نقطه و شناسه با علامت # مشخص می‌شود. جست‌وجو را می‌توان از document یا از یک عنصر مشخص آغاز کرد؛ محدودکردن جست‌وجو به بخش مربوط، وابستگی به قسمت‌های دیگر صفحه را کمتر می‌کند.
اگر تطبیقی پیدا نشود، نتیجه null است. بنابراین پیش از خواندن textContent یا افزودن شنونده، وضعیت نبود عنصر را مدیریت کنید. برای همهٔ تطبیق‌ها، querySelectorAll یک NodeList ایستا می‌دهد. ایستا یعنی افزودن عنصر تازه، همان فهرست قبلی را خودکار به‌روز نمی‌کند؛ باید دوباره جست‌وجو کنید. NodeList آرایه نیست، هرچند می‌توان آن را با for...of پیمایش کرد.
مثال یک بخش مستقل و دو پاراگراف می‌سازد. پس از گرفتن فهرست، پاراگراف دوم اضافه می‌شود و تفاوت شمارش قدیمی و جست‌وجوی تازه دیده می‌شود. انتخابگر نامعتبر می‌تواند SyntaxError بدهد؛ اگر شناسه از داده می‌آید، برای ساخت انتخابگر از CSS.escape استفاده کنید. در تمرین، کلاس پاراگراف دوم را عوض کنید و نتیجهٔ جست‌وجو را پیش‌بینی کنید.
کجا به کار می‌آید؟
- پیداکردن یک کنترل در بخش مشخصی از فرم
- گرفتن مجموعه‌ای از کارت‌ها برای پیمایش و به‌روزرسانی
از تعریف تا یک مثال واقعی
const panel = document.createElement('section');
const first = document.createElement('p');
first.className = 'lesson';
first.textContent = 'مبانی';
panel.append(first);
const before = panel.querySelectorAll('.lesson');
const second = document.createElement('p');
second.className = 'lesson';
panel.append(second);
console.log(panel.querySelector('.lesson').textContent);
console.log(before.length);
console.log(panel.querySelectorAll('.lesson').length);
console.log(panel.querySelector('.missing') === null);
مبانی 1 2 true
این مثال چطور کار می‌کند؟
جست‌وجوی نخست، پاراگراف دارای کلاس lesson را پیدا می‌کند.
before در زمان جست‌وجو یک عضو دارد و پس از append ثابت می‌ماند.
جست‌وجوی تازه دو عضو می‌بیند؛ انتخابگر ناموجود null می‌دهد.
اشتباه رایج
از نتیجهٔ querySelector بدون بررسی نبود عنصر استفاده نکنید. querySelectorAll نیز فهرست ایستا می‌دهد و نامعتبر بودن نحو انتخابگر با نبود تطبیق فرق دارد.
این را به خاطر بسپارید
یک عنصر، چند عنصر و نبود عنصر سه نتیجهٔ متفاوت‌اند؛ روش انتخاب را با هدف خود هماهنگ کنید.