مشخص کردن یک المنت خاص در جاوا اسکریپت

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

برای مثال شما می خواهید متن خاصی را درون یک تگ خاص قرار دهید. شما می بایست اول به کد بفهمانید که اون تگ کجاست ، اسمش چیست و یا آی دی آن چه هست ...

مشخص کردن element با id

معمول ترین روش در جاوا اسکریپت استفاده از id در تگ ها می باشد و به کار بردن آن در جاوا اسکریپت می باشد. برای شروع شما می بایست با document آشنا شوید. این کد قبل از کدهای دیگر می آید و کاربرد بسیاری در جاوا اسکریپت دارد. معنی فارسی آن سند می باشد. شما به مرور زمان با کاربرد های آن آشنا خواهید شد.

بعد از document نوبت به getElementById میرسه. این شیء به شما کمک می کند تا یک element (عنصر - تگ) با آی دی فلان را بازخوانی (return) کند. شما باید توجه داشته باشید که جاوا اسکریپت به حروف کوچک و بزرگ حساس است.

document.getElementById('tag id');

در قسمت قهوه ای رنگ شما می بایست آی دی تگ مورد نظر رو قرار بدید. توجه کنید که آی دی چون یک متن است و توسط شما تعیین می شود و می تواند هر چیزی باشد میبایست از قانون string ها در جاوا اسکریپت حمایت کند. شما می بایست آی دی را در دو کوتیشن (') و یا دو دابل کوتیشن (") قرار بدید. در جلسات بعدی در مورد String ها کاملا بحث خواهیم کرد.

کد بالا یک تگ را با خاصیت id و مقدار tag id را بازخوانی می کند و شما می توانید از آن استفاده کنید.

مشخص کردن element با کلاس

این روش تقریبا مانند روش قبل می باشد ولی تفاوت هایی هم دارد. شما در id فقط یک تگ را بازخوانی می کنید. یعنی اگر دو تگ با id یکسان داشته باشید فقط تگ اول بازخوانی خواهد شد و بقیه تگ ها دست نخورده باقی می مانند.

اما در کلاس شما تمام تگ ها را با هم بازخوانی می کنید که از این رو مشکلاتی هم ممکن است سر راهتان قرار بگیرد.

برای شروع شما می بایست از شیء getElementsByClassName استفاده کنید. توجه کنید که کلمه Element در وسط آن یک s اضافه دارد که نشان دهنده این است که تمام عنصر ها بازخوانی (get) خواهند شد.

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

document.getElementsByClassName('moisrex');

شما هم اکنون نمی توانید استفاده هایی به غیر از length و ... کنید. شما می بایست فقط یک عنصر را بازخوانی کنید. برای این کار باید از این کد بعد از آن استفاده کنید:

document.getElementsByClassName('moisrex').item( num );

در کد بالا شما می بایست به جای num شماره تگ را قرار دهید. اولین تگ با کلاس moisrex شماره 0 می باشد ، دومین تگ با کلاس moisrex شماره 1 می باشد ، سومین تگ با کلاس moisrex شماره 2 می باشد.

شما می توانید همان کد بالا را به این صورت نیز بنویسید (به صورت خلاصه):

document.getElementsByClassName('moisrex')[ num ];

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

document.getElementsByClassName('moisrex')[0];

مشخص کردن element با تگ

این خاصیت کاملا شبیه getElementsByClassName می باشد با این تفاوت که فقط اسم آن getElementsByTagName می باشد.

شما با استفاده از آن برای مثال می توانید اولین تگ head را بازخوانی کنید یا برای مثال دومین تگ div را بازخوانی کنید.

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

document.getElementsByTagName('div')[0];

مشخص کردن یک عنصر با استفاده از name

این روش نیز مانند دو روش قبلی م یباشد با این تفاوت که خاصیت name را در نظر میگیرد. شما می بایست از getElementsByName استفاده کنید. به مثال زیر توجه کنید:

document.getElementsByName('mohammad')[0];

کد بالا اولین تگی که خاصیت name با مقدار mohammad داشته باشد را بازخوانی می کند.

مشخص کردن یک عنصر موجود در فرم

معمولا سریع تر نوشتن در فرم ها از این روش استفاده می کنند. شما در این روش فقط می توانید با name ها کار کنید. این روش فقط برای تگ form ساخته شده است.

برای مثال فرض کنید یک تگ form با خاصیت name و مقدار MoisrexForm دارید که درون آن یک تگ input با خاصیت name و مقدار MoisrexInput وجود دارد که شما می خواهید این input را بازخوانی کنید. در این صورت شما می توانید از یکی از این دو استفاده کنید:

document.MoisrexForm.MoisrexInput;

document.forms['MoisrexForm']['MoisrexInput'];

کاربرد بازخوانی کردن عناصر در جاوا اسکریپت

بعد از این که یک تگ را بازخوانی کردید می توانید مقدار خاصیت های آن را بدست بیاورید ، برای آن خاصیت جدید بسازید ، خاصیت های آن را تغییر دهید ، به آن استایل دهید ، مقدار (value) آن را تغییر دهید ، کدهای html درون آن را مورد تاثیر قرار دهید (innerHMTL) و صدها کار دیگر.

در این باره می توانید از چند مثال زیر استفاده کنید:

document.forms['MoisrexForm']['MoisrexInput'].value='excellent';

آزمایش کد بالا

document.getElementById('Moisrex').innerHTML='excellent';

آزمایش کد بالا

document.getElementsByTagName('div')[1].innerHTML='excellent';

آزمایش کد بالا