خاصية nextSibling في HTML DOM

مفهوم Object Element DOM HTML

nextSiblingتعود الخاصية العنصر التالي للعنصر المحدد (بما في ذلك عقدة النص، العقدة التعليقية، الرجوع، السطر الجديد، الفراغ، النص وما إلى ذلك).

إذا لم يكن هناك عقدة متساوية في السطح التالي، فإن هذه الخاصية تعودnull.

الفراغ يعتبر نصاً، والنص يعتبر عقدة. التعليقات أيضًا تعتبر عقدات.

لإزالة مشكلة عودة nextSibling إلى عقدة #text أو #comment، يمكن استخدامnextElementSiblingيتم استرجاع العناصر فقط.

استخدامpreviousSiblingيمكن استخدام هذه الخاصية لاسترجاع العنصر السابق في نفس المستوى من الشجرة.

استخدامchildNodesيمكن استخدام هذه الخاصية لاسترجاع أي فرع من الفرع المحدد.

القواعد النحوية:

node.nextSibling

<div id="div-1">هنا div-1</div>
<div id="div-2">هنا div-2</div>
<script>
var x = document.querySelector("#div-1").nextSibling.nodeName;
document.getElementById("result").innerHTML = x;
</script>

لكن، إذا تم حذف الفراغ بين DIV، فإن القيمة المعدة لن تكون #text:

<div id="div-1">هنا div-1</div><div id="div-2">هنا div-2</div>
<script>
var x = document.querySelector("#div-1").nextSibling.innerHTML;
document.getElementById("result").innerHTML = x;
</script>

متوافق مع المتصفحات

دعم nextSibling property تمامًا في جميع المتصفحات:

تفاصيل تقنية

مراجع مرتبطة

مرجع HTML DOMالنقطة خصائص .childNodes

مرجع HTML DOMالنقطة خصائص .firstChild

مرجع HTML DOMالنقطة خصائص .lastChild

مرجع HTML DOMالنقطة خصائص .parentNode

مرجع HTML DOMالنقطة خصائص .previousSibling

مرجع HTML DOMالنقطة خصائص .nodeName

مفهوم Object Element DOM HTML