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

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

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

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

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

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

دالة 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>