JavaScript nextSibling — наступний вузол того ж рівня

Властивість nextSibling повертає наступний вузол того ж рівня — будь-якого типу.

правити

Загальний опис

Між двома сусідніми теґами в розмітці майже завжди є перенос рядка. Тому nextSibling віддасть текстовий вузол, а не наступний теґ — і саме на цьому найчастіше ламається обхід списку.

Потрібен наступний елемент — nextElementSibling.

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
nextSibling	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
nextSibling	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<ul>
    <li id="first">Перший</li>
    <li>Другий</li>
</ul>

const first = document.getElementById('first');

console.log(first.nextSibling.nodeType); // 3 — текст
console.log(first.nextElementSibling.textContent); // 'Другий'

// обхід усіх наступних сусідів
let node = first;

while (node = node.nextElementSibling) {
    console.log(node.textContent);
}