اضافه کردن ، ویرایش یا حذف المنت ها در جاوا اسکریپت | JavaScript DOM Manipulation

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

اکنون که نحوه انتخاب و استایل دادن به عناصر HTML DOM را آموختید. در این جلسه ما یاد خواهیم گرفت که چگونه عناصر DOM را به صورت پویا اضافه ،ویرایش و یا حذف کنیم.

اضافه کردن المنت جدید در جاوا اسکریپت

اضافه کردن ، ویرایش یا حذف المنت ها در جاوا اسکریپت | JavaScript DOM Manipulation

شما میتوانید به صورت صریح با استفاده از متد ()document.createElement عنصر جدیدی را در HTML document ایجاد کنید.این متد یک عنصر جدید ایجاد می کند، اما آن را به DOM اضافه نمی کند. شما باید این کار را در یک مرحله جداگانه انجام دهید. به عنوان مثال:

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

ویرایش محتوای المنت ها در جاوا اسکریپت

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

   همانطور که می بینید چقدر راحت می توانید عناصر جدید را با استفاده از ویژگی  innerHTML در DOM وارد کنید، اما یک مشکل وجود دارد، ویژگی  innerHTML تمام محتوای موجود یک عنصر را جایگزین می کند.بنابراین اگر می‌خواهید HTML را بدون جایگزین کردن محتوای موجود یک عنصر در سند وارد کنید، می‌توانید از متد ()insertAdjacentHTML استفاده کنید.

این روش دو پارامتر را می پذیرد:

  1. محتوای HTML 
  2. موقعیتی که باید در آن درج شود.

موقعیت باید یکی از مقادیر زیر را داشته باشد:

  1. beforebegin
  2. afterbegin
  3. beforeend
  4. afterend

این روش در تمام مرورگرهای اصلی پشتیبانی می شود. مثال زیر نحوه عملکرد متدهای اعلامی را نشان میدهد.

نکته:موقعیت های beforebegin و  afterend فقط در صورتی کار می کنند که گره در درخت DOM باشد و یک عنصر والد داشته باشد.همچنین، موقع به کاربردن از این ویژگی جهت جلوگیری از حملات XSS مراقب باشید.

حذف عناصر از DOM در جاوا اسکریپت

برای اینکار شما می توانید از متد ()removeChild  برای حذف یک گره فرزند از DOM استفاده کنید. این متد عنصر حذف شده را نیز برمی گرداند. به عنوان مثال:

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

 جایگزینی عناصر موجود در DOM

 با استفاده از متد  ()replaceChild  شما همچنین می توانید یک عنصر را در HTML DOM با عنصر دیگری جایگزین کنید.

این روش دو پارامتر را می پذیرد:

  1. عنصری  که باید درج شود 
  2. عنصری که باید جایگزین شود.

و سینتکس آن به این شکل می باشد. ;parentNode.replaceChild(newChild, oldChild)

به عنوان مثال:

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

سایر مقالات:

 

 

 

 

 

 

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]
اشتراک‌گذاری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *