انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 70
دورة جافا سكريبت

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,409
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

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

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


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

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


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

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

JavaScript previousElementSibling syntax

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

HTML 
element.previousElementSibling

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

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

JavaScript previousElementSibling

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

HTML 
<!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.

HTML 
<!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 تقوم بإرجاع الكائن المجاور التالي وليس العنصر والكائن المجاور هو المسافة.

HTML 
<!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>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…