۲۴
آبان

جلسه ۸۱ : node ها در جاوا اسکریپت

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

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

کار با node ها در جاوا اسکریپت

در ادامه ی مبحث با فراگیری چگونگی کار با node ها در جاوا اسکریپت در واقع با یک روش اضافه یا حذف عناصر html در جاوا اسکریپت آشنا خواهید شد.

ایجاد یک عنصر html جدید (یا همان node)

برای اضافه کردن یک عنصر جدید، ابتدا باید عنصری (گره عنصر) را ایجاد کرده و سپس آن را به یک عنصر موجود اضافه کنید.

مثال : افزودن عنصر جدید

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var para = document.createElement("p");

var node = document.createTextNode("This is new.");

para.appendChild(node);

var element = document.getElementById("div1");

element.appendChild(para);

</script>

خودتان امتحان کنید »

تشریح مثال فوق :

کد زیر یک عنصر <p> جدید ایجاد می کند :

مثال :

var para = document.createElement("p");

1	var para = document.createElement("p");

برای اضافه کردن متن به عنصر <p>، ابتدا باید یک گره متنی ایجاد کنید. این کد یک گره متنی ایجاد می کند:

مثال :

var node = document.createTextNode("This is a new paragraph.");

1	var node = document.createTextNode("This is a new paragraph.");

سپس باید text node را به عنصر <p>اضافه کنید:

مثال :

para.appendChild(node);

1	para.appendChild(node);

در نهایت شما باید عنصر جدید را به یک عنصر موجود اضافه کنید.

این کد عنصر موجود را پیدا می کند:

مثال :

var element = document.getElementById("div1");

1	var element = document.getElementById("div1");

این کد عنصر جدید را به عنصر موجود اضافه می کند:

مثال :

element.appendChild(para);

1	element.appendChild(para);

ایجاد عنصر html جدید با متد ()insertBefore

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

اگر شما نمی خواهید که شما می توانید از متد ()insertBefore استفاده کنید:

مثال : استفاده از متد ()insertBefore

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var para = document.createElement("p");

var node = document.createTextNode("This is new.");

para.appendChild(node);

var element = document.getElementById("div1");

var child = document.getElementById("p1");

element.insertBefore(para, child);

</script>

خودتان امتحان کنید »

حذف عناصر html موجود

برای حذف یک عنصر html موجود، باید عنصر والد آن را بدانید :

مثال : حذف عناصر html موجود

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var parent = document.getElementById("div1");

var child = document.getElementById("p1");

parent.removeChild(child);

</script>

خودتان امتحان کنید »

نکته : متد ()node.remove در هیچیک از نسخه های Internet Explorer کار نمی کند.

تشریح مثال فوق :

کد HTML زیر شامل یک عنصر <div> و دو عنصر فرزند (دو عنصر <p>) می باشد:

مثال :

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

پیدا کردن عنصری با خصوصیت “id=”div1 :

مثال :

var parent = document.getElementById("div1");

1	var parent = document.getElementById("div1");

پیدا کردن عنصر <p> که ویژگی “id=”p1 دارد :

مثال :

var child = document.getElementById("p1");

1	var child = document.getElementById("p1");

حذف فرزند از عنصر والد :

مثال :

parent.removeChild(child);

1	parent.removeChild(child);

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

در اینجا یک راه حل معمول وجود دارد: پیدا کردن فرزندی که می خواهید حذف کنید، و از ویژگی parentNode خود برای پیدا کردن والدین استفاده کنید:

مثال :

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

1 2	var child = document.getElementById("p1"); child.parentNode.removeChild(child);

جایگزینی عناصر html

برای جایگزینی یک عنصر html از متد ()replaceChild استفاده کنید.

مثال : جایگزینی عناصر html

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

var para = document.createElement("p");

var node = document.createTextNode("This is new.");

para.appendChild(node);

var parent = document.getElementById("div1");

var child = document.getElementById("p1");

parent.replaceChild(para, child);

</script>

خودتان امتحان کنید »

کلام آخر

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

به اشتراک بگذارید

node ها در جاوا اسکریپت

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۸۱ : node ها در جاوا اسکریپت

مقدمه

کار با node ها در جاوا اسکریپت

ایجاد یک عنصر html جدید (یا همان node)

ایجاد عنصر html جدید با متد ()insertBefore

حذف عناصر html موجود

جایگزینی عناصر html

کلام آخر

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ