JS DOM Nodes
العُقد مع DOM في لغة جافا سكريبت
في هذا الدرس سوف تتعلم كيفية انشاء Node جديد بداخل الشجرة Tree والحاقة باي Node او ازالة Node موجود بداخل ال Tree
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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>
</>
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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
