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

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

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

Free-Learn

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

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

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

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

Free-Learn

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

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

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

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

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

و در نهایت میخوایم تگی که ایجاد کردیم رو درون صفحه ( تگ body ) به نمایش درآوریم.

امتحان کنید

Free-Learn

کار با متد replaceChild

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

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

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

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

امتحان کنید

Free-Learn

کار با متد removeChild

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

امتحان کنید

Free-Learn

کار با متد insertBefore

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

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

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

خب اگه بخوایم به بعد از یک عنصر اضافه کنیم باید چکار کرد؟ خب سادس، با استفاده از همون insertBefore میشه هم قبل و هم بعد از یک عنصر اضافه کرد، یعنی وقتی قبل از فلان عنصر باشه پس یعنی بعد از بهمان عنصر میشه، مثلا اگه T2 به قبل از T3 اضافه شه پس یعنی T2 بعد از T1 و قبل از T3 میشه.

مثال : یه تگ div داریم که ۳ تا فرزند داره، میخوایم یه عنصر جدید خودمون ایجاد کنیم و اون رو قبل از فرزند ۳ قرار بدیم.

امتحان کنید

Free-Learn

کار با متد cloneNode

کلمه clone در لغت یعنی ” شبیه ” ولی خب خودمونی و درکل یعنی کپی برابر اصل یا تکثیر زدن ، با استفاده از این متد میتونیم از روی یک عنصر به راحتی کپی بزنیم یا ازش یه نسخه دیگه تکثیر کنیم.

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب