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

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

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

ساخت عناصر جدید HTML (گره ها)

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

مثال

 1<div id="div1">
 2  <p id="p1">This is a paragraph.</p>
 3  <p id="p2">This is another paragraph.</p>
 4</div>
 5
 6<script>
 7var para = document.createElement("p");
 8var node = document.createTextNode("This is new.");
 9para.appendChild(node);
10
11var element = document.getElementById("div1");
12element.appendChild(para);
13</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() استفاده کنید:

مثال

 1<div id="div1">
 2  <p id="p1">This is a paragraph.</p>
 3  <p id="p2">This is another paragraph.</p>
 4</div>
 5
 6<script>
 7var para = document.createElement("p");
 8var node = document.createTextNode("This is new.");
 9para.appendChild(node);
10
11var element = document.getElementById("div1");
12var child = document.getElementById("p1");
13element.insertBefore(para, child);
14</script>


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


حذف کردن یک عنصر HTML موجود

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

مثال

1<div>
2  <p id="p1">This is a paragraph.</p>
3  <p id="p2">This is another paragraph.</p>
4</div>
5
6<script>
7var elmnt = document.getElementById("p1");
8elmnt.remove();
9</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() پشتیبانی نمی‌کنند، شما می‌بایست گرهٔ والد یا پدر را برای حذف یک عنصر پیدا کنید:

مثال

 1<div id="div1">
 2  <p id="p1">This is a paragraph.</p>
 3  <p id="p2">This is another paragraph.</p>
 4</div>
 5
 6<script>
 7var parent = document.getElementById("div1");
 8var child = document.getElementById("p1");
 9parent.removeChild(child);
10</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() استفاده کنید:

مثال

 1<div id="div1">
 2  <p id="p1">This is a paragraph.</p>
 3  <p id="p2">This is another paragraph.</p>
 4</div>
 5
 6<script>
 7var para = document.createElement("p");
 8var node = document.createTextNode("This is new.");
 9para.appendChild(node);
10
11var parent = document.getElementById("div1");
12var child = document.getElementById("p1");
13parent.replaceChild(para, child);
14</script>


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



منابع آموزشی