آموزش 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
28
نمایش پیام، در JavaScript
نمایش پیام، در JavaScript
4
توابع (Function)، در JavaScript
توابع (Function)، در JavaScript
5
حلقه ها (Loop)، در JavaScript
حلقه ها (Loop)، در JavaScript
3
آرایه ها (Array)، در JavaScript
آرایه ها (Array)، در JavaScript
34
شیء ها (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

به دست آوردن فهرست همه عنصرهای input در فرم (Form) (همه فرم های صفحه و یا تنها یک فرم خاص در صفحه)، با روش getElementsByTagName ، در JavaScript

برای به دست آوردن فهرست تمامی عنصرهای input موجود در یک فرم (Form)، می توانیم از روش getElementsByTagName در JavaScript استفاده نماییم.

شیوه استفاده از روش getElementsByTagName به صورت زیر می باشد :

پس از اجرای کد بالا، متغیر inputs حاوی فهرست کامل عنصرهای input موجود در صفحه می باشد و اکنون می توانیم به اطلاعات مربوط به آنها، از طریق متغیر inputs دسترسی داشته باشیم.

همانطور که مشاهده می کنید، در واقع روش getElementsByTagName در JavaScript ، برای یافتن تمامی تگ های از یک نوع خاص (مثلا همه تگ های input یا همه تگ های p یا همه تگ های a و ...) به کار می رود و ما به آن اعلام کرده ایم که تمامی تگ های input موجود در صفحه HTML را بیابد، که در واقع می‌شوند همان تگ های input موجود در فرم (Form) مورد نظر ما (البته اگر تنها یک فرم (Form) در صفحه داشته باشیم، حالت داشتن بیشتر از یک فرم (Form) را نیز شرح خواهیم داد).

بعد از به دست آوردن فهرست تگ های input (که در واقع، کل اطلاعات مربوط به آنها می باشد)، آنگاه می توانیم مواردی مثل نام (name) و مقدار (value) و ... از آنها را بررسی کنیم.

نکته

اگر در صفحه HTML ، بیش از یک فرم (Form) داشته باشیم و بخواهیم که تنها تگ های input موجود در یکی از آن فرم ها (Form) را بیابیم، آنگاه می توانیم کد JavaScript زیر را به کار ببریم :

که در آن، فرض کرده ایم که فرم (Form) مورد نظرمان دارای id برابر kelidestan_form می باشد.

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

مثال

یک فرم (Form) می سازیم که دارای تعدادی تگ input باشد. سپس با استفاده از روش getElementsByTagName ، فهرست آنها را به دست آورده و در خروجی صفحه، نام (name) آنها را نمایش می‌دهیم.

کد HTML مربوط به فرم (Form) :

کدهای JavaScript :

که در آن، اطلاعات مربوط به تگ های input ، در متغیر inputs ذخیره شده است و در حلقه for ، با استفاده از عبارت زیر، به نام (name) هر یک از آنها، دسترسی خواهیم داشت :

کل کدهای صفحه HTML :

نتیجه :

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

یک فرم (Form) می سازیم که دارای تعدادی تگ input باشد. سپس با استفاده از روش getElementsByTagName ، فهرست آنها را به دست آورده و در خروجی صفحه، نام (name) و مقدار (value) آنها را نمایش می‌دهیم.

کد HTML مربوط به فرم (Form) :

کدهای JavaScript :

که در آن، اطلاعات مربوط به تگ های input ، در متغیر inputs ذخیره شده است و در حلقه for ، با استفاده از دو عبارت زیر، به نام (name) و مقدار (value) هر یک از آنها، دسترسی خواهیم داشت :

کل کدهای صفحه HTML :

نتیجه :

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

در این مثال، به جای یک فرم (Form)، دو فرم (Form) در صفحه خواهیم داشت، که هر کدام دارای تعدادی تگ input می باشند. اکنون قصد داریم که با استفاده از روش getElementsByTagName ، تنها فهرست تگ های input موجود در فرم (Form) دوم را به دست آورده و در خروجی صفحه، نام (name) آنها را نمایش دهیم (فهرست تگ های input از فرم (Form) اول را نمی خواهیم).

کد HTML مربوط به فرم ها (Form) :

کدهای JavaScript :

نکته مهم این است که ابتدا تگ form مربوط به فرم (Form) دوم را بر اساس نام id آن، انتخاب کرده ایم و بعد روش getElementsByTagName را بر روی آن اعمال کرده ایم تا تنها تگ های input موجود در آن را بیابیم :

اطلاعات مربوط به تگ های input فرم (Form) دوم، در متغیر inputs ذخیره شده است و در حلقه for ، با استفاده از عبارت زیر، به نام (name) هر یک از آنها، دسترسی خواهیم داشت :

کل کدهای صفحه HTML :

نتیجه :

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

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

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

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

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

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

دسترسی سریع

کلید
×

شماره کلید


دسته بندی
×

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


جستجو
×

جستجو