JavaScript parentElement Method
دالة parentElement في لغة جافا سكريبت
سوف تتعلم في هذا الدرس وظيفة دالة parentElement وكيفية استخدامها وكيفية التنقل إلي العنصر الأب لعنصر فرعي داخل شجرة DOM في لغة جافا سكريبت.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript parentElement Method chevron_left JavaScript
JavaScript parentElement Method
دالة parentElement في لغة جافا سكريبت
</>
JavaScript parentElement Method
دالة parentElement في لغة جافا سكريبت
تستخدم دالة parentElement في لغة جافا سكريبت لقراءة وإرجاع عنصر الأب لعنصر فرعي إذا كان له عنصر أب وإن لم يكن له أب فتقوم بإرجاع قيمة null في لغة جافا سكريبت.
وظيفة parentElement في لغة جافا سكريبت:
قراءة العنصر الأب لعنصر فرعي داخل شجرة DOM tree.
قيم parentElement في لغة جافا سكريبت:
- قراءة عنصر الأب لعنصر فرعي داخل شجرة DOM tree.
- null ارجاع قيمة في حال عدم وجود عنصر أب للعنصر داخل شجرة DOM tree.
JavaScript parentElement syntax
طريقة كتابة دالة parentElement في لغة جافا سكريبت.
element.parentElement
</>
JavaScript parentElement
دالة parentElement في لغة جافا سكريبت
JavaScript parentElement
قراءة وإرجاع عنصر الأب للعنصر الفرعي داخل شجرة DOM في لغة جافا سكريبت عن طريق دالة parentElement.
<!DOCTYPE html> <html> <head> <title>JavaScript parentElement</title> </head> <body> <h1 id="h1">JavaScript parentElement</h1> <p id="paragraph">from CloseTag parentElement</p> <script> let h1 = document.getElementById('h1') /* check console */ console.log(paragraph.parentElement) </script> </body> </html>
Result from console
</>
JavaScript parentelement vs parentnode
الفرق بين دالة parentelement ودالة parentnode في جافا سكريبت
دالة parentElement هي دالة جديدة خصيصة ل Firefox 9 و DOM4 ولكنه كان موجودًا في جميع المتصفحات الرئيسية الأخرى على مر العصور, في معظم الحالات هو مثل parentNode تماماً والفرق الوحيد بينهم هو عندما يكون العنصر الأب ليس عنصر HTML يتم إرجاع قيمة null عند استخدام دالة parentNode عكس دالة parentElement فأنها لا تقوم بإرجاع نفس النتيجة في لغة جافا سكريبت.
document.body.parentNode; // the <html> element document.body.parentElement; // the <html> element document.documentElement.parentNode; // the document node document.documentElement.parentElement; // null (document.documentElement.parentNode === document); // true (document.documentElement.parentElement === document); // false
JavaScript body parentNode
قراءة وإرجاع العنصر الأب لعنصر ل body في لغة جافا سكريبت.
/* check console the <html> element document.body.parentNode // result is <html> element */ console.log(document.body.parentNode)
JavaScript body parentElement
قراءة وإرجاع العنصر الأب لعنصر ل body بواسطة parentElement في لغة جافا سكريبت.
/* check console the <html> element document.body.parentElement // result is <html> element */ console.log(document.body.parentElement)
JavaScript documentElement parentNode
قراءة وإرجاع العنصر الأب لعنصر المستند documentElement بواسطة parentNode في لغة جافا سكريبت.
/* check console document.documentElement.parentNode; // the document node */ console.log(document.documentElement.parentNode)
JavaScript documentElement parentElement
قراءة وإرجاع العنصر الأب لعنصر المستند documentElement بواسطة parentElement في لغة جافا سكريبت.
/* check console document.documentElement.parentElement; // null */ console.log(document.documentElement.parentElement)
JavaScript document documentElement parentNode
قراءة وإرجاع نوع العنصر الأب لعنصر المستند documentElement بواسطة parentNode في لغة جافا سكريبت.
/* check console (document.documentElement.parentNode === document); // true */ console.log(document.documentElement.parentNode)
JavaScript document documentElement parentElement
قراءة وإرجاع نوع العنصر الأب لعنصر المستند documentElement بواسطة parentElement في لغة جافا سكريبت.
/* check console (document.documentElement.parentElement === document); // false */ console.log(document.documentElement.parentElement)