آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش 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);
امتحان کنید

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

  • 4187
  •    1986
  • تاریخ ارسال :   1394/08/12

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .