عناصر HTML DOM (گره‌ها)

از موتو کد، دانشنامهٔ برنامه‌نویسی

اضافه کردن و حذف کردن گره‌ها (عناصر HTML) [۱]

ساخت عناصر جدید HTML (گره ها)[ویرایش | ویرایش]

برای اضافه کردن یک عنصر جدید به HTML DOM، شما می‌بایست عنصر (گرهٔ عنصر) را ابتدا بسازید و سپس آن را به یک عنصر موجود، متصل کنید.

مثال[ویرایش | ویرایش]

<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> ایجاد می‌کند:

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

برای اضافه کردن متن به عنصر <p>، شما می‌بایست اول گرهٔ متنی را ایجاد کنید. کد زیر یک گرهٔ متنی ایجاد می‌کند:

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

سپس شما می‌بایست گرهٔ متنی را به عنصر <p> متصل کنید:

para.appendChild(node);

در نهایت شما می‌بایست عنصر جدید را به یک عنصر موجود وصل کنید.

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

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

کد زیر عنصر جدید را به یک عنصر موجود متصل می‌کند:

element.appendChild(para);

ساختن عناصر جدید HTML - متد insertBefore()[ویرایش | ویرایش]

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

اگر شما این امر را نمی‌خواهید، شما می‌توانید از متد 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>


مشاهدهٔ نتیجه


حذف کردن یک عنصر HTML موجود[ویرایش | ویرایش]

برای حذف یک عنصر HTML، از متد remove() استفاده کنید:

مثال[ویرایش | ویرایش]

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

<script>
var elmnt = document.getElementById("p1");
elmnt.remove();
</script>


مشاهدهٔ نتیجه


توضیح مثال[ویرایش | ویرایش]

سند HTML فوق، یک عنصر <div> با دو گرهٔ فرزند (دو عنصر <p>) دارد :

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

ابتدا می‌بایست عنصری را که می‌خواهید حذف کنید، پیدا کنید:

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

سپس متد remove() را روی آن عنصر اجرا کنید:

elmnt.remove();
متد remove() در مرورگرهای قدیمی‌تر کار نمی‌کند، مثال زیر را ببینید تا بفهمید که چگونه از متد removeChild() بجای متد remove() می‌بایست استفاده کنید.

پاک کردن یک گرهٔ فرزند[ویرایش | ویرایش]

برای مرورگرهایی که از متد remove() پشتیبانی نمی‌کنند، شما می‌بایست گرهٔ والد یا پدر را برای حذف یک عنصر پیدا کنید:

مثال[ویرایش | ویرایش]

<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>


مشاهدهٔ نتیجه


توضیح مثال[ویرایش | ویرایش]

سند HTML فوق، یک عنصر <div> با دو گرهٔ فرزند (دو عنصر <p>) دارد :

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

ابتدا عنصر با id یا شناسه برابر با "div1" را پیدا می‌کند: id="div1"

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

سپس عنصر <p> با شناسهٔ برابر با "p1" را پیدا می کند: id="p1"

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

سپس فرزند را از گرهٔ پدر (parent) حذف می‌کند:

parent.removeChild(child);

اینجا یک راه حل رایج وجود دارد: گرهٔ فرزندی را که می‌خواهید پاک کنید، پیدا کنید و از ویژگی parentNode آن عنصر والد را پیدا کنید:

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

جا به جایی عناصر HTML[ویرایش | ویرایش]

برای جابه‌جا کردن یک عنصر به HTML DOM، از متد replaceChild() استفاده کنید:

مثال[ویرایش | ویرایش]

<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>


مشاهدهٔ نتیجه



منابع آموزشی[ویرایش]