سنكمل العمل على نفس المثال الموجود في الدرس الثانيخلال هذا الدرس .أبسط مثال على تغير محتوى الصفحة بالجافا سكريبت من خلال الـ Dom هو تغير النصوص من بإستخدام nodeValue كالتالي : سنغير النص first item الموجود كأول عنصر من عناصر القائمة

textnode=document.getElementsByTagName('li')[0].firstChild
textnode.nodeValue="changed"

عند كتابة هذا النص في الكنسول للمثال الذي نعمل عليه ستجد أن أول عنصر في القائمة تغير من first item لـ changed .و كما ذكرنا في الدرس السابق أن nodeValue تصلح فقط مع نقط النصوص فهي بتغير قيمتها أيضا لا تصلح إلا لتغير قيم النصوص أما إذا كنت تريد أن تغير محتوى الهيتمل كله لنقطة كأن تغير محتوى div مثلا فماذا تفعل؟.أبسط طريقة تكون بإستخدام أداة innerHTML

innerHTML

بإستخدام innerHTML مع أي نقطة تمثل تاج هيتمل فإنها ترجع لنا محتوى التاج كاملا فمثلا:

document.getElementById('list').innerHTML

ترجع

" <ul> <li class="first">first item</li> <li>second item </li> <li>third item </li> </ul> "

و أيضا

document.getElementById('para').innerHTML

ترجع

" <p>This is a paragraph.</p> "

و لتغير محتوى الهيتميل لأي نقطة فإننا نغير قيمة innerHTML لها كهذا المثال حيث سنضع القائمة مكان القطعة This is a paragraph ثم نضع إرتباط تشعبي link مكان القائمة

list=document.getElementById('list')
para=document.getElementById('para')
para.innerHTML=list.innerHTML
list.innerHTML="<a href='#'>link</a>"

عند تنفيذ هذا الكود ستجد أن القائمة أصبحت بالأعلى مكان النص و صار مكانها إرتباطا تشعبيا link الأمثلة السابقة عبارة عن إحداث تعديل في محتوى نقاط موجودة أصلا ,أما لكي تضيف نقطة جديدة فإنك تنشئها أولا من خلال دوال معينه ثم تضيفها بإستخدام دوال أخرى و هذا ما سنشرحه الآن.

أولا:لإنشاء نقطة جديدة .

لإنشاء نقطة تكون عبارة عن تاج هيتميل تستخدم الدالة

document.createElement("إسم التاج");

مثلا لإنشاء نقطة عبارة عن التاج <p>

var par=document.createElement('p')

فيتم وضع النقطة الجديدة في المتغير par و لذا إذا كتبت par في الكنسول سيرجع لك <p> . لإنشاء نقطة تكون عبارة عن نص نستخدم الدالة

document.createTextNode("النص ")

مثلا إنشاء نقطة نصية تحتوى على النص جملة "هذا نص جديد"

text=document.createTextNode("هذا نص جديد").

الدالتين السابقتين مثل دالة write()لا بد أن تسبق ب document و ليس يمكن إستخدامهم مع أي نقطه أخرى في الـDOM. أما لعمل نسخه من نقطة موجوده مسبقا نستخدم دالة ()cloneNode و تأخذ برامتر إما true لتنسخ كل محتويات النقطة أو false لتنسخ النقطة فقط بدون ما تحتويه من نقط و لنطبق ذلك على المثال الذي نعمل عليه منذ الدرس الثاني. لنسخ النقطة div التي لها ال id="para" بوضع البرامتر true

nodecopy=document.getElementById('para').cloneNode(true)
nodecopy.innerHTML

ستجد أن النقطة نسخت إلى المتغير nodecopy الذي عندما تستعرض محتوياته بإستخدام innerHTML ستجدها " <p>This is a paragraph.</p> " و هو كل ما تحتويه ال div أما بوضع البرمتر flase

document.getElementById('para').cloneNode(false)
nodecopy2.innerHTML

في هذه المرة ستجد أن محتوى nodecopy2 عبارة عن "" أي أنه خالي.

ثانيا:إضافة النقط الجديدة إلى هيتميل.

تعلمنا كيف ننشيء النقط الآن سنتعلم كيف نركب النقط التي أنشأناها بالجافا سكريبت في الهيتميل و ذلك يكون من خلال عدد من الدوال.

appendChild(النقطة)

تركب النقطه الجديدة كإبن أخير lastChild للنقطة التي تركبها فيها. و كمثال سننشئ تاج <p> ثم نضع فيه نقطة نصية فيها النص "this is text" ثم نركب النقطه الجديدة في الـdiv الأول الذي له ال id=para

el=document.createElement('p')
text=document.createTextNode('this is text')
el.appendChild(text)
div=document.getElementById('para')
div.appendChild(el)

عند تنفيذ هذا الكود ستجد أنه سيظهر نص جديد في الصفحة و هو this is text و ستجد أنه ظهر بعد This is a paragraph و ليس قبل و ذلك لأنه كما قلنا هذه الدالةappendChild تضع النقطة كآخر نقطة.

insertBefore(النقطة الجديدة, النقطة الموجودة)

دالة insertBefore تضع النقطة الجديدة التي تعطيها لها قبل نقطة موجودة تحددها لها فمثلا سنضيف في المثال التالي النص this is text قبل This is a paragraph

el=document.createElement('p')
text=document.createTextNode('this is text')
el.appendChild(text)
div=document.getElementById('para')
firstp=div.childNodes[1]
firstp.parentNode.insertBefore(el,firstp)

في الثلاث سطور الأولى قمنا بإنشاء النقطة p و النص الذي بداخلها ,و هي موضوعة في المتغير el.

في السطر الرابع و الخامس و صلنا للنقطة التي نريد أن نضع النقطة التي أنشأناها قبلها ووضعناها في المتغير firstp.

في السطر الأخير قمنا فيه بتركيب النقطة الجديدة في الصفحة

firstp.parentNode.insertBefore(el,firstp)

لاحظ أننا وضعنا insertBefore بعد النقطة الأب parentNode للنقطة التي نريد أن نضع النقطة الجديدة el قبلها و التي هي firstp.

createDocumentFragment()

هذه الدالة تنشيء شيئا يسمى بالـDocumentFragment و هو عبارة عن صندوق تضع فيه النقاط عندما تريد أن تنشئ نقاط عديده ثم تركبها في الصفحه.كما بالمثال

var fragment = document.createDocumentFragment();
// Create 100 new paragraphs with createElement()
for (var i = 0; i < 100; i++) {
var para = document.createElement("p");
para.appendChild(document.createTextNode("Paragraph " + i));
fragment.appendChild(para);
}
document.body.appendChild(fragment)

هذ المثال يضيف 100 فقرة <p> .و إذا قمنا بإضافتهم واحدة واحدة إلى المتصفح هذا سيسبب بطئ و ثقل في الأداء و لذا فإنه يتم إنشاء fragment كما في السطر الأول ثم نضع النقاط كلها فيها كما في السطر السادس ثم بعد ذلك نقوم بالتركيب ال fragment بإستخدام appendChild .و إذا وضعت هذا الكود في الكنسول في المثال الذي نعمل عليه ستجد أن مئة فقرة ستظهر في الصحفة .

ثالثا:حذف نقطة

لحذف نقطة تستخدم الدالة

removeChild(النقطة الإبن)

وهي تقوم بحذف النقطة التي تحددها لها و ذلك بأن تسبق الدالة بالأب للنقطة التي تريد حذفها ثم تضع بين القوسين النقطة التي تريد حذفها مثلا لنحذف أول عنصر من عناصر القائمة في المثال الذي نعمل عليه.

li1=document.getElementsByClassName('first')[0]
li1.parentNode.removeChild(li1)

عند تنفيذ هذا الكود ستجد أن العنصر الأول في القائمة اختفى من الصفحة.

تطبيق

في هذا المثال سنستخدم innerHTMLمع createElement لإضافة محتوى كبير نسبيا بطريقة سهلة قم بتجربته بنفسك.