JavaScript

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

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

التاريخ

18 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

631

المواضيع

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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

JavaScript nextSibling with space

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

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

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

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

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

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

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

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