JavaScript

JS DOM Nodes

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

التاريخ

20 نوفمبر 2023

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

469

المواضيع

24
الشروحات chevron_left JS DOM Nodes chevron_left JavaScript

JS DOM Nodes

</> Creating New Node

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

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

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

<!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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات