انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 133
دورة جافا سكريبت

العُقد مع DOM في لغة جافا سكريبتJS DOM Nodes

في هذا الدرس سوف تتعلم كيفية انشاء Node جديد بداخل الشجرة Tree والحاقة باي Node او ازالة Node موجود بداخل ال Tree

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,875
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

Creating New Node

تستخدم الدالة  getElementById () في إرجاع كائن عنصر يمثل العنصر الذي تتطابق خاصية المعرف ID الخاصة به مع السلسلة المحددة. نظرًا لأن معرفات العناصر يجب أن تكون فريدة إذا تم تحديدها ، فهي طريقة مفيدة للوصول إلى عنصر معين بسرعة.

لكي نقوم بانشاء Element جديد هناك ثلاث شروط يجب اتباعهم :

  • نقوم بانشاء Element جديد بداخل ال Tree عن طريق document.createElement("TagName")
  • نقوم باضافة محتوي بداخلها سواء نصي او HTML عن طريق innerText او innerHTML
  • نقوم بالحاق ال Element الذي انشأناه اسفل Element موجود مسبقاُ عن طريق oldElement.appendChild(NewElement)
HTML 
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
جرّب بنفسك

insertBefore

طريقة ال appendChild تضيف ال Element في كأخر Child بالنسبة لل parent ,وهناك طريقة اخري لاضافة  Element جديد ولكن قبل Elemnt بداخل ال parent عن طريق استخدام insertBefore , تأخذ insertBefore قيميتين :

  • الاولي هي ال Element الذي قمنا بأنشائه
  • الثانية وهي ال Child الذي نريد ان نضيف ال Element الجديد قبلة
HTML 
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
جرّب بنفسك

Remove Element

لكي نقوم بحذف Element معين من داخل ال Tree يجب عليك :

  • اختيار ال Element عن طريق document.getElementById("idName")
  • استخدام دالة ( ) remove
HTML 
<!DOCTYPE html>
<html>
<body>

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


<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
  var elmnt = document.getElementById("p1");
  elmnt.remove();
}
</script>

</body>
</html>
جرّب بنفسك

Removing a Child

هناك طريقة اخري لإزالة ال node من ال Tree ولكن عن طريق ال parent :

  • قم باختيار ال parent عن طريق document.getElementById("parentIDName")
  • قم باختيار ال child الذي تريد حذفة من ال tree عن طريق document.getElementById("childIDName")
  • ثم نستخدم دالة removeChild مثال removeChildparent.removeChild(child)
HTML 
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
جرّب بنفسك

Replacing Elements تبديل

لكي تقوم باستبدال Element بدل Element اخر عليك استخدام دالة replaceChild

  • قم بانشاء Element جديد
  • قم باضافة محتوي بداخلة 
  • الحق هذا Element ب Element داخل ال Tree
  • اختار ال parent
  • اختار ال child 
  • قم عن طريق ال parent باستخدام parent.replaceChild(para, child) 

القيمة الاولي ال Element الذي تريد استبداله , والقيمة الثانية ال Element الجديد

HTML 
<!DOCTYPE html>
<html>
<body>

<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");
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>
جرّب بنفسك

Replacing Elements تبديل

لكي تقوم باستبدال Element بدل Element اخر عليك استخدام دالة replaceChild

  • قم بانشاء Element جديد
  • قم باضافة محتوي بداخلة 
  • الحق هذا Element ب Element داخل ال Tree
  • اختار ال parent
  • اختار ال child 
  • قم عن طريق ال parent باستخدام parent.replaceChild(para, child) 

القيمة الاولي ال Element الذي تريد استبداله , والقيمة الثانية ال Element الجديد

HTML 
<!DOCTYPE html>
<html>
<body>

<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");
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…