جاواسکریپت: ۱۲- سلکت

برای کار بر روی بخشی از صفحه وب، باید ابتدا آن بخش را پیدا کرد. سپس با پراپرتی‌ها یا متدهای آن کار کرد.

برای سرچ در صفحه و سلکت بخشی از آن چندین متد وجود دارد.

• getElementById
• getElementsByName
• getElementsByTagName
• getElementsByClassName
• querySelector
• querySelectorAll

یافتن المنت با id

متد getElementById پرکاربردترین متد جاواسکریپت است. در فایل HTML هر المنت می‌تواند id داشته باشد. و همیشه id باید در هر فایل یکتا باشند. به زبان دیگر در یک فایل HTML دو المنت نمی‌توانند یک id مشترک داشته باشند. بنابر این هر getElementById تنها یک المنت را می‌گیرد.

<h1 id="hi">Hello World!</h1>

const hi = document.getElementById('hi');

یافتن المنت‌ها با اتریبیوت name

متد getElementsByName بر اساس اتریبیوت name در المنت‌های HTML عمل می‌کند. در فایل HTML هر المنت می‌تواند یک name داشته باشد. ولی name لازم نیست، یکتا باشند. یعنی در یک فایل HTML دو یا چند المنت می‌توانند یک name یکسان داشته باشند. و getElementsByName یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، با آن name را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن name ادامه پیدا می‌کند.

<input type="text" name="firstname">

const fname = document.getElementsByName('firstname')[0];

یافتن المنت‌ها با تگ HTML

متد getElementsByTagName بر اساس Tag المنت‌های HTML جستجو می‌کند. در فایل HTML هر المنت یک Tag دارد. و getElementsByTagName یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، درون آن Tag را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن Tag ادامه پیدا می‌کند.

<h1>Hello World!</h1>

const hi = document.getElementsByTagName('h3')[0];

یافتن المنت‌ها با کلاس

متد getElementsByClass بر اساس Class المنت‌های HTML جستجو می‌کند. در فایل HTML هر المنت می‌تواند یک Class داشته باشد. و getElementsByClass یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، که دارای آن Class هستند، را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن class ادامه پیدا می‌کند.

<h1 class="title">Hello World!</h1>

const hi = document.getElementsByClass('title')[0];

یافتن المنت با سلکتور CSS

متد querySelector بر اساس سلکتور CSS المنت‌ها در HTML جستجو می‌کند. و querySelector اولین المنت که با شرایط سلکتور هماهنگ باشد را می‌گیرد.

<h1 class="title">Hello World!</h1>

const hi = document.querySelector('h1.title');

یافتن المنت‌ها با سلکتور CSS

متد querySelectorAll بر اساس سلکتور CSS المنت‌ها در HTML جستجو می‌کند. و querySelectorAll یک آرایه از المنت‌هایی که با شرایط سلکتور هماهنگ باشد را می‌گیرد.

این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن شرایط هماهنگ باشد، ادامه پیدا می‌کند.

<h1 class="title">Hello World!</h1>

const hi = document.querySelectorAll('h1.title')[0];