گره های DOM (DOM Nodes)
«گره های DOM» اجزای درخت صفحه اند. هر عنصر، متن، و نظر یک «گره (Node)» است. با ایجاد، اضافه کردن، حذف، و جایگزینی، محتوا را مدیریت می کنیم؛ مثل جابه جایی کارت ها در دفتر مشق.
ایجاد عنصر جدید (createElement و createTextNode)
برای افزودن عنصر، اول عنصر را بساز، بعد متن را بساز، سپس همه را به والد وصل کن.
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
افزودن در جای مشخص (insertBefore)
اگر انتهای والد نمی خواهی، با insertBefore قبلِ فرزند هدف بگذار.
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.insertBefore(para, child);
حذف عنصر (remove)
مستقیم خود عنصر را بردار. این کار ساده و خواناست.
const elmnt = document.getElementById("p1");
elmnt.remove();
حذف امن برای مرورگرهای قدیمی (removeChild)
اگر remove() نبود، والد را بیاب و با removeChild حذف کن.
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
const child2 = document.getElementById("p1");
child2.parentNode.removeChild(child2);
جایگزینی عنصر (replaceChild)
برای جایگزینی، عنصر تازه را بساز و به جای قدیمی بگذار.
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const oldChild = document.getElementById("p1");
parent.replaceChild(para, oldChild);
گام های عملی
- عنصر یا متن جدید را بساز.
- متن را به عنصر پیوند بزن.
- آن را به والد مناسب اضافه یا جایگزین کن.
نکته: «گره متن (Text Node)» خود متن است. گاهی باید جداگانه ساخته شود.
لینک های مرتبط
- پیمایش DOM؛ حرکت بین والد، فرزند، هم سطح.
- شنونده رویداد؛ تعامل با گره های ساخته شده.
جمع بندی سریع
- ساخت: createElement + createTextNode.
- افزودن: appendChild یا insertBefore.
- حذف: remove یا removeChild.
- جایگزینی: replaceChild سریع و تمیز.