انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: دالة parentElement في لغة جافا سكريبت

JavaScript parentelement vs parentnode الفرق بين دالة parentelement ودالة parentnode في جافا سكريبت

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

1 صفوف تعليمية
جافا سكريبت
2,899 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

دالة parentElement  هي دالة جديدة خصيصة ل Firefox 9 و DOM4 ولكنه كان موجودًا في جميع المتصفحات الرئيسية الأخرى على مر العصور, في معظم الحالات   هو مثل parentNode تماماً والفرق الوحيد بينهم هو عندما يكون العنصر الأب ليس عنصر HTML يتم إرجاع قيمة null عند استخدام دالة parentNode عكس دالة parentElement فأنها لا تقوم بإرجاع نفس النتيجة في لغة جافا سكريبت.

HTML 
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 في لغة جافا سكريبت.

HTML 
/* check console the <html> element document.body.parentNode // result is <html> element */
  console.log(document.body.parentNode)
جرّب بنفسك

JavaScript body parentElement

قراءة وإرجاع العنصر الأب لعنصر ل body بواسطة parentElement في لغة جافا سكريبت.

HTML 
/* check console the <html> element document.body.parentElement // result is <html> element */
  console.log(document.body.parentElement)
جرّب بنفسك

JavaScript documentElement parentNode

قراءة وإرجاع العنصر الأب لعنصر المستند documentElement بواسطة parentNode في لغة جافا سكريبت.

HTML 
/* check console document.documentElement.parentNode; // the document node */
  console.log(document.documentElement.parentNode)
جرّب بنفسك

JavaScript documentElement parentElement

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

HTML 
/* check console document.documentElement.parentElement; // null */
  console.log(document.documentElement.parentElement)
جرّب بنفسك

JavaScript document documentElement parentNode

قراءة وإرجاع نوع العنصر الأب لعنصر المستند documentElement بواسطة parentNode في لغة جافا سكريبت.

HTML 
/* check console (document.documentElement.parentNode === document);  // true */
  console.log(document.documentElement.parentNode)
جرّب بنفسك

JavaScript document documentElement parentElement

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

HTML 
/* check console (document.documentElement.parentElement === document);  // false */
  console.log(document.documentElement.parentElement)
جرّب بنفسك

جميع فقرات هذا الدرس (دالة parentElement في لغة جافا سكريبت)