JavaScript

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

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

التاريخ

12 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1202

المواضيع

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

JS DOM Nodes

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

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

</> 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
عدد التقييمات