انتقل إلى محتوى الدرس

JavaScript nextElementSibling VS nextSibling الفرق بين دالة nextElementSibling ودالة nextSibling في جافا سكريبت

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

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

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

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

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

JavaScript nextElementSibling

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

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

JavaScript nextSibling with space

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

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