آموزش javascript Dom Nodes

حذف و اضافه ی گره ها (المان های HTML)

ایجاد المان ها (گره های) جدید HTML

به منظور افزودن یک المان جدید به HTML DOM، ابتدا باید المان مورد نظر (element node) را ایجاد کرده، سپس عنصر ایجاد شده را به المان موجود الحاق (پیوست) کنید.

        var para = document.createElement("p");
        var node = document.createTextNode("This is new.");
        para.appendChild(node);
        var element = document.getElementById("div1");
        element.appendChild(para);

این کد یک المان جدید <p> ایجاد می کند:

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

به منظور افزودن نوشته به المان

، ابتدا باید یک گره ی متنی (text node) ایجاد کنید. کد زیر یک گره ی متنی ایجاد می کند:

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

سپس باید گره ی متنی را به المان <p> الحاق کنید:

                         para.appendChild(node);  

در مرحله ی آخر، المان جدید را به المان موجود پیوست کنید.
این کد یک المان موجود را یافته و بازیابی می کند:

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

حال کد زیر المان جدید را به المان موجود الحاق می کند:

                        element.appendChild(para);

تابع ()insertBefore – متد جایگزین ()appendChild

می توان از متد ()insertBefore به عنوان جایگزین برای ()appendChild که در مثال پیشین بکار گرفته شد، استفاده کنید.

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

حذف المان های موجود

جهت حذف المان یک عنصر HTML، ابتدا باید والد (parent) المان مورد نظر را پیدا کنید:

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

این صفحه ی HTML دارای یک عنصر <div> است که دو گره ی فرزند (دو المان <p>) دارد:

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

المانی که شناسه ی آن "div1"است را پیدا کرده و بازیابی کنید:

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

حال آن المانی را پیدا کنید که شناسه ی آن "p1"می باشد:

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

المان فرزند (child) را از parent حذف کنید:

                        parent.removeChild(child);

برای حذف یک المان حتما باید ابتدا والد آن را پیدا کنید، زیرا که مدل DOM اجازه ی حذف المان فرزند را بدون اشاره به والد آن نمی دهد.
یک راه حل پرطرفدار این است که ابتدا المانی (child) که قصد حذف کردن آن را دارید، پیدا کرده سپس با استفاده از خاصیت parentNode، والد آن را پیدا کنید:

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

جایگزین کردن المان های HTML

جهت جایگزین کردن یک المان در مدل DOM، کافی است از متد ()replaceChild استفاده کنید:

        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        var para = document.createElement("p");
        var node = document.createTextNode("This is new.");
        para.appendChild(node);
        parent.replaceChild(para, child);

مشاهده فیلم آموزشی کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده بوده و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.