JavaScript

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

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

التاريخ

25 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

660

المواضيع

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

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

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

تستخدم دالة previousElementSibling في لغة جافا سكريبت لقراءة وإرجاع العنصر السابق المُتفرع من نفس الأب داخل شجرة DOM tree بخلاف دالة previousSibling فأنها تقوم بقراءة وارجاع الكائن التالي وليس العنصر التالي.


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

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


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

  • قراءة العنصر التالي العنصر المُتفرع من نفس الأب داخل شجرة DOM tree.
  • null ارجاع قيمة في حال عدم وجود عنصر مجاور تالي مُتفرع من العنصر الأب داخل شجرة DOM tree.
JavaScript previousElementSibling syntax

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

element.previousElementSibling
هام
previousElementSibling تقوم بقراءة وإرجاع العنصر التالي المجاور للعنصر ولا تقوم بإرجاع مسافات فارغه أو كائنات.

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

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

قراءة وإرجاع العنصر التالي داخل شجرة DOM في لغة جافا سكريبت عن طريق دالة previousElementSibling.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript previousElementSibling</title>
</head>
<body>
<h1 id="h1">JavaScript previousElementSibling</h1>
<p id="paragraph">from CloseTag previousElementSibling</p>
<script>
  let p = document.getElementById('paragraph')
  /* check console */
  console.log(paragraph.previousElementSibling)
</script>
</body>
</html>
Result from console
Result from console

</> JavaScript previousElementSibling VS previousSibling
الفرق بين دالة previousElementSibling ودالة previousSibling في جافا سكريبت

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

JavaScript previousElementSibling

قراءة وإرجاع العنصر التالي داخل شجرة DOM في لغة جافا سكريبت عن طريق دالة previousElementSibling.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript previousElementSibling</title>
</head>
<body>
<h1 id="h1">JavaScript previousElementSibling</h1>
<p id="paragraph">from CloseTag previousElementSibling</p>
<script>
  let p = document.getElementById('paragraph')
  /* check console */
  console.log(paragraph.previousElementSibling)
</script>
</body>
</html>
JavaScript previousSibling with space

سيتم إرجاء المسافة بين عنصر h1 وعنصر p لأن previousSibling تقوم بإرجاع الكائن المجاور التالي وليس العنصر والكائن المجاور هو المسافة.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript previousSibling</title>
</head>
<body>
<h1 id="h1">JavaScript previousSibling </h1>
<p id="paragraph">from CloseTag previousElementSibling</p>
<script>
  let paragraph = document.getElementById('paragraph')
  /* check console */
  console.log(paragraph.previousSibling)
</script>
</body>
</html>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.