این آموزش در تاریخ ۱۴۰۱/۰۴/۱۹ آپدیت شده است.

آموزش کار با عناصر در زبان جاوا اسکریپت

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

آموزش کار با عناصر در زبان جاوا اسکریپت

Free-Learn

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

خب دوستان در ادامه ی این آموزش میخوایم از طریق DOM در زبان جاوا اسکریپت با تگ ها کار کنیم و ببینیم چی هستند و چجوری میتونیم مثلا یک تگ جدید در صفحه ایجاد کنیم یا حذف کنیم و..

پس در ادامه میخوایم با موارد زیر کار کنیم و یادشون بگیریم :

  • createElement : برای ایجاد تگ جدید
  • appendChild : برای اضافه / ضمیمه کردن چیزی به چیز دیگر
  • createTextNode : ایجاد محتوا / متن در تگ
  • replaceChild : جایگزین کردن تگ جدید با تگ فعلی موجود در تگ والد
  • removeChild : برای حذف یک تگ از تگ والد
  • insertBefore : برای اضافه کردن به قبل از یک تگ

Free-Learn

کار با متد های createElement و appendChild و createTextNode

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

خب ما طبق دستور بالا یه تگ h2 ایجاد کردیم، حال خب تگ ایجاد شد، و میدونید که تگ تا محتوا نداشته باشه خب طبیعتا در خروجی ظاهری هم نداره.

حالا میخوایم یک متن رو به همین تگی که ایجاد کردیم اضافه کنیم، پس باید از متد createTextNode استفاده نماییم ، به همین سادگی تموم شد رفت.

خب پس تا الان ، هم تگ و هم متن درونشو ایجاد کردیم ، حالا باید متن ایجاد شده رو بریزیم داخل اون تگی که ایجاد کردیم، پس اینجاست که باید از appendChild استفاده نماییم.

 

کد کامل :

امتحان کنید

Free-Learn

کار با متد replaceChild

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

شکل کلی بصورت زیر می باشد :

  • parentNode : اون تگ یا عنصر والد
  • newChild : عنصر جدید
  • oldChild : عنصر فعلی یا قدیمی

مثال : در مثال زیر یک تگ div داریم که ۲تا تگ ، یکی P و دیگری H2 درونش قرار داره ، میخوایم خودمون یه تگ P درست کنیم و متن ” سایت آموزشی فری لرن ” رو داخلش قرار بدیم و در نهایت همین تگی که درست کردیم رو با تگ H2 جایگزین کنیم.

امتحان کنید

Free-Learn

کار با متد removeChild

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

امتحان کنید

Free-Learn

کار با متد insertBefore

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

خب شاید من نخوام عنصر رو به آخرین بخش یا قسمت ( یا آخرین عنصر فرزند ) اضافه کنم، مثلا شاید بخوام به قبل یا بعد از فلان عنصر اضافش کنم، خب باید چکار کنم؟

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

مثال : در مثال زیر یه تگ ul داریم ، و میخوایم با استفاده از جاوااسکریپت یه تگ li درست کنیم و بعدش به تگ ul اضافش کنیم ( میخوایم اون رو قبل از آیتم شماره ۳ قرار میدیم )

امتحان کنید

Free-Learn

مثال های بیشتر

مثال شماره ۱ : کاربر میتونه تگ و متن داخل تگ رو مشخص کنه بعدش با کلیک بروی دکمه ، اون تگ ایجاد میشه.

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب