آموزش JavaScript
بستن دسته بندی
دسته بندی ها ( ۲۵۲ آموزش )
لیست همه کلیدهای این موضوع
نمایش دسته بندی ها (۲۵۲ آموزش)
مباحث اولیه، در JavaScript
مباحث اولیه، در JavaScript
18
کنسول (Console)، در JavaScript
کنسول (Console)، در JavaScript
24
نمایش متن در خروجی صفحه، در JavaScript
نمایش متن در خروجی صفحه، در JavaScript
2
عملگرها (Operator)، در JavaScript
عملگرها (Operator)، در JavaScript
0
متغیرها (Variable)، در JavaScript
متغیرها (Variable)، در JavaScript
8
رشته ها (متن ها - String)، در JavaScript
رشته ها (متن ها - String)، در JavaScript
26
نمایش پیام، در JavaScript
نمایش پیام، در JavaScript
4
توابع (Function)، در JavaScript
توابع (Function)، در JavaScript
5
حلقه ها (Loop)، در JavaScript
حلقه ها (Loop)، در JavaScript
3
آرایه ها (Array)، در JavaScript
آرایه ها (Array)، در JavaScript
30
شیء ها (Object)، در JavaScript
شیء ها (Object)، در JavaScript
2
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در JavaScript
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در JavaScript
7
کلاس های (Class) عنصرها، در JavaScript
کلاس های (Class) عنصرها، در JavaScript
5
id عنصرها، در JavaScript
id عنصرها، در JavaScript
0
مشخصه های (Attribute) عنصرها، در JavaScript
مشخصه های (Attribute) عنصرها، در JavaScript
1
رویدادها (Event)، در JavaScript
رویدادها (Event)، در JavaScript
0
عملیات های ریاضی، در JavaScript
عملیات های ریاضی، در JavaScript
18
تاریخ و زمان، در JavaScript
تاریخ و زمان، در JavaScript
10
زمان بندی اجرای کدها، در JavaScript
زمان بندی اجرای کدها، در JavaScript
2
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
6
فرم ها (Form)، در JavaScript
فرم ها (Form)، در JavaScript
11
عکس ها (Image)، در JavaScript
عکس ها (Image)، در JavaScript
2
دکمه ها (Button)، در JavaScript
دکمه ها (Button)، در JavaScript
2
لینک ها (Link)، در JavaScript
لینک ها (Link)، در JavaScript
5
پنجره ها (Window)، در JavaScript
پنجره ها (Window)، در JavaScript
2
جدول ها (Table)، در JavaScript
جدول ها (Table)، در JavaScript
1
رنگ ها (Color) و تعیین رنگ، در JavaScript
رنگ ها (Color) و تعیین رنگ، در JavaScript
1
کلیک کردن (Click)، در JavaScript
کلیک کردن (Click)، در JavaScript
1
اسکرول (Scroll)، در JavaScript
اسکرول (Scroll)، در JavaScript
2
کار با کل صفحه، در JavaScript
کار با کل صفحه، در JavaScript
1
صفحه فعلی (Current Page)، در JavaScript
صفحه فعلی (Current Page)، در JavaScript
19
دریافت ورودی از کاربر، در JavaScript
دریافت ورودی از کاربر، در JavaScript
1
تمرکز (Focus)، در JavaScript
تمرکز (Focus)، در JavaScript
3
مرورگر اینترنت (Browser)، در JavaScript
مرورگر اینترنت (Browser)، در JavaScript
3
ذخیره اطلاعات در مرورگر اینترنت (Browser) کاربر، در JavaScript
ذخیره اطلاعات در مرورگر اینترنت (Browser) کاربر، در JavaScript
10
کار با کیبورد (Keyboard)، در JavaScript
کار با کیبورد (Keyboard)، در JavaScript
2
موس، در JavaScript
موس، در JavaScript
1
Iframe ها، در JavaScript
Iframe ها، در JavaScript
1
بارگذاری (دانلود) فایل، در JavaScript
بارگذاری (دانلود) فایل، در JavaScript
1
علامت ها (Sign)، در JavaScript
علامت ها (Sign)، در JavaScript
0
تکنیک Ajax ، در JavaScript
تکنیک Ajax ، در JavaScript
4
ساختار JSON ، در JavaScript
ساختار JSON ، در JavaScript
0
منسوخ شده ها (Deprecated و Obsolete)، در JavaScript
منسوخ شده ها (Deprecated و Obsolete)، در JavaScript
1
مباحث عمومی، در JavaScript
مباحث عمومی، در JavaScript
2

نویسنده علیرضا گلمکانی
شماره کلید 28212
گزینه ها

انتخاب همه عنصرهایی (Element) از صفحه که دارای یک کلاس (Class) خاص می باشند، با روش document.getElementsByClassName ، در JavaScript

با استفاده از روش document.getElementsByClassName در JavaScript ، می توانیم همه عنصرهایی (Element) از صفحه که دارای یک کلاس (Class) خاص می باشند را انتخاب نماییم.

به عنوان مثال، اگر بخواهیم همه عنصرهایی (Element) از صفحه که دارای کلاس kelidestan می باشند را انتخاب نماییم، آنگاه باید کد JavaScript زیر را بنویسیم :

طرح رنگ

پس از اجرای کد بالا، عنصرهای انتخاب شده در یک مجموعه از عنصرها (HTMLCollection) با نام collection ذخیره می شوند، که بر اساس شماره متناظر با آنها (index) می توانیم به آنها اشاره کنیم.

مثلا برای اشاره به اولین عنصر، عبارت زیر را می نویسیم (شماره های متناظر از 0 شروع می شود، نه از 1) :

طرح رنگ

و برای برای اشاره به دومین عنصر، عبارت زیر را می نویسیم :

طرح رنگ

به مثال زیر توجه کنید :

مثال

در صفحه HTML ، دو عنصر با نام کلاس (Class) برابر kelidestan قرار می دهیم. سپس آن دو عنصر را بر اساس نام کلاس (Class) و با استفاده از روش document.getElementsByClassName انتخاب نموده و رنگ پس زمینه اولین عنصر را به رنگ نارنجی (orange) تغییر می دهیم.

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال

در صفحه HTML ، سه عنصر با نام کلاس (Class) برابر kelidestan قرار می دهیم. سپس آن سه عنصر را بر اساس نام کلاس (Class) و با استفاده از روش document.getElementsByClassName انتخاب نموده و با استفاده از یک حلقه for ، رنگ پس زمینه هر سه عنصر را به رنگ نارنجی (orange) تغییر می دهیم.

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
نکته

برای انتخاب همه عنصرهایی (Element) از صفحه که دارای دو یا چند کلاس (Class) خاص می باشند، کلید آموزشی زیر را بخوانید :

کپی برداری توسط سایر وب سایت ها، ممنوع بوده و پیگرد قانونی دارد. (بیشتر بدانید)

گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

جستجو در کلیدستان، توسط گوگل

جستجو در عنوان کلیدها

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو
آموزش jQuery
بستن دسته بندی
دسته بندی ها ( ۴۶ آموزش )
لیست همه کلیدهای این موضوع
مباحث اولیه، در jQuery
مباحث اولیه، در jQuery
10
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در jQuery
انتخاب عنصرهای صفحه (اشاره به عنصرهای صفحه)، در jQuery
2
کلاس های (Class) عنصرها، در jQuery
کلاس های (Class) عنصرها، در jQuery
1
id عنصرها، در jQuery
id عنصرها، در jQuery
0
رویدادها (Event)، در jQuery
رویدادها (Event)، در jQuery
6
چک کردن محتوای صفحه، در jQuery
چک کردن محتوای صفحه، در jQuery
0
تغییر محتوای صفحه، در jQuery
تغییر محتوای صفحه، در jQuery
8
بچه های (Child) عنصرها، در jQuery
بچه های (Child) عنصرها، در jQuery
1
رنگ ها (Color) و تعیین رنگ، در jQuery
رنگ ها (Color) و تعیین رنگ، در jQuery
1
فرم ها (Form)، در jQuery
فرم ها (Form)، در jQuery
3
دکمه ها (Button)، در jQuery
دکمه ها (Button)، در jQuery
1
اندازه عنصرها و بخش های صفحه، در jQuery
اندازه عنصرها و بخش های صفحه، در jQuery
6
کلیک کردن (Click)، در jQuery
کلیک کردن (Click)، در jQuery
0
اسکرول (Scroll)، در jQuery
اسکرول (Scroll)، در jQuery
2
کار با کل صفحه، در jQuery
کار با کل صفحه، در jQuery
1
تکنیک AJAX ، در jQuery
تکنیک AJAX ، در jQuery
2
مباحث عمومی، در jQuery
مباحث عمومی، در jQuery
2
آموزش JSON
بستن دسته بندی
دسته بندی ها ( ۴ آموزش )
لیست همه کلیدهای این موضوع
مباحث اولیه، در JSON
مباحث اولیه، در JSON
4
دسته کلیدهایی از موضوع های دیگر
ساختار JSON ، در PHP
ساختار JSON ، در PHP
2
آموزش HTML
بستن دسته بندی
دسته بندی ها ( ۱۰۴ آموزش )
لیست همه کلیدهای این موضوع
مباحث اولیه، در HTML
مباحث اولیه، در HTML
24
نمایش متن (Text)، در HTML
نمایش متن (Text)، در HTML
16
نمایش عکس (Image)، در HTML
نمایش عکس (Image)، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
2
فهرست ها (لیست ها - List)، در HTML
فهرست ها (لیست ها - List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
7
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
21
کلاس های (Class) عنصرها، در HTML
کلاس های (Class) عنصرها، در HTML
1
id عنصرها، در HTML
id عنصرها، در HTML
0
چیدمان عنصرها (Element) در کنار هم، در HTML
چیدمان عنصرها (Element) در کنار هم، در HTML
2
تعیین مشخصات کلی صفحه (Page)، در HTML
تعیین مشخصات کلی صفحه (Page)، در HTML
7
ساختار کلی و بخش بندی صفحه (Page)، در HTML
ساختار کلی و بخش بندی صفحه (Page)، در HTML
2
نمایش یا عدم نمایش عنصرها (Element)، در HTML
نمایش یا عدم نمایش عنصرها (Element)، در HTML
1
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
رنگ ها (Color) و تعیین رنگ، در HTML
رنگ ها (Color) و تعیین رنگ، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
اطلاعات و پردازش اطلاعات، در HTML
اطلاعات و پردازش اطلاعات، در HTML
1
مباحث عمومی، در HTML
مباحث عمومی، در HTML
6