تستخدم دالة parentElement في لغة جافا سكريبت لقراءة وإرجاع عنصر الأب لعنصر فرعي إذا كان له عنصر أب وإن لم يكن له أب فتقوم بإرجاع قيمة null في لغة جافا سكريبت.

وظيفة parentElement في لغة جافا سكريبت:

قراءة العنصر الأب لعنصر فرعي داخل شجرة DOM tree.

قيم parentElement في لغة جافا سكريبت:

قراءة عنصر الأب لعنصر فرعي داخل شجرة DOM tree.
null ارجاع قيمة في حال عدم وجود عنصر أب للعنصر داخل شجرة DOM tree.

JavaScript parentElement syntax

طريقة كتابة دالة parentElement في لغة جافا سكريبت.

element.parentElement

</> JavaScript parentElement
دالة parentElement في لغة جافا سكريبت

سوف نستخدم في هذا المثال دالة previousElementSibling مع عنصر <p> لإرجاع العنصر السابق وهو عنصر <h1> في لغة جافا سكريبت.

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)

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

JavaScript parentElement Method
دالة parentElement في لغة جافا سكريبت

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات JavaScript parentElement Method JavaScript