گره های عنصر در جاوااسکریپت

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

در این آموزش ، شما همه چیز را در مورد مدیریت گره ها و JavaScript ایجاد توابع عنصر یاد خواهید گرفت. شما نحوه استفاده از روش های JavaScript insertBfore و appendChild و همچنین نحوه جایگزینی و حذف گره ها را خواهید فهمید. ما همچنین به شما نشان خواهیم داد که چگونه document.getElementById می تواند یک عنصر جدید را به یک عنصر والد اضافه کند.

نکات اصلی گره های عنصر در جاوااسکریپت

• HTML DOM به شما امکان می دهد گره ها را از طریق JavaScript اضافه و حذف کنید.
• وقتی عنصری را به HTML DOM اضافه می کنید ، اقدام به ایجاد عنصر JavaScript انجام می شود. ابتدا باید عنصر JavaScript (گره عنصر) را ایجاد کنید ، سپس آن را به عنصری که از قبل وجود دارد پیوست کنید.
• روشهای خاصی برای ایجاد ، حذف و جایگزینی عناصر گره وجود دارد.

گره های عنصر

عمل ایجاد عنصر جاوا اسکریپت هنگامی انجام می شود که گره عنصری را ایجاد کنید و سپس آن را به عنصری که از قبل وجود دارد پیوست کنید:

var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected text!");
newPara.appendChild(textNode);

var newElement = document.getElementById("parent");
newElement.appendChild(newPara);

مثال توضیح داده شده

از مثال کد زیر می توان برای ایجاد عنصر JavaScript به نام <div> استفاده کرد:

var element = document.createElement("div");

برای افزودن متن به عنصر تازه ایجاد شده ، باید گره متنی ایجاد کنید:

var textNode = document.createTextNode("Unexpected text!");

اکنون می توانید متن را به عنصر <div> تازه ایجاد شده ضمیمه کنید:

element.appendChild(textNode);

سپس ، شما باید عنصر ایجاد شده جدید را به عنصر والد اضافه کنید. با استفاده از روش document.getElementById می توانید این کار را انجام دهید:

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

در آخر ، شما باید عنصر جدید خود را به یک عنصر والد موجود اضافه کنید – والد <div>:

newElement.appendChild(newPara);

کار با عناصر HTML

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

پدید آوردن

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

نگاهی به آخرین خط کد در مثال زیر بیندازید: newElement.insertBefore (newPara، newChild) ؛.

در پرانتز ، ابتدا نام عنصری را که می خواهیم وارد کنیم (newPara تازه ایجاد شده خود) نشان دادیم و سپس عنصری را که می خواهیم عنصر جدید در آن قرار گیرد (newChild) تعریف کردیم:

var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected Text!");
newPara.appendChild(textNode);

var newElement = document.getElementById("parent");
var newChild = document.getElementById("child1");
newElement.insertBefore(newPara, newChild);

حذف کردن

اگر می خواهید عناصر ایجاد شده با روش JavaScript appendChild را حذف کنید ، می توانید با استفاده از روش removeChild عناصر را حذف کنید:

var nodeParent = document.getElementById("parent");
var nodeChild = document.getElementById("child1");
nodeParent.removeChild(nodeChild);

HTML زیر شامل یک عنصر <div> به همراه دو گره فرزند است که هر دو عنصر <p> هستند:

<div id="parent">
    <p id="child1">Text.</p>
    <p id="child2">More text.</p>
</div>

این کد عنصر دارای ویژگی id = “پدر” را پیدا می کند:

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

اکنون ، این کد عنصر <p> را با ویژگی id = “child1” پیدا می کند:

var nodeChild = document.getElementById("child1");

اکنون می توانیم با استفاده از روش removeChild روی عنصر والدی که قبلاً واقع شده است ، عنصر فرزند را حذف کنیم. در پرانتز ، ما نام متغیر عنصر فرزند را که باید حذف شود ارسال می کنیم:

nodeParent.removeChild(nodeChild);

روش دیگری برای انجام همان کار وجود دارد: اول ، کودک را پیدا می کنیم که برداشته شود ، سپس از ویژگی parentNode برای یافتن والدین عنصر کودک استفاده می کنیم. در آخر ، ما از روش removeChild با کودک استفاده می کنیم تا در پرانتز منتقل شود:

var nodeChild = document.getElementById("child1");
nodeChild.parentNode.removeChild(nodeChild);

جایگزین کردن

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

آخرین خط مثال ارائه شده در زیر را ببینید: nodeParent.replaceChild (newPara، nodeChild) ؛.

در اینجا ، ما با استفاده از روش جایگزین (ChildChild) روی گره اصلی ، ابتدا آن را در داخل پرانتز قرار می دهیم و گره جدید را قرار می دهیم ، سپس گره قدیمی را که باید حذف شود ، نشان می دهیم:

var newPara = document.createElement("p");
var textNode = document.createTextNode("Unexpected Text!");
newPara.appendChild(textNode);

var nodeParent = document.getElementById("parent");
var nodeChild = document.getElementById("child1");
nodeParent.replaceChild(newPara, nodeChild);

خلاصه گره های عنصر در جاوااسکریپت:

• با استفاده از هر دو روش appendChild و insertBefore می توانید یک گره جدید ایجاد کنید.
• می توانید یک گره را با استفاده از روش removeChild حذف کنید.
• می توانید یک گره را با استفاده از روش changeChild جایگزین کنید.