nextElementSibling в JavaScript — наступний елемент-сусід

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

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 забезпечує гнучкість та контроль над структурою веб-сторінки.

правити

Порада

При вставці нового елемента в DOM, використовуйте nextElementSibling разом із методом insertBefore для вказання місця вставки відносно існуючих елементів. Це дозволить вставляти нові елементи перед або після певного елемента без необхідності обробляти текстові вузли та коментарі.

const newElement = document.createElement('div');
const existingElement = document.querySelector('#myElement');
existingElement.parentNode.insertBefore(newElement, existingElement.nextElementSibling);

автор: Bond правити

Порада

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

let currentElement = parentNode.firstElementChild;
while (currentElement) {
  const nextElement = currentElement.nextElementSibling; // Зберігаємо посилання на наступний елемент
  // Виконуємо операції з currentElement
  currentElement = nextElement; // Переходимо до наступного елемента
}

автор: Bond правити

Порада

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

let currentElement = parentNode.firstElementChild;
while (currentElement) {
  if (currentElement.nodeName === 'P') {
    // Виконуємо операції з елементом <p>
  }
  currentElement = currentElement.nextElementSibling || null;
}

автор: Bond правити

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

Синтаксис

Element.nextElementSibling

Переглядачі

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

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

Переглядач
	2	3.5	4	10	12	9

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

Переглядач
	4.4	18	4	3

Приклади

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

<div id="start">Демонстраційний елемент</div>

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

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

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

<div id="parent">Демонстраційний елемент</div>

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

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

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

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

<header>
  <h2 class="title">Element.nextElementSibling</h2>
  <p class="description">Повертає елемент, який безпосередньо йде після поточного елемента на тому самому рівні вкладеності.</p>
</header>
<main>
  <div class="result">
    <h3>Список елементів:</h3>
    <ul id="list">
      <li id="item1">Елемент 1</li>
      <li id="item2">Елемент 2</li>
      <li id="item3">Елемент 3</li>
    </ul>
    <button id="next">Наступний елемент</button>
    <p id="output"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

const items = document.querySelectorAll('#list li');
const nextBtn = document.getElementById('next');
const output = document.getElementById('output');

let currentIndex = 0;

nextBtn.addEventListener('click', () => {
  const currentItem = items[currentIndex];
  const nextItem = currentItem.nextElementSibling;

  if (nextItem) {
    output.textContent = `Наступний елемент після "${currentItem.textContent}" є "${nextItem.textContent}"`;
    currentIndex++;
  } else {
    output.textContent = 'Це був останній елемент у списку.';
  }
});
//# sourceURL=pen.js