JS властивість Element.nextSibling

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

nextSibling є властивістю вузла в об'єктній моделі документа (DOM), що представляє наступний вузол того самого батьківського елемента. Ця властивість дозволяє отримати доступ до сусіднього вузла після поточного, що може бути корисним для обходу та маніпуляції елементами DOM. Вона широко застосовується при роботі з DOM, особливо для динамічних змін структури веб-сторінки.

Властивість nextSibling повертає наступний вузол-сусід або null, якщо такого вузла немає. Важливо зазначити, що ця властивість враховує всі типи вузлів, включно з текстовими вузлами та коментарями. Наприклад, розглянемо таку структуру HTML:

<div id="parent">
  <p>Перший параграф</p>
  <!-- Коментар -->
  <span>Текстовий вузол</span>
  <p>Другий параграф</p>
</div>

Якщо ми отримаємо перший елемент <p> та спробуємо отримати його наступний вузол-сусід за допомогою nextSibling, ми отримаємо вузол коментаря:

const firstParagraph = document.querySelector('#parent > p');
const nextNode = firstParagraph.nextSibling;
console.log(nextNode); // <!-- Коментар -->

Щоб отримати наступний елемент, а не текстовий вузол або коментар, ми можемо використати властивість nextElementSibling. Ця властивість повертає наступний елемент-сусід, ігноруючи текстові вузли та коментарі:

const firstParagraph = document.querySelector('#parent > p');
const nextElement = firstParagraph.nextElementSibling;
console.log(nextElement); // <span>Текстовий вузол</span>

Властивість nextSibling часто використовується в циклах для обходу всіх вузлів-сусідів. Наприклад, щоб вивести всі елементи <p> у батьківському елементі #parent, ми можемо використати такий код:

const parentElement = document.querySelector('#parent');
let currentNode = parentElement.firstChild;

while (currentNode) {
  if (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.nodeName === 'P') {
    console.log(currentNode.textContent);
  }
  currentNode = currentNode.nextSibling;
}

У цьому прикладі ми використовуємо firstChild для отримання першого дочірнього вузла батьківського елемента, а потім ітеруємо через всі вузли-сусіди за допомогою циклу while та властивості nextSibling. Ми перевіряємо, чи є поточний вузол елементом <p>, і якщо так, виводимо його текстовий вміст.

Властивість nextSibling також корисна для вставки нових елементів у DOM. Наприклад, щоб вставити новий елемент <span> після першого елемента <p> у батьківському елементі #parent, ми можемо використати такий код:

const parentElement = document.querySelector('#parent');
const firstParagraph = parentElement.firstElementChild;
const newSpan = document.createElement('span');
newSpan.textContent = 'Новий елемент';

parentElement.insertBefore(newSpan, firstParagraph.nextSibling);

У цьому прикладі ми створюємо новий елемент <span> за допомогою document.createElement('span') та встановлюємо його текстовий вміст. Потім ми використовуємо метод insertBefore на батьківському елементі, передаючи новий елемент newSpan та firstParagraph.nextSibling як другий аргумент. Це вставить новий елемент <span> безпосередньо після першого елемента <p>.

Крім того, властивість nextSibling може бути корисною для зміни стилів або маніпуляції із сусідніми вузлами. Наприклад, щоб змінити колір тексту всіх елементів <p> після першого елемента <p> у батьківському елементі #parent, ми можемо використати такий код:

const parentElement = document.querySelector('#parent');
let currentNode = parentElement.firstElementChild.nextElementSibling;

while (currentNode) {
  if (currentNode.nodeName === 'P') {
    currentNode.style.color = 'red';
  }
  currentNode = currentNode.nextElementSibling;
}

У цьому прикладі ми починаємо з наступного елемента після першого елемента <p> за допомогою firstElementChild.nextElementSibling. Потім ми ітеруємо через всі наступні елементи-сусіди за допомогою циклу while та властивості nextElementSibling. Якщо поточний вузол є елементом <p>, ми змінюємо колір його тексту на червоний.

Підсумовуючи, властивість nextSibling є корисним інструментом для обходу та маніпуляції вузлами DOM. Вона дозволяє отримати доступ до наступного вузла-сусіда, включно з текстовими вузлами та коментарями, що може бути корисним для різноманітних операцій з DOM. Разом з іншими властивостями та методами DOM, nextSibling забезпечує гнучкість та контроль над структурою веб-сторінки.

Синтаксис

Element.nextSibling

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Отримуємо елемент з ідентифікатором 'start'
const startElement = document.getElementById('start');

// Отримуємо наступний елемент-сусід
const nextSibling = startElement.nextSibling;

// Виводимо вузол до консолі
console.log(nextSibling);

// Отримуємо елемент з ідентифікатором 'parent'
const parentElement = document.getElementById('parent');

// Отримуємо першого дочірнього елемента
let currentChild = parentElement.firstChild;

// Проходимо по всіх дочірніх елементах
while (currentChild) {
  // Перевіряємо, чи це елемент (nodeType === 1)
  if (currentChild.nodeType === 1) {
    // Виконуємо дії з елементом
    console.log(`Елемент: ${currentChild.tagName}`);
  }

  // Переходимо до наступного сусіда
  currentChild = currentChild.nextSibling;
}