عناصر (گره ها) HTML DOM در JavaScript

یادگیری JavaScript

تعداد بازدید : 2532

تاریخ و ساعت انتشار : دو شنبه 29 مرداد 1397 07:46

افزودن و حذف گره ها (عناصر 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 استفاده کنید:

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، باید والدین عنصر را بدانید:

حذف عنصر موجود

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

مشاهده مثال

هشدار: روش ()node.remove در هیچ نسخه ای از مرورگر اینترنت اکسپلورر کار نمی کند.

تشریح مثال

این سند 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" پیدا کنید:

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

عنصر <p> را با id = "p1" پیدا کنید:

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

فرزند را از والدین حذف کنید:

parent.removeChild(child);

خوب است که بتوانیم عنصر را بدون اشاره به والدین حذف کنیم.
اما متاسفانه DOM نیاز به دانستن پدر و مادر هر عنصر که می خواهید حذف کنید می باشد

در اینجا یک راه حل معمول وجود دارد: پیدا کردن کودک که می خواهید حذف کنید، و از ویژگی parentNode خود برای پیدا کردن والدین استفاده کنید:

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

جایگزینی عناصر HTML

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

جایگزینی عنصر html

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

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.