این آموزش در تاریخ ۱۴۰۱/۰۴/۱۹ آپدیت شده است.
آموزش کار با عناصر در زبان جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با عناصر در زبان جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با عناصر در زبان جاوا اسکریپت
خب دوستان در ادامه ی این آموزش میخوایم از طریق DOM در زبان جاوا اسکریپت با تگ ها کار کنیم و ببینیم چی هستند و چجوری میتونیم مثلا یک تگ جدید در صفحه ایجاد کنیم یا حذف کنیم و..
پس در ادامه میخوایم با موارد زیر کار کنیم و یادشون بگیریم :
- createElement : برای ایجاد تگ جدید
- appendChild : برای اضافه / ضمیمه کردن چیزی به چیز دیگر
- createTextNode : ایجاد محتوا / متن در تگ
- replaceChild : جایگزین کردن تگ جدید با تگ فعلی موجود در تگ والد
- removeChild : برای حذف یک تگ از تگ والد
- insertBefore : برای اضافه کردن به قبل از یک تگ
Free-Learn
کار با متد های createElement و appendChild و createTextNode
با استفاده از متد createElement
که از اسمشم کاملا مشخصه ،به راحتی میتونیم یه تگ جدید در صفحه ایجاد کنیم.
1 |
var MyH2 = document.createElement('h2'); |
خب ما طبق دستور بالا یه تگ h2 ایجاد کردیم، حال خب تگ ایجاد شد، و میدونید که تگ تا محتوا نداشته باشه خب طبیعتا در خروجی ظاهری هم نداره.
حالا میخوایم یک متن رو به همین تگی که ایجاد کردیم اضافه کنیم، پس باید از متد createTextNode
استفاده نماییم ، به همین سادگی تموم شد رفت.
1 |
var MyContent = document.createTextNode("سایت آموزشی فری لرن"); |
خب پس تا الان ، هم تگ و هم متن درونشو ایجاد کردیم ، حالا باید متن ایجاد شده رو بریزیم داخل اون تگی که ایجاد کردیم، پس اینجاست که باید از appendChild
استفاده نماییم.
1 |
MyH2.appendChild(MyContent); |
کد کامل :
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var MyH2 = document.createElement('h2'); var MyContent = document.createTextNode("سایت آموزشی فری لرن"); // قرار دادن متن درون تگ اچ دو MyH2.appendChild(MyContent); // قرار دادن تگ درون تگ بادی document.body.appendChild(MyH2); </script> |
Free-Learn
کار با متد replaceChild
همونطور که از اسم این متد replaceChild
مشخصه، ما میتونیم با استفاده از آن یک عنصر رو جایگزین عنصر فعلی کنیم.
شکل کلی بصورت زیر می باشد :
1 |
parentNode.replaceChild( newChild , oldChild ); |
- parentNode : اون تگ یا عنصر والد
- newChild : عنصر جدید
- oldChild : عنصر فعلی یا قدیمی
مثال : در مثال زیر یک تگ div داریم که ۲تا تگ ، یکی P و دیگری H2 درونش قرار داره ، میخوایم خودمون یه تگ P درست کنیم و متن ” سایت آموزشی فری لرن ” رو داخلش قرار بدیم و در نهایت همین تگی که درست کردیم رو با تگ H2 جایگزین کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> function Replace(){ var Pedar = document.getElementById("Pedar"); var Farzand2 = document.getElementById("Farzand_2"); var MyP = document.createElement('p'); var MyContent = document.createTextNode("سایت آموزشی فری لرن"); MyP.appendChild(MyContent); Pedar.replaceChild(MyP,Farzand2); } </script> |
Free-Learn
کار با متد removeChild
این متد هم از اسمش مشخصه که چکار میکنه، با استفاده از این متد میتونیم فرزندان یک تگ والد رو حذف کنیم.
1 2 3 4 5 6 7 8 9 |
<script> function Del(){ var Pedar = document.getElementById("Pedar"); var Farzand3 = document.getElementById("farzand_3"); Pedar.removeChild(Farzand3); } </script> |
Free-Learn
کار با متد insertBefore
خب ما در مثال های قبلی با استفاده از متد appendChild یاد گرفتیم که میتونیم یک عنصر رو به یک عنصر والد اضافه کنیم، حال اگه توجه کرده باشید متد appendChild
میاد و عنصر رو به عنوان آخرین فرزند یک عنصر والد اضافه میکنه.
خب شاید من نخوام عنصر رو به آخرین بخش یا قسمت ( یا آخرین عنصر فرزند ) اضافه کنم، مثلا شاید بخوام به قبل یا بعد از فلان عنصر اضافش کنم، خب باید چکار کنم؟
اینجاست که ما با استفاده از متد insertBefore
میتونیم به دلخواه خودمون مشخص کنیم که عنصر رو کجا قرار بدیم، مثلا میتونیم بگیم قبل از فلان عنصر.
مثال : در مثال زیر یه تگ ul داریم ، و میخوایم با استفاده از جاوااسکریپت یه تگ li درست کنیم و بعدش به تگ ul اضافش کنیم ( میخوایم اون رو قبل از آیتم شماره ۳ قرار میدیم )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> function Create(){ var Pedar = document.getElementById("Pedar"); var Item_3 = document.getElementById("Item_3"); var MyItem = document.createElement('li'); var MyContent = document.createTextNode("سایت آموزشی فری لرن"); MyItem.appendChild(MyContent); MyItem.style.color = "red"; Pedar.insertBefore( MyItem , Item_3 ); } </script> |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : کاربر میتونه تگ و متن داخل تگ رو مشخص کنه بعدش با کلیک بروی دکمه ، اون تگ ایجاد میشه.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> function Create(){ var Utag , Utext , CE , Ac , Result; Utag = document.getElementById("SelectTag").value; Utext = document.getElementById("Content").value; Result = document.getElementById("Result"); if( Utext == "" ){ alert("لطفا متن را مشخص کنید"); }else{ CE = document.createElement(Utag); Ac = document.createTextNode(Utext); CE.appendChild(Ac); Result.appendChild(CE); Result.style.display = "block"; } } </script> |