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

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

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

Розглянемо приклад використання nextElementSibling. Нехай у нас є така структура HTML:

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

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

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

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

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

while (currentElement) {
  if (currentElement.nodeName === 'P') {
    console.log(currentElement.textContent);
  }
  currentElement = currentElement.nextElementSibling;
}

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

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

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

parentElement.insertBefore(newSpan, firstParagraph.nextElementSibling);

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

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

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

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

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

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

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

Синтаксис

Element.nextElementSibling

Значення

Return

Переглядачі

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

Приклади

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

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

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

// Виводимо елемент до консолі
console.log(nextElement);

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

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

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

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