JavaScript:عناصر (گره‌ها) HTML DOM در جاوااسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
HTML DOM
۱JavaScript:HTML DOM در جاوااسکریپت
۲JavaScript:متدهای HTML DOM در جاوااسکریپت
۳JavaScript:HTML DOM Document در جاوااسکریپت
۴JavaScript:عناصر HTML DOM در جاوااسکریپت
۵JavaScript:HTML DOM در جاوااسکریپت - تغییر محتوای HTML
۶JavaScript:DOM در جاوااسکریپت - تغییر CSS
۷JavaScript:انیمیشن در HTML DOM جاوااسکریپت
۸JavaScript:رویدادها در HTML DOM جاوااسکریپت
۹JavaScript:شنونده رویداد در HTML DOM جاوااسکریپت
۱۰JavaScript:پیمایش در HTML DOM جاوااسکریپت
۱۱JavaScript:عناصر (گره‌ها) HTML DOM در جاوااسکریپت
۱۲JavaScript:مجموعه‌های HTML DOM جاوااسکریپت
۱۳JavaScript:لیست گره‌ها در HTML DOM جاوااسکریپت
Browser BOM
۱JavaScript:پنجره جاوااسکریپت - مدل شیء مرورگر
۲JavaScript:پنجره صفحه نمایش در جاوااسکریپت
۳JavaScript:موقعیت پنجره در جاوااسکریپت
۴JavaScript:تاریخچه پنجره در جاوااسکریپت
۵JavaScript:ناوبری پنجره در جاوااسکریپت
۶JavaScript:جعبه پیغام جاوااسکریپت
۷JavaScript:رویدادهای زمان‌بندی شده در جاوااسکریپت
۸JavaScript:کوکی‌های جاوااسکریپت
---

اضافه کردن و حذف کردن گره‌ها (عناصر 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()پشتیبانی نمی‌کنند، شما می‌بایست گرهٔ والد یا پدر را برای حذف یک عنصر پیدا کنید:

مثال

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

منابع آموزشی