JavaScript

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

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

التاريخ

25 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

892

المواضيع

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

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

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

Mostafa Hefny

CEO & Founder CloseTag

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

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