JavaScript

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

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

التاريخ

18 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

807

المواضيع

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

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

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

Mostafa Hefny

CEO & Founder CloseTag

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

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


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

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


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

  • قراءة الكائن السابق العنصر السابق المُتفرع من نفس الأب داخل شجرة DOM tree.
  • null ارجاع قيمة في حال عدم وجود كائن مجاور سابق مُتفرع من العنصر الأب داخل شجرة DOM tree.
  • قراءة مسافة فارغة في حالة ان العناصر ليست في نفس السطر سيتم احتساب المسافات كائن سابق مجاور والتي تُنتج من خلال زر enter.
JavaScript previousSibling syntax

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

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

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

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

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

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

</> JavaScript previousSibling get previous Object
قراءة الكائن السابق بواسطة دالة previousSibling في جافا سكريبت

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

JavaScript previousSibling with space

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

<h1 id="h1">JavaScript previousSibling</h1>
<p id="paragraph">from CloseTag previousSibling</p>
<script>
  let paragraph = document.getElementById('paragraph')
  /* check console */
  console.log(paragraph.previousSibling)
</script>
JavaScript previousSibling with next element

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

<h1 id="h1">JavaScript previousSibling</h1><p id="paragraph">from CloseTag previousSibling</p>
<script>
  let paragraph = document.getElementById('paragraph')
  /* check console */
  console.log(paragraph.previousSibling)
</script>
JavaScript get previousSibling content

قراءة وإرجاع المحتوي الداخلي للعنصر السابق المجاور في لغة جافا سكريبت.

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