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

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

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

Використання previousElementSibling досить просте. Розглянемо приклад з HTML-структурою:

<div id="parent">
  <p>Перший текстовий вузол</p>
  <span id="middle">Середній вузол</span>
  <p>Другий текстовий вузол</p>
  <button id="sibling">Попередній елемент-сусід</button>
</div>

Ми можемо отримати доступ до попереднього елемента-сусіда елемента button через властивість previousElementSibling:

const siblingButton = document.getElementById('sibling');
const previousElementSibling = siblingButton.previousElementSibling;
console.log(previousElementSibling); // <p>Другий текстовий вузол</p>

Як ви можете помітити, previousElementSibling пропустив текстові вузли між елементами span та p, повернувши лише безпосередньо попередній елемент-сусід.

Одним із поширених випадків використання previousElementSibling є маніпуляція сусіднім елементом на основі дій, виконаних на поточному елементі. Наприклад, ми можемо змінити стиль попереднього елемента-сусіда при натисканні на поточний елемент:

<div id="parent">
  <button id="first">Перший</button>
  <button id="second">Другий</button>
</div>

const secondButton = document.getElementById('second');
secondButton.addEventListener('click', () => {
  const previousElementSibling = secondButton.previousElementSibling;
  if (previousElementSibling) {
    previousElementSibling.classList.add('highlighted');
  }
});

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

<div id="parent">
  <p id="previous">Попередній текст</p>
  <input type="text" id="current" placeholder="Введіть текст">
</div>

const currentInput = document.getElementById('current');
const previousElementSibling = currentInput.previousElementSibling;

currentInput.addEventListener('input', () => {
  if (previousElementSibling) {
    previousElementSibling.textContent = currentInput.value;
  }
});

Крім того, previousElementSibling може бути використана для перевірки, чи є елемент попереднім елементом-сусідом певного іншого елемента, що може бути корисним для різних цілей, наприклад, для валідації або авторизації.

Продовження:

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

Однак слід пам'ятати, що previousElementSibling повертає null, якщо елемент не має попереднього елемента-сусіда. Це може статися, наприклад, для першого дочірнього елемента батьківського елемента. Тому завжди перевіряйте результат перед виконанням будь-яких операцій з попереднім елементом-сусідом:

const currentElement = document.getElementById('current');
const previousElementSibling = currentElement.previousElementSibling;
if (previousElementSibling) {
  // Виконайте операції з попереднім елементом-сусідом
} else {
  // Обробіть випадок, коли попередній елемент-сусід відсутній
}

Порівняно з властивістю previousSibling, previousElementSibling може бути більш зручною для використання, оскільки вона повертає лише елементи-вузли, уникаючи необхідності перевіряти тип вузла перед виконанням операцій. Однак, якщо вам потрібно працювати з текстовими вузлами або іншими типами вузлів, краще використовувати previousSibling.

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

Властивість previousElementSibling широко використовується у веб-розробці для різноманітних цілей, таких як маніпуляція стилями, обробка подій, валідація даних та багато іншого. Вона є невід'ємною частиною інструментарію для роботи з DOM і дозволяє ефективно взаємодіяти з елементами на веб-сторінці.

Синтаксис

Element.previousElementSibling

Значення

Return

Переглядачі

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

Приклади

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

// Створюємо новий елемент div
const parentDiv = document.createElement('div');

// Створюємо два нових елемента p
const firstP = document.createElement('p');
firstP.textContent = 'Це перший елемент p';

const secondP = document.createElement('p');
secondP.textContent = 'Це другий елемент p';

// Додаємо елементи p до елемента div
parentDiv.appendChild(firstP);
parentDiv.appendChild(secondP);

// Отримуємо previousElementSibling для другого елемента p
const previousElementSibling = secondP.previousElementSibling;

// Виводимо previousElementSibling у консоль
console.log(previousElementSibling === firstP); // Вивід: true

// Створюємо новий елемент div
const parentDiv = document.createElement('div');

// Створюємо два нових елемента p
const firstP = document.createElement('p');
firstP.textContent = 'Це перший елемент p';

const secondP = document.createElement('p');
secondP.textContent = 'Це другий елемент p';

// Створюємо новий текстовий вузол
const textNode = document.createTextNode('Це текстовий вузол');

// Додаємо елементи p та текстовий вузол до елемента div
parentDiv.appendChild(firstP);
parentDiv.appendChild(textNode);
parentDiv.appendChild(secondP);

// Отримуємо previousElementSibling для другого елемента p
const previousElementSibling = secondP.previousElementSibling;

// Виводимо previousElementSibling у консоль
console.log(previousElementSibling === firstP); // Вивід: true