این آموزش در تاریخ ۱۴۰۱/۰۵/۰۴ آپدیت شده است.
آموزش متد cloneNode در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد cloneNode در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد cloneNode در DOM جاوااسکریپت
با استفاده از متد ()cloneNode میتونیم یک کپی برابر اصل ( یا به اصطلاح کلون یا Clone ) از روی یک گره بگیریم.
وقتی کپی رو گرفتیم میتونیم با استفاده از متد ()appendChild اون نسخه ی کپی شده رو در صفحه به نمایش درآوریم.
| مقدار برگشتی | برگشت شئ گره ای که کلون یا کپی گرفته شده |
|---|---|
| نسخه DOM | DOM Level 1 |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در مثال زیر از تگ Input کپی گرفتیم بعدش داخل MyBox قرارش دادیم
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function MyClone(){ var MyBox , MyInput, MyClone; MyBox = document.getElementById('MyBox'); MyInput = document.getElementById('MyInput'); MyClone = MyInput.cloneNode(true); MyBox.appendChild(MyClone); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()cloneNode | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.cloneNode(deep); |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| deep | اختیاری – مشخص میکند که آیا از همه تگ های داخل گره کپی گرفته شود یا خیر true : یعنی بله هم از صفت ها و هم تگ های داخل تگ کپی میگیره false : یعنی خیر ، فقط از خوده تگ و صفت هاش کپی میگیره ( گزینه پیش فرض ) |
Free-Learn
نکات و توضیحات
- همیشه با استفاده از متد ()appendChild میتونیم گره ( تگ هارو ) به صفحه یا یک مکان مشخص شده ( مثلا درون یک تگ خاص ) درج یا اضافه نماییم.
